This document is a guide on how to use Duffel Payments to collect payments from mobile applications developed using React Native.

The solution presented here should not be seen as a long term solution. Instead it should be seen as an interim solution, that Duffel will iterate on. If you are following this guide you should expect a migration from the solution here presented in the future.

Collect payment

Collecting a payment in a mobile app is very similar to the way a payment is collected from a web application. The main difference is in the way the card details are collected.

We recommend you follow the "Collecting Customer Card Payments" guide first and then come back to this guide once you reach the "Collect payment" section of that guide.

<aside> ⚠️ This guide uses APIs from Duffel's payments provider Stripe. These APIs do not provide a user experience consistent with the rest of the Duffel API. This is something that will be improved in future iterations of this solution.

</aside>

Now that you've reached the "Collect payment" section of the Duffel Payments guide, you should have a PaymentIntent resource created with all the details required to collect the payment in your backend.

The next step is to collect the payment, and instead of using Stripe.js in the frontend like the Duffel Payments guide suggests, this guide will use Stripe’s React Native SDK.

1. Prepare data required to use Stripe’s React Native SDK

The first step before using Stripe’s React Native SDK is to prepare the data required to use it. This will be done by transforming some of the information presented in the PaymentIntent resource. Below is an example in JavaScript of how this can be done. Contact us if you have trouble using this example.

// This value will be the `client_token` value in the PaymentIntent resource created
var duffelPaymentIntentClientToken = "";

function decodeClientToken(clientToken) {
  var decodedToken = atob(clientToken);
  var parsedToken = JSON.parse(decodedToken);
  return parsedToken;
};

var decodedClientToken = decodeClientToken(duffelPaymentIntentClientToken);

// These are two pieces of information required to use Stripe’s React Native SDK:
var clientSecret = decodedClientToken.client_secret
var publishableKey = decodedClientToken.publishable_key

var paymentIntentId = clientSecret.match(/(pi_[a-zA-Z0-9]{24})/g)[0]

2. Use Stripe’s React Native SDK

We recommend you follow this guide from Stripe. It will take you through the steps required to setup their React Native SDK to collect payments. While you follow this guide read the Duffel Payments specific notes for each step in it:

The publishable key required is also part of the decodedClientToken. See the code example above.
```
var publishableKey = decodedClientToken.publishable_key
```
This step of the guide should be skipped as it’s already done by Duffel
This step of the guide should be skipped as it’s already been done by you while following the "Collecting Customer Card Payments" guide
Ignore the ephemeralKey and the customer in the examples as they are not required
Nothing to note on this step
You won’t have access to webhooks so you have to rely the callback from the client
Nothing to note on this step