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.

Widget initialized using the **hidePayButton** parameter

Hide the native button

Hide the button:

Initialize the widget.
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.initialize({
  ...
  preloadWidgets: [
    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.initialize() or DeunaSDK.initPaymentWidget(...) depending on your integration approach:

Method Description Response

DeunaSDK.isValid() Checks whether card information has been entered and if a save attempt can be made. Returns Promise<true> only if all fields are valid, Promise<false> otherwise.

Method	Description	Response
`DeunaSDK.isValid()`	Checks whether card information has been entered and if a save attempt can be made.	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" }>`

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" }>

...