React Native | 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:

1234567891011121314151617import { 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.

123456789101112const 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!