Skip to main content

How to Validate Payment

The Pay Button​

The use of the PAY_BUTTON is mandatory to submit the payment.
It is automatically linked to the associated payment widget.

In some cases, our partners require a user click on their branded button (e.g. Apple Pay, Google Pay).
Our PAY_BUTTON captures this click and forwards it as needed.
See the X-Pay Buttons section for more details.

Below is a custom configuration example:

The widget uses the ID HTML attribute to target its rendering place. Here, we assume that the DOM contains an element with the id widget-button

const payButton = await manager.createWidget({
    ui: {
        translations: {
            overrides: {
                WIDGET_PAY_BUTTON_TEXT: "Proceed to payment"
            }
        },
        stylesheet: {
            overrides:{
                "usp-pay-button-use-partner-ui":true, // false if you want to display our button in every case (allowing customisation)
            }
        }
    },
    interface: "PAY_BUTTON"
});
await payButton.mount("widget-button");

X-Pay Buttons​

X-Pay buttons are UI elements rendered directly by the payment providers (Google Pay, Apple Pay, PayPal, etc.).

You can configure them using ui.payButtons in your widget setup.
This lets you define visual styles and behavior for each method.

Provider Reference Docs:​

warning

To use the Apple Pay button:

  • You must be using Safari on an Apple device
  • Your domain must be whitelisted by Apple
  • You must be serving pages over HTTPS

➡️ Contact our integration team if you need help configuring this.

Example with Google Pay​

The widget uses the ID HTML attribute to target its rendering place. Here, we assume that the DOM contains an element with the id widget-x-pay-buttons

const payButton = await manager.createWidget({
    interface: "X_PAY_BUTTONS",
    ui:{
        payButtons:{
            google: {
              buttonSizeMode: 'fill',
              buttonColor: 'black',
              buttonType: 'plain'
            }
        },
        translations:{
            overrides:{
            }
        }
    }
});
await payButton.mount("widget-x-pay-buttons");
Full payButtons override example
{
  google: {
    buttonSizeMode: 'fill',
    buttonColor: 'black',
    buttonType: 'plain',
  },
  apple: {
    buttonstyle: 'black',
    type: 'buy',
  },
  paypal: {
    layout: 'vertical',
    color: 'blue',
    shape: 'rect',
    label: 'paypal',
    height: 40,
  }
}

Submit Widget​

Once the form is complete and the widget emits the payable event, you can submit the payment:

manager.submitPayment(); // Trigger widget submission on button click
  • The submit call locks the selected payment method and sends the data to Purse API.
  • This ensures the transactions can be reconciled.
info

Now that we’ve covered the usage of the Pay Button, the next step is to check whether the payment returns a successful status. Let's move on to the Advanced Features & Customization page to explore all the widget's capabilities.