Architecture LightArchitecture Dark

How to accept payments?

1

Initiate Payment Intent (Merchant Server → xPay Server)

Start the transaction by making a create-intent POST request to xPay’s API from the Merchant Server, which returns an fwdUrl in the response. See create-intent API for details.
The callbackUrl string in the create-intent request should be configured to your client-side page responsible for managing the redirect from xPay checkout following a payment attempt.
2

Receive Payment Intent Confirmation (xPay Server → Merchant Server)

Once the payment intent is created, the xPay Server will respond with an xIntentId, which is used to track the payment status throughout the transaction.
The Merchant Server should log or store this identifier for future reference.
3

Forward Intent data to Merchant Frontend (Merchant Server → Merchant Frontend)

The Merchant Server forwards the intent data with fwdUrl to the Merchant Frontend, enabling it to manage user interactions related to the payment.
Ensure the frontend is ready to handle the payment initiation process.
4

Redirect to xPay Checkout (Merchant Frontend → xPay Client)

Redirect the user to xPay’s checkout page to initiate the payment using the fwdUrl.
JavaScript
const redirectToCheckout = () => {
    const url = new URL(fwdUrl); // fwdUrl received from your server after creating an intent
    window.open(url.href).focus();
};
5

Handle a Redirect on the callbackUrl (xPay Client → Merchant Frontend)

  • Build a client-side page to receive the redirect and show the payment status.
  • After the payment process, customers will be redirected to the callbackUrl with the query parameter xpay_intent_id.
  • The Merchant Frontend contacts the Merchant Server, which invokes the get-intent GET request to retrieve the status and other metadata for the specified intent. See get-intent API for details.
JavaScript
const onPageLoad = async () => {
    const url = new URL(window.location.href);
    const intentId = url.searchParams.get("xpay_intent_id");

    const intent = await getIntentStatus(intentId, metadata); // From the Merchant Server
    if(intent.status === "SUCCESS") {
        // redirect to your payment success page
    } else {
        // redirect to your payment failure page
    }
};
By following this process, you can easily integrate xPay’s payment gateway into your website, ensuring a secure and streamlined transaction flow.