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 Payment Result (Webhook + Redirect)

  • Once the checkout is completed, xPay will send a webhook to the Merchant Server with the final payment status:
    • intent.success for successful payments
    • intent.failed for failed payments
    • Both webhooks include the xIntentId and other relevant payment details.
  • Simultaneously, the customer will be redirected to your configured callbackUrl with the query parameter xpay_intent_id.
  • Your Merchant Frontend should display the final result based on the status already received via the webhook.
JavaScript
const onPageLoad = async () => {
    const url = new URL(window.location.href);
    const intentId = url.searchParams.get("xpay_intent_id");

    // At this point, your backend has already received the webhook.
    // You can show a confirmation page, or query your backend if needed.
    const status = await fetch(`/payment-status?xpay_intent_id=${intentId}`);
    
    if(status === "SUCCESS") {
        // redirect to your payment success page
    } else {
        // redirect to your payment failure page
    }
};
Always trust the webhook as the source of truth for payment status. The redirect is primarily for user experience.
By following this process, you can integrate xPay’s payment gateway into your website, ensuring reliable status tracking via webhooks and a seamless customer redirect flow.