The XPay SDK allows you to render multiple payment methods dynamically based on store configurations.

Render All Available Methods

To render all available payment methods, simply load the SDK without specifying paymentMethods. If the store has card, JazzCash, or Easypaisa gateways configured, the respective options will be displayed else only the card payment option will be available.

Render Specific Payment Methods

Currently, the XPay SDK supports Card , JazzCash, EasyPaisa and Google Pay payment methods. By default, both methods render within the same element with tabs. However, if you want to render them separately, follow the steps below.

Payment Method Behavior

• Set paymentMethods: ["card"] for the Card payment element.
• Set paymentMethods: ["jazzcash"] for the JazzCash payment element.
• Set paymentMethods: ["easypaisa"] for the Easypaisa payment element.
• Set paymentMethods: ["googlepay"] for the Google Pay payment element.
• If you pass multiple methods in an array like paymentMethods: ["card", "jazzcash", "googlepay", "easypaisa"], they will be combined into a single element with tabbed options for each method.

Rendering Element with Specific Payment Method

<aside> 💡

You need to use the V4 SDK version.

Stage Env: https://js.xstak.com/v4/xpay-stage.js

React NPM Package: "@xstak/xpay-element-stage-v4": "^1.1.2"

The URL for the live environment will be added soon.

</aside>

Vanilla JavaScript Implementation

1. Include the XPay script in your index.html file.
2. Initialize separate XPay instances for each payment method.
3. Configure the options for rendering.
4. Pass the dom node where the payment form should be loaded.
5. Use separate constructors for each payment method to render them separately.

Code Example: