Rendering Card, JazzCash, Easypaisa, and Google Pay, Baadmay Element Separately

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, Easypaisa or baadmay 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.
Set paymentMethods: ["bnpl"] for the Baadmay payment element.
If you pass multiple methods in an array like paymentMethods: ["card", "jazzcash", "googlepay", "easypaisa", "bnpl"], they will be combined into a single element with tabbed options for each method.

Rendering Element with Specific Payment Method

💡

You need to use the V4 SDK version.

Vanilla JavaScript Implementation

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

Code Example:

javascript

// 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);

React Implementation

Install the required XPay SDK package:

plain text

npm i @xstak/xpay-element-stage-v4": "^1.1.2"

Configure the SDK in your React component.
Use separate XPay instances and PaymentElement components for each payment method.
If you want to render both payment methods separately, create separate PaymentElement components.

Code Example:

javascript

import { XPay, PaymentElement, useXpay, OptionsProps } from '@xstak/xpay-element-stage-v2';
const xpayCard = useXpay();
const xpayWallet = useXpay();
const cardOptions:OptionsProps = {
    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 walletOptions:OptionsProps = {
    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 confirmPayment = async (xpayInstance: any, method: string) => {
    try {
        const response = await xpayInstance.confirmPayment(method, 'clientSecret', { name: 'customer name' }, 'encryptionKey');
        console.log(response);
    } catch (err: any) {
        console.log(err);
    }
};
<XPay
    xpay={{
        publishableKey: 'your_publishable_key',
        accountId: 'your_account_id',
        hmacSecret: 'your_hmac_secret',
    }}>
    <div>
        <h3>Credit / Debit Card Payment</h3>
        <PaymentElement options={cardOptions} />
        <button onClick={() => confirmPayment(xpayCard, 'card')}>Pay with Card</button>
    </div>
</XPay>
<XPay
    xpay={{
        publishableKey: 'your_publishable_key',
        accountId: 'your_account_id',
        hmacSecret: 'your_hmac_secret',
    }}>
    <div>
        <h3>JazzCash Payment</h3>
        <PaymentElement options={walletOptions} />
        <button onClick={() => confirmPayment(xpayWallet, 'jazzcash')}>Pay with JazzCash</button>
    </div>
</XPay>