@xstak/xpay-element NPM

XPay Embedded Element

XPay Fusion Embedded Element is a PCI DSS compliant solution to collect payments from your customers on your website without them having to redirect to a third party payment page. The @xstak/xpay-element is a React wrapper on top of the XPay Embedded Element SDK.

Example

First install

npm i @xstak/xpay-element

Import XPay provider and add the required keys.

import { XPay } from '@xstak/xpay-element';
    function XPayPayment() {
        return  (
            <XPay xpay={{ publishableKey: "", accountId: "", hmacSecret: ""}}>
                <Payment />
            </XPay>
        )
    }

Import PaymentElement, useXPay hook to render payment element.

import React from 'react';
import { PaymentElement, useXpay } from '@xstak/xpay-element';

export const Payment = () => {
    const options = {
        override: true,
        fields: {
          creditCard: {
            placeholder: "1234 1234 1234 1234",
            label: "Enter your credit card",
          },
          exp: {
            placeholder: "Exp. Date",
          },
        },
        style: {
          ".input": {},
          ".invalid": {},
          ".label": {},
          ":focus": {},
          ":hover": {},
          "::placeholder": {},
          "::selection": {},
        },
      };

    const xpay = useXpay();
    const pay = async() => {
        const { message, error } = await xpay.createPaymentMethod("card", payment_intent_client_secret);
    }
    return(
        <>
        <PaymentElement options={options} onReady={(event) => {
            console.log("ready event", event);
          }} />
        <Button type="primary" onClick={pay}>
          Pay Now
        </Button>
        </>
    )
}

Custom Styling

XPay SDK supports custom styling and changing labels and placeholder texts of input fields as per your design to provide seamless experience to your customers.