3D Secure Payments


3D Secure Payments

📖
Contact your Primer representative to enable 3DS on your Primer account and grant access to the Primer 3DS libraries. Once your account is set up you should have access to the Primer 3DS library.

Integrate 3D Secure into your checkout

Step 1. Install the SDK

⚠️

This SDK requires React Native v0.63 or higher.

Add the SDK package with yarn or npm:

12345
# With yarnyarn add @primer-io/react-native # With npmnpm i @primer-io/react-native --save
bash
copy

Check out the troubleshooting section if you experience problems building the app.

For specific versions of the SDK, please refer to the changelog.

Step 2. Create a client session

Once the SDK is added, create a client session (generated on your backend with a Primer API key) and store the returned clientToken string parameter.

⭐️

Provide any order/customer details when creating the client session. For more info on what information can be passed in, please refer to the example above and the Client Session API.

12
// Ask your backend to create a client sessionconst clientToken = await createClientSession()
javascript
copy

Step 3. Configure payment callback

The SDK emits a payment method token that you should use to create a payment with Primer's Payment API. To handle this, define the onTokenizeSuccess callback like below:

1234567891011121314151617
import { Primer } from '@primer-io/react-native' const onTokenizeSuccess = async (req, res) => {    try {        const payment = await createPayment({ paymentMethod: req.token })        // resume SDK in case of required action, e.g. "3DS_AUTHENTICATION"        if (payment.requiredAction) {            setPaymentId(payment.id) // store the payment id.            // resume the SDK with the payment's client token.            res.handleNewClientToken(payment.requiredAction.clientToken)        } else {            res.handleSuccess() // show success screen.        }    } catch (e) {        res.resumeWithError(errorMessage)    }}
javascript
copy

Step 4. Configure resume callback

Next you should configure the onResumeSuccess callback. This is for scenarios where a create payment request results in a required action (see code snippet above) and the payment is expected to be resumed later on.

123456789101112
const onResumeSuccess = async (req, res) => {    try {        const payment = await resumeSession({ paymentId, resumeToken: req })        if (payment.status in ['FAILED', 'DECLINED', 'CANCELLED', 'PENDING']) {            res.handleError(errorMessage)        } else {            res.handleSuccess()        }    } catch (e) {        res.handleError(errorMessage)    }}
javascript
copy

Step 5. Show Universal Checkout

Finally, pass in the clientToken string and callbacks as arguments, and show the checkout.

12
// show Universal Checkout with above client token and config.Primer.showUniversalCheckout(clientToken, { onTokenizeSuccess, onResumeSuccess })
javascript
copy

And voilà, you're all set!