How to Perform 3DS Authentication for Token Payments (Saved Cards)

Merchants can enforce 3-D Secure (3DS) authentication for users who are making payments with a saved card (token).

Web SDk

For token 3DS payment, set the paymentMethods value to ["token_3ds"] when initializing the SDK.

Use Web SDK v4 version

json

Live: https://js.xstak.com/v4/xpay.js
Stage: https://js.xstak.com/v4/xpay-stage.js

By using this mode, the SDK will display only the CVC field for the saved card and automatically handle the 3DS authentication flow during payment confirmation.

javascript

const options = {
	    override: true,
	    paymentMethods: ["token_3ds"], // Force 3DS authentication for tokenized cards
	    fields: {
	      creditCard: {
	        placeholder: "4234 1234 1234 1234",
	        label: "Enter your credit card",
	      },
	      exp: {
	        placeholder: "Exp. Date",
	      },
	      cvc: {
	        placeholder: "CVC",
	      },
	    },
	    style: {
	      ".input": {
	        "border": "1px solid black",
	        "border-radius": "15px"
	       },
	      ".invalid": {},
	      ".label": {
	        "font-size": "18px"
	       },
	      ".input:focus":{},
	      ":focus": {},
	      ":hover": {},
	      "::placeholder": {},
	      "::selection": {},
	    },
    };

Enable your Pay button based on SDK ready event value.

Confirm the Payment

Call confirmPayment() when the user submits the form.

Pass the customer’s token, your client secret, and encryption key

javascript

const { error, message } = await xpay.confirmPayment(
  "card",                     // Payment method type
  "clientSecret",              // From your backend
  { token: "", name: "" },      // Saved card token. name is optional.
  "encryptionKey"              // Encryption key for secure transmission
);

The SDK will automatically perform the 3DS challenge and complete the payment if authentication succeeds. Use "token_3ds" only when you want to force 3DS for a tokenized payment.

React Native SDK

For token 3DS payment on react native sdk, follow these steps:

Import the Package

javascript

// for production
import { XPayProvider, Token3dsPaymentElement } from '@xstak/xpay-element-react-native';

// for stagging
import { XPayProvider, Token3dsPaymentElement} from '@xstak/xpay-element-react-native-stage';

Token 3DS Payment Integration

To enable token 3DS payments, wrap the Token3dsPaymentElement inside the XPayProvider. Use the required credentials from your XPay Dashboard, By this , the SDK will display only the CVC field for the saved card and automatically handle the 3DS authentication flow during payment confirmation.

javascript

<XPayProvider xpay={{ publishableKey: '', hmacSecret: '', accountId: '' }}>
  <Token3dsPaymentElement onReady={(data) => { setEnabled(data.complete); }} />
</XPayProvider>

Enable your Pay button based on SDK ready event value.

Confirm the Payment

Call confirmPayment() when the user submits the form.

Pass the customer’s token, your client secret

javascript

const confirmPayment = async () => {
  try {
    const customer = { token: '' };

    const { message, error } = await Token3dsPaymentElement.confirmPayment("client_secret_from_intent_api", customer);

    if (error) {
      // Handle payment failure
      console.log("Payment failed: ", message);
    } else {
      // Handle payment success
      console.log("Payment successful: ", message);
    }
  } catch (e) {
    // Handle unexpected exceptions
    console.log("Payment Error: ", e);
  }
};

The SDK will automatically perform the 3DS challenge and complete the payment if authentication succeeds.