Require 3D Secure authentication when charging a saved card token. A successful flow charges the PaymentIntent and updates the token with the new authenticated gateway session.
Before you begin
You need an existing XPay card token and a working standard payment integration. Create PaymentIntents on the merchant backend and keep API authentication credentials out of the client application.
Create the PaymentIntent
Add the saved token ID to the standard Create a PaymentIntent request:
{
"token": "{{token_id}}"
}This shortened example shows only the field added for the saved-card flow. Include the other required fields documented in the Create Payment Intent API.
Return pi_client_secret and encryptionKey to the client application after creating the PaymentIntent.
Collect CVC and complete 3DS
Use the saved-card 3DS element for the selected client platform. The element collects the CVC for the saved card and presents customer authentication when required.
Web SDK v5
Use the current XPay Web SDK v5 setup, then render token_3ds through PaymentElement:
<PaymentElement
options={{
paymentMethods: ["token_3ds"]
}}
/>Confirm the PaymentIntent with the Web SDK v5 options-object signature:
await xpay.confirmPayment({
paymentMethodType: "card",
clientSecret: paymentIntent.pi_client_secret,
customer: { name: "Ayesha Khan" },
encryptionKey: paymentIntent.encryptionKey
});React Native
Use the package and provider configuration from the current XPay React Native SDK guide. Import and render Token3dsPaymentElement inside XPayProvider:
import {
Token3dsPaymentElement,
XPayProvider
} from "@xstak/xpay-element-react-native";
<XPayProvider
xpay={{
publishableKey: "{{publishable_key}}",
accountId: "{{account_id}}"
}}
>
<Token3dsPaymentElement
onReady={(data) => setCanPay(data.complete)}
/>
</XPayProvider>Confirm through the token element:
const { message, error } = await Token3dsPaymentElement.confirmPayment(
paymentIntent.pi_client_secret
);Flutter
Use the HMAC-free controller configuration from the current XPay Flutter SDK guide, then render XPayToken3DSElementWidget:
XPayToken3DSElementWidget(
controller: controller,
onReady: (bool isReady) {
setState(() => canPay = isReady);
},
)Confirm through the same controller:
final paymentResponse = await controller.confirmPayment(
clientSecret: paymentIntent.piClientSecret,
encryptionKeys: paymentIntent.encryptionKeys,
);Verify the result
Use the SDK result to update the customer interface and the verified PAYMENT_INTENT_NOTIFICATION to reconcile the payment on the merchant backend.
After a successful charge, retrieve the token details and inspect its gateway array to verify the authenticated gateway session. Use the Get all saved tokens and payment methods API for the retrieval schema.
If authentication fails or the customer abandons it, XPay doesn't change the token. Creating or updating the token requires a successful transaction.