Choose a payment method supported by the customer's platform, configure its gateway credentials in XPay, and use the method's API and SDK values in the correct places.
Platform support
All browser-based integrations, including Vanilla JavaScript, React, and Next.js, use the XPay Web SDK.
JazzCash buy now, pay later uses a server-to-server wallet-session and redirect flow rather than an embedded SDK element.
Configure the payment provider
Complete the applicable provider requirements in the XPay Go-Live Guide. Obtain the test or production credentials from the bank or payment service provider, then add them to the applicable gateway on the Gateways screen in the XPay portal.
The gateway, SDK artifact, API credentials, and payment-provider credentials must belong to the same environment.
PaymentIntent method values
Use payment_method_types in the PaymentIntent request. Preserve the exact value and capitalization shown below.
These API values aren't interchangeable with the Web SDK's paymentMethods option. For example, EasyPaisa uses easypaisa-wallet in a PaymentIntent and easypaisa when selecting the Web element.
Use the Create Payment Intent API for the complete request schema.
SDK confirmation request and result
The element changes with the platform and payment method, but the confirmation result doesn't change when XPay routes the payment through a different gateway.
Use the synchronous result to update the customer interface. The merchant backend must use the same verified PAYMENT_INTENT_NOTIFICATION flow for every payment method and gateway before fulfillment.
Integration sequence
- Configure the gateway and enable the payment method for the merchant account.
- Create a PaymentIntent with the method's exact
payment_method_typesvalue. - Render the applicable XPay element for the selected platform.
- Enable submission only when the element reports valid input.
- Call the platform's confirmation method.
- Reconcile the PaymentIntent through the verified webhook.
Next steps
- Collect payment details with XPay Element.
- Configure displayed methods in Web SDK v5.
- Test your integration.