Integration of React-based web apps.
- NPM Package
JavaScript
//stage
npm i @xstak/xpay-element-stage-v4
//live
npm i @xstak/xpay-element-live-v4- Add the SDK URL to the index.html file of yours as a script.
JavaScript
//Live
<script defer src="https://js.xstak.com/v4/xpay.js"></script>
//Stage
<script defer src="https://js.xstak.com/v4/xpay-stage.js"></script>- In the main checkout component, import the XPay SDK constructor.
- Wrap it around the payment component in which the payment element (payment input fields) will be embedded.
JavaScript
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>- In the payment component, import the XPay payment element along with the XPay hook.
JavaScript
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>
)
}Integration of Vanilla JS web app
1. Add SDK Script
Include the XPay SDK in your index.html file:
JavaScript
//Live
<script defer src="https://js.xstak.com/v4/xpay.js"></script>
//Stage
<script defer src="https://js.xstak.com/v4/xpay-stage.js"></script>2. Create Payment Form
Add a container where the payment element will be mounted. You can also create your own container and pass that container id to XPay element while mounting. Sample Code:
JavaScript
<div id="payment-form">
<div id="form"></div>
<button id="submit">
<div class="spinner hidden" id="spinner"></div>
<span id="button-text">Pay Now</span>
</button>
<div id="payment-message" class="hidden"></div>
</div>3. Initialize SDK, Configure & Mount Payment Element
Initialize XPay, customize the payment fields, and mount the payment element into your form container.
JavaScript
const xpay = new Xpay(
"publishable_key",
"account_id",
"hmac_secret"
);
const options = {
override:true,
fields: {
creditCard: {
placeholder:"1234 1234 1234 1234",
label:"Enter your credit card",
},
exp: {
placeholder:"Exp. Date",
},
},
style: {
".input": {},
".invalid": {},
".label": {},
".input:focus": {
"border-color":"blue",
"box-shadow":"none",
},
":hover": {},
"::placeholder": {},
"::selection": {},
},
};
// Mount payment element into DOM
const app= xpay.element("#form",options);
const submit = async (e) => {
e.preventDefault();
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);
await showMessage(message);
} catch (e) {
setLoading(false);
showMessage(e.message);
}
};
document.querySelector("#payment-form").addEventListener("submit", submit);Form Validation Error Handling
We have an event named ready which will return true if all fields have been filled by user and form is ready to be submitted.
It will ensure that the website only enables the payment button if all required data has been added to the iframe form.
JavaScript
// React
<PaymentElement options={options} onReady={(event) => {
console.log("ready event", event);
}} />
// Veniala Js
xpay.on("ready", function (event) {
console.log(event, "onready");
});XPay SDK Styling
XPay SDK styling, payment labels, and placeholders can be modified as per the website's UI/UX.
For styling, CSS styling needs to be passed in different input state objects, as mentioned below.
What does each input state refer to?
XStakCommerce/xpay-element-public-demo
GitHub repository
https://github.com/XStakCommerce/xpay-element-public-demo/tree/stage