Skip to main content

Digital Wallets

Digital wallets (e.g., Google Pay, Apple Pay, PayPal) render their own button and act as the payment initiator. For the standard pay flow, see the Getting Started Guide.

Prerequisites​

  • Method available in session: The wallet method must be present in checkout.paymentMethods.
  • Environment support: The wallet will only render on supported devices/browsers and when requirements (e.g., merchant/domain setup) are met.

Display a Wallet Button in Three Steps​

1. Locate the Method​

Find the wallet method in checkout.paymentMethods.

2. Create the Element​

Get the element with paymentMethod.getPaymentElement(options).

3. Mount It​

Mount the element using paymentElement.appendTo(target).

<div id="x-pay-button"></div>
const method = checkout.paymentMethods.value.find((method) => method.method === "googlepay");

const paymentElement = method.getPaymentElement({
    xPayButton: {
        google: {
            buttonColor: 'default',
            buttonType: 'buy',
            buttonRadius: 4
        }
    }
});

paymentElement.appendTo(document.getElementById("x-pay-button"));

Best Practices​

  • Respect official UI: Do not alter the official button styles or behavior.
  • Order sensibly: Suggest a clear order of methods (e.g., gift card, then wallet button).
  • One clear call-to-action: Avoid showing multiple competing pay buttons at once.

Troubleshooting​

  • Button not rendering: Confirm the method exists: checkout.paymentMethods.value.find(m => m.method === "googlepay").
  • Unsupported environment: Some wallets only appear in compatible browsers/devices and locales.