Configure displayed payment methods

Use the Web SDK v5 paymentMethods option to render all configured methods, combine selected methods in one XPay Element, or render selected methods separately.

Supported values#

Web SDK v5 supports the same paymentMethods values documented for v4:

Only payment methods configured for the merchant can be displayed and processed.

Omit paymentMethods to include all methods configured for the merchant, including the available Raast flows.

Render all configured methods#

Omit paymentMethods to let XPay Element display the payment methods available for the merchant:

const xpay = new XPay({
  publishableKey: "{{publishable_key}}",
  accountId: "{{account_id}}"
});

xpay.element("#xpay-element", {});

Combine selected methods#

Pass multiple values to render one element with a tab for each selected and configured method:

const options = {
  paymentMethods: [
    "card",
    "jazzcash",
    "easypaisa",
    "googlepay",
    "bnpl",
    "rtp",
    "dqr"
  ]
};

xpay.element("#xpay-element", options);

Render methods separately#

Create one XPay instance and container for each separately displayed method:

<div id="card-element"></div>
<div id="jazzcash-element"></div>

Use the XPay instance associated with the selected element when confirming its payment.

Configure React#

Pass the same option to PaymentElement inside the Web SDK v5 XPay wrapper:

<PaymentElement
  options={{
    paymentMethods: ["card", "jazzcash"]
  }}
/>

To render methods separately, render each PaymentElement in its own XPay wrapper and pass one method value to each element.

Use the correct field name#

paymentMethods is the Web SDK option. The B2B Payments API uses payment_methods; see B2B Payments API.

Next steps#

• XPay Web SDK.
• Payment methods.
• Use the XPay API reference for server-side payment-method fields.