Integration Process

Begin by making a create subscription POST request to xPay’s API from the Merchant Server, which returns an fwdUrl for initiating the subscription process. See Create Subscription API for details.

Once the subscription intent is created, the xPay Server responds with a subscriptionId. This identifier is crucial for tracking the status of the subscription.

The Merchant Server should pass the fwdUrl along with the subscription details to the Merchant Frontend, preparing it to manage user interactions related to the subscription.

Use the fwdUrl to redirect users to xPay’s checkout page to complete the subscription.

const redirectToSubscriptionCheckout = () => {
    const url = new URL(fwdUrl); // fwdUrl received from your server after creating a subscription intent
    window.open(url.href).focus();
};

• Create a client-side page to handle the redirect and display the subscription status.
• After the process, users will be redirected to the callbackUrl with the query parameter subscription_id.
• The Merchant Frontend contacts the Merchant Server, which invokes the Get Subscription GET request to fetch the status and metadata for the specified intent. See Get Subscription API for details.

const onSubscriptionPageLoad = async () => {
    const url = new URL(window.location.href);
    const subscriptionId = url.searchParams.get("subscription_id");

    const subscriptionIntent = await getSubscriptionIntentStatus(subscriptionId, metadata); // From the Merchant Server
    if(subscriptionIntent.status === "ACTIVE") {
        // redirect to your subscription success page
    } else {
        // redirect to your subscription failure page
    }
};