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 payment methods. If the store has both card and JazzCash configured, both will be displayed. If JazzCash is not configured, only the card payment option will be available.

Render Specific Payment Methods

Currently, the XPay SDK supports Card and JazzCash 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.
• If you pass both in an array like paymentMethods: ["card", "jazzcash"], they will not render separately but instead be combined into the same element with tabs.

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.0.0"

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:

// Card Payment Method
const cardElement = new Xpay(
    'your_store_public_key',
    'your_account_id',
    'your_store_hmac'
);
const cardOptions = {
    override: true,
    paymentMethods: ['card'],
    fields: {
        creditCard: {
            placeholder: '1234 1234 1234 1234',
            label: 'Enter your credit card',
        },
        exp: {
            placeholder: 'Exp. Date',
        },
        cvc: {
            placeholder: 'CVC',
            label: 'CVC',
        },
        name: { required: true }, // default value: false
        email: { required: true }, // default value: false
    },
    style: {
        '.input': {},
        '.invalid': {},
        '.label': {
            'font-size': '',
            color: '',
        },
        ':focus': {},
        '.input:focus': {
            'box-shadow': '',
            'border-color': '',
        },
        ':hover': { 'box-shadow': '', 'border-color': '' },
        '::placeholder': { 'font-size': '', color: '' },
        '::selection': { 'box-shadow': '' },
    },
};
const cardApp = cardElement.element('#card-form', cardOptions);
// JazzCash Payment Method
const walletElement = new Xpay(
    'your_store_public_key',
    'your_account_id',
    'your_store_hmac'
);
const walletOptions = {
    override: true,
    paymentMethods: ['jazzcash'],
    fields: {
        mobileNumber: {
            placeholder: 'Enter your mobile number',
            label: 'Mobile Number',
        },
        cnic: {
            placeholder: 'cnic number',
            label: 'Cnic Number',
        },
    },
    style: {
        '.input': {},
        '.invalid': {},
        '.label': {
            'font-size': '',
            color: '',
        },
        ':focus': {},
        '.input:focus': {
            'box-shadow': '',
            'border-color': '',
        },
        ':hover': { 'box-shadow': '', 'border-color': '' },
        '::placeholder': { 'font-size': '', color: '' },
        '::selection': { 'box-shadow': '' },
    },
};
const walletApp = walletElement.element('#jazzcash-form', walletOptions);