Developer tools

Customize buttons

Customize the Pay button

The DEUNA SDK allows you to hide the native "Pay" button from the widget and replace it with a custom button in our merchants' UI. This is functional for:

  • Checkouts with custom design that seek to maintain visual coherence with your brand.
  • Advanced validations that ensure prior conditions before allowing payment.
DEUNA native button

DEUNA native button

Widget initialized using the **hidePayButton** parameter

Widget initialized using the hidePayButton parameter

Hide the native button

Hide the button:

  1. Initialize the widget.
  2. Activate the behavior > hidePayButton parameter:
    • If hidePayButton is false or undefined, the widget shows the standard button.
    • If hidePayButtin is true, the widget hides the standard button.
await DeunaSDK.initPaymentWidget({
  orderToken: "<DEUNA order token>",
  ...
  behavior:{
		hidePayButton: true
  }
});

📘

This configuration cannot be changed dynamically after initializing the widget.

Validate data and execute payment

In custom buttons, use the following methods to validate and execute payment with DeunaSDK.initPaymentWidget(...):

MethodDescriptionResponse
DeunaSDK.isValid()Verifies if the widget fields (card, CVV, etc.) are complete and valid so that payment can be processed.Returns Promise<true> only if all fields are valid, Promise<false> otherwise.
DeunaSDK.submit()Executes the payment process, equivalent to pressing the "Pay" button (native button). Performs the same internal validations.Promise<{status: "success", message: "Payment processed successfully" }>
or

Promise<{status: "error", message: "The submit flow is not available" }>

...