XPay Web SDK

//stage env

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

//live env

https://js.xstak.com/v4/xpay.js

//stage

npm i @xstak/xpay-element-stage-v4

//live

npm i @xstak/xpay-element-live-v4

<script defer src="https://js.xstak.com/v4/xpay.js"></script>
<script defer src="https://js.xstak.com/v4/xpay-stage.js"></script>

import { XPay } from '@xstak/xpay-element-stage-v4';

<XPay xpay={{ publishableKey: import.meta.env.VITE_PUBLISHABLE_KEY, accountId: import.meta.env.VITE_ACCOUNT_ID, hmacSecret: import.meta.env.VITE_HMAC_SECRET}}>
    <Payment />
</XPay>

import { PaymentElement, useXpay } from '@xstak/xpay-element-stage-v4';

export const Payment = () => {
    const [loading, setLoading] = useState(false);
    // moify input field styling and labels
    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 payNow = async() => {
    let customer = { name: 'guest user'};
        try {
            setLoading(true);
            const { clientSecret, encryptionKey } = await fetch("http://localhost:4242/create-payment-intent", {
              method: "post",
            })
              .then((res) => res.json())
              .then((res) => res);
              const { error, message } = await xpay.confirmPayment("card", clientSecret, customer, encryptionKey);
            setLoading(false);
            alert(message);
          } catch (e) {
            setLoading(false);
            alert(e.message);
          }
    }
    return(
        <div id="payment-form">
        <PaymentElement options={options} onReady={(event) => {
            console.log("ready event", event);
          }} />
        <Button type="primary" onClick={payNow} loading={loading}>
          Pay Now
        </Button>
        </div>
    )
}