Accepting payments in React Native
Tags: php, reactnative, payments
Published: 2019-08-10 13:33:08

---
title: Accepting payments in React Native
published: true
description: In this tutorial you will learn how to accept payments in React Native with Stripe
tags: [php, react-native, payments]
canonical_url: https://pusher.com/tutorials/react-native-payments
---

An important aspect when creating an app or website is the ability to accept payments from its customers. Platforms such as the web, Android, and iOS already have well-supported APIs for payment gateways such as Stripe. But what about cross-platform frameworks like React Native? In this tutorial, we’ll be looking at how to accept payments within a React Native app.

## Prerequisites

Basic knowledge of React Native is required. Although we’ll be using a bit of PHP, it’s optional because the code will be self-explanatory.

### Development environment

You need to have PHP and MySQL installed on your machine. The easiest way to get the development environment is through [Laravel Homestead](https://laravel.com/docs/5.7/homestead). If you’re on Mac, you can get up and running even faster with [Laravel Valet](https://laravel.com/docs/5.7/valet).

You also need a MySQL database manager for creating the database:

- [DBeaver](https://dbeaver.io/) - Windows, Linux, Mac
- [Sequel Pro](https://www.sequelpro.com/) - Mac only

You also need to have an [ngrok account](https://ngrok.com/) for exposing the server to the internet.

### Developer accounts

We will be using [Stripe](https://stripe.com) to process payments, so a Stripe account is required.

Optionally, you will also need to have the following if you want to use Google Pay and Apple Pay in production:

- [Google Play developer console account](https://play.google.com/apps/publish/signup/#) - you can actually use the Tipsi-Stripe library without a developer account if you use the test environment. But if you want to use it in production, you’ll need to have a Google Play developer console account which can [accept payments](https://support.google.com/googleplay/android-developer/answer/7161426?hl=en).
- [Apple developer account](https://developer.apple.com/programs/enroll/) - you need this if you want to use Apple Pay with Tipsi-Stripe. At the time of writing this tutorial, there are only a handful of countries in which [Sandbox testing](https://developer.apple.com/apple-pay/sandbox-testing/) for Apple Pay is supported. This means you’ll have to use real credit cards for testing if you’re not living in one of those countries. As this tutorial won’t be covering how to set up Apple Pay on your developer account, be sure to read the [Getting Started with Apple Pay](https://developer.apple.com/apple-pay/get-started/) guide.

### Package versions

The following package versions are used in the app:

- React Native 0.57.8
- Tipsi-stripe 6.1.2

While the following are used in the backend:

- Lumen framework 5.7
- Stripe PHP 6.28

To ensure compatibility, start with the versions above before upgrading to the latest versions.

## App overview

We’ll create a simple app which displays a product to be bought. The user can then pay for it with the credit card they have added to their Google Account. We will use Google Pay as a means for accepting the payment, and Stripe for processing it. If you’ve previously worked with Stripe for the web, the process is pretty much the same. Tipsi-Stripe provides a way to use either Google Pay, Apple Pay, or its custom React component for accepting the payment details. You will then use any of these methods to generate the token which you will submit to the app’s backend. This token allows you to charge the card added by the user.

Here’s what the app will look like:

![RNPay app](https://d2mxuefqeaa7sj.cloudfront.net/s_3CA98940AF9B4793A825164CAE759A509E56FF1ED72859549595992CDE8126B2_1546998663103_pay-app.jpeg)

You can find the source code on this [GitHub repo](https://github.com/anchetaWern/RNPay).

## Building the app

Start by creating a new React Native project and installing the dependencies:

```
react-native init RNPay
cd RNPay
yarn add tipsi-stripe react-native-config axios
react-native link
```

Once that’s done, add the config for enabling the Google Wallet API in the `android/app/src/main/AndroidManifest.xml` file. This allows you to use Google Pay within the app:

```
<application>
  <meta-data
    android:name="com.google.android.gms.wallet.api.enabled"
    android:value="true" />
</application>
```

Next, update the `android/app/build.gradle` file and add the path to React Native Config:

```
apply from: project(':react-native-config').projectDir.getPath() + "/dotenv.gradle"
```

For iOS, please refer to the documentation:

- [Installation](https://tipsi.github.io/tipsi-stripe/docs/installation.html)
- [Linking](https://tipsi.github.io/tipsi-stripe/docs/linking.html)
- [Running Apple Pay in a real device](https://tipsi.github.io/tipsi-stripe/docs/running-apple-pay-in-a-real-device.html)

Next, create a `.env` file at the root of the project directory and add your Stripe publishable key. If you’re testing, this can be the test credentials provided by Stripe. You can find your [API keys here](https://dashboard.stripe.com/account/apikeys). Be sure to toggle **Viewing Test Data** if you want your test credentials:

```
STRIPE_PUBLISHABLE_KEY=YOUR_STRIPE_PUBLISHABLE_KEY
```

Once that’s done, you’re now ready to work on the code. Start by opening the `App.js` file and add the following:

```
import React, { Component } from 'react';
import { View, Alert } from 'react-native';

import stripe from 'tipsi-stripe';
import Config from 'react-native-config';

import ItemBox from './src/components/ItemBox';
import pay from './src/helpers/pay';

stripe.setOptions({
  publishableKey: Config.STRIPE_PUBLISHABLE_KEY,
  androidPayMode: 'test', // test || production
});
```

The most important part in the above code is the setting of the options for Stripe. The `publishableKey` is basically the same key as the one you put on your JavaScript files when working on the web. `androidPayMode` is the mode to be used by Google Pay. `test` means that the requirements for using it won’t be as tight as when you’re on production. For example, the app doesn’t need to be uploaded in the Google Play Store. Your Google Play console developer account also don’t need to have Google Pay enabled. In fact, you don’t even need a developer account in order to try it out. You can find more info about it [here](https://developers.google.com/android/reference/com/google/android/gms/wallet/WalletConstants.html#ENVIRONMENT_TEST).

Next, initialize the data to be used throughout the app. This includes the user’s access token which is used for authenticating the user’s request when we hit the endpoint for creating a charge. To simplify things we’re simply going to hardcode an existing access token that’s already in the database. I’ll show you how to create the database later on when we get to the backend:

```
export default class App extends Component {

  constructor(props) {
    super(props);
    this.access_token = "AN EXISTING USER'S ACCESS TOKEN FROM YOUR DB";
    this.currency_code = 'USD'; // the currency to be used for processing the transaction
    // item data
    this.item = {
      title: 'Loop 720',
      price: 1,
      image: require('./src/images/loop720.jpg')
    };
  }

  state = {
    isPaying: false, // whether the user is currently paying for something
    canPay: false // whether the user's device has the ability to pay using Google Pay
  }

  // next: add componentDidMount
}

const styles = {
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFF',
  }
};
```

Next, we check if the user’s device can make payments with Google Pay:

```
async componentDidMount() {
  const device_supported = await stripe.deviceSupportsAndroidPay();
  const can_make_android_pay_payments = await stripe.canMakeAndroidPayPayments();

  if (device_supported && can_make_android_pay_payments) {
    this.setState({
      canPay: true
    });
  }
}
```

For the app’s UI we’re simply going to render a single item:

```
render() {
  return (
    <View style={styles.container}>
      <ItemBox
        {...this.item}
        canPay={this.state.canPay}
        isPaying={this.state.isPaying}
        payAction={this.payItem} />
    </View>
  );
}
```

Here’s the code for the ItemBox component:

```
// src/components/ItemBox.js
import React, { Component } from 'react';
import { View, Text, Button, ActivityIndicator, Image } from 'react-native';

const ItemBox = ({ title, price, image, canPay, isPaying, payAction }) => {

  return (
    <View>
      <Image
        style={styles.image}
        source={image} />

      <View style={styles.textContainer}>
        <Text style={styles.title}>{title}</Text>
      </View>

      <View style={styles.textContainer}>
        <Text style={styles.price}>${price.toFixed(2)}</Text>
      </View>

      {
        isPaying &&
        <ActivityIndicator size="large" color="#0000ff" />
      }

      <View style={styles.buttonContainer}>
      {
        canPay && !isPaying &&
        <Button
          onPress={payAction}
          title="Buy Now"
          color="#841584"
        />
      }

      {
        !canPay &&
        <View style={styles.alertContainer}>
          <Text style={styles.errorText}>Can't accept payments</Text>
        </View>
      }
      </View>

    </View>
  );

}

export default ItemBox;

const styles = {
  image: {
    width: 170,
    height: 150
  },
  textContainer: {
    alignItems: 'center'
  },
  title: {
    fontSize: 20
  },
  price: {
    fontSize: 23,
    fontWeight: 'bold'
  },
  buttonContainer: {
    margin: 10
  },
  alertContainer: {
    width: 150
  },
  errorText: {
    color: 'red'
  }
};
```

Back to the `App.js` file, add the function for paying for the item. This gets executed when the **Buy Now** button from the ItemBox component is clicked:

```
// App.js
payItem = async () => {

  this.setState({
    isPaying: true // show loader instead of the button
  });

  const token = await stripe.paymentRequestWithNativePay({
    total_price: this.item.price.toFixed(2),
    currency_code: this.currency_code,
    line_items: [
      {
        currency_code: this.currency_code,
        description: this.item.title,
        total_price: this.item.price.toFixed(2),
        unit_price: this.item.price.toFixed(2),
        quantity: '1',
      }
    ]
  });

  // next: add code for committing the charge into the server
}
```

If you want to capture shipping information, you need to set the `shipping_address_required` option and set its value to `true`. Optionally, you can also set the `shipping_countries` to an array of country codes to limit the countries you want to ship to:

```
shipping_countries: ['US', 'PH', 'SG']
```

Here’s what the value of `token` looks like when the request is successful:

```
{  
   "card":{  
      "currency":null,
      "fingerprint":"xxxxxxxxxx",
      "funding":"credit",
      "addressZip":null,
      "brand":"MasterCard",
      "cardId":"card_xxxxxxxxxxx",
      "number":null,
      "addressState":null,
      "country":"US",
      "cvc":null,
      "expMonth":7,
      "addressLine1":null,
      "expYear":3040,
      "addressCountry":null,
      "name":"Wern Ancheta",
      "last4":"11xx",
      "addressLine2":null,
      "addressCity":null
   },
   "created":1546997773000,
   "used":false,
   "extra":{  
      "shippingContact":{  
         "postalCode":"2500",
         "name":"Wern Ancheta",
         "locality":"San Juan",
         "countryCode":"PH",
         "administrativeArea":"La Union",
         "address1":"Forest street"
      },
      "billingContact":{  

      }
   },
   "livemode":false,
   "tokenId":"tok_xxxxxxxx"
}
```

For more examples, please refer to the [example folder](https://github.com/tipsi/tipsi-stripe/tree/master/example/src/scenes) in Tipsi-Stripe’s GitHub repo. And for more info on how to use them, check out the following:

- [paymentRequestWithNativePay (Android)](https://tipsi.github.io/tipsi-stripe/docs/paymentrequestwithandroidpay.html) - uses Android Pay for accepting payments.
- [paymentRequestWithNativePay (iOS)](https://tipsi.github.io/tipsi-stripe/docs/paymentrequestwithapplepayitemsoptions.html) - uses Apple Pay for accepting payments.
- [paymentRequestWithCardForm](https://tipsi.github.io/tipsi-stripe/docs/paymentrequestwithcardform.html) - a ready-made React form for accepting payments.
- [PaymentCardTextField](https://tipsi.github.io/tipsi-stripe/docs/paymentcardtextfield.html) - use this if you want full control over the styling of the card field.

Do note that if you plan on using the `paymentRequestWithNativePay` method, you have to first [determine the platform](https://facebook.github.io/react-native/docs/platform-specific-code) the app is running on because the options you need to pass to the method will differ based on the platform. This is one advantage of the `paymentRequestWithCardForm` because of its platform-agnostic API.

Next, send the request for creating a charge to the server:

```
const response = await pay(this.item.price, this.item.title, this.access_token, token.tokenId);
if (response) {
  Alert.alert("Done!", "Payment successful");
} else {
  Alert.alert("Error occurred", "Something went wrong while processing payment. Please try again.");
}

this.setState({
  isPaying: false // show the Buy Now button again
});
```

Next, create a `src/helpers/pay.js` file and add the following. This sends a `POST` request to the server which includes the relevant details for the payment transaction:

```
import axios from 'axios';

const endpoint = 'https://YOUR_NGROK_URL/charge';

const pay = async (amount, description, access_token, token_id) => {
  const data = {
    'amount': amount,
    'description': description,
    'access_token': access_token,
    'token_id': token_id // the token generated by Stripe
  };

  const headers = {
    'Content-Type': 'application/json',
  };

  let response = false;
  try {
    let response_data = await axios.post(endpoint, data, { headers });
    return true;
  } catch (e) {
    console.log('server error: ', e);
  }

  return response;
}

export default pay;
```

In the above code, we’re only sending four pieces of data to the server. But you can actually send more if you like. Note that you can actually fetch the same data returned by `stripe.paymentRequestWithNativePay` method call in the server by making a request to the Stripe API. This means you don’t actually need to submit things like the shipping address or the customer’s name in your request. So most likely, the additional data you submit here will be specific to your application.

## Add the backend code

This part assumes that you’ve already set up your machine with either Laravel Homestead or Laravel Valet. This will give you the `composer` command which is used below to generate a new Lumen project:

```
composer create-project --prefer-dist laravel/lumen RNPayBackend
```

If you can’t run `composer` globally, be sure to move it to your local `bin` folder or add it to your `PATH`.

Next, navigate inside the generated `RNPayBackend` directory and add the database config:

```
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=rnpay
DB_USERNAME=your_username
DB_PASSWORD=your_password
```

The above config assumes that you have already created a database using a database manager of your choice. So be sure to create one with the same name as the value given to `DB_DATABASE`.

Also, add your Stripe secret key to the `.env` file:

```
STRIPE_SECRET_KEY=YOUR_STRIPE_SECRET_KEY
```

Next, create a new database migration file. These files allow you to write some code for updating the database structure:

```
php artisan make:migration create_users_table
```

Navigate inside the `database/migrations` directory and you will see the generated file. Add the following code to it:

```
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class CreateUsersTable extends Migration
{
    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->increments('id');
            $table->string('access_token'); // the user's access token
            $table->string('stripe_customer_id')->nullable();
            $table->timestamps(); // created_at and updated_at timestamp fields
        });
    }

    public function down()
    {
        Schema::dropIfExists('users');
    }
}
```

Migrate the database using the new file. This creates a `users` table with the fields you specified above:

```
php artisan migrate
```

Next, access the database using a MySQL database manager and add a dummy data in the `users` table. Leave the `stripe_customer_id` as blank and copy the `access_token` to the `App.js` file.

![users table](https://d2mxuefqeaa7sj.cloudfront.net/s_3CA98940AF9B4793A825164CAE759A509E56FF1ED72859549595992CDE8126B2_1547003164444_users-table.png)

Next, install the Stripe PHP library:

```
composer require stripe/stripe-php
```

While that’s doing its thing, update the `bootstrap/app.php` file and uncomment the following line. This enables us to use Facades. In simple terms, Facades are easy to remember class names which allow us to access underlying functionality such as logging or fetching data from the database:

```
$app->withFacades();
```

Next, add the route for processing payments to the `routes/web.php` file. This is the endpoint that we’re hitting in the app earlier. This uses a controller to process the request:

```
$router->post('/charge', 'PaymentController@createCharge');
```

Create the controller at `app/Http/Controllers/PaymentController.php` and add the following:

```
<?php

namespace App\Http\Controllers;
use DB; // for talking to the database
use Illuminate\Support\Facades\Log; // for logging
use Illuminate\Http\Request; // for getting request data

class PaymentController extends Controller
{

  public function __construct() {
    \Stripe\Stripe::setApiKey(getenv('STRIPE_SECRET_KEY'));
  }

  // next: add code for creating a charge
}
```

In the above code, we’ve added a `__construct` method. This sets the Stripe API key that we’re going to use. This gets executed everytime any of the methods in the `PaymentController` gets called.

Next, add the method for creating a charge. This gets executed every time a `POST` request is made to the `/charge` route. Here we pass the data which came from the app to Stripe’s API method for [creating a charge](https://stripe.com/docs/api/charges/create). If the charge is successful, we return the success response to the app:

```
public function createCharge(Request $request) {

  // get the data that was passed from the app  
  $amount = (int) $request->input('amount') * 100; // amount should be in cents
  $description = $request->input('description');
  $access_token = $request->input('access_token');
  $token = $request->input('token_id');

  // get the Stripe customer ID based on the access token
  $user = DB::table('users')
      ->where('access_token', $access_token)
      ->select('id', 'stripe_customer_id')
      ->first();

  // construct the data required by Stripe for creating a charge
  $payment = [
    'amount' => $amount,
    'currency' => 'usd',
    'description' => $description,
    'customer' => $user->stripe_customer_id
  ];

  if (empty($user->stripe_customer_id)) {
    // next: add code for creating a Stripe customer
  }

  try {
    $charge = \Stripe\Charge::create($payment);
    return ['status' => 'ok']; // if the charge was successful
  } catch (\Exception $e) {
    Log::info("Cannot create charge for Stripe customer: " . $user->id);
  }

  return ['status' => 'not_ok']; // if the charge wasn't successful
}
```

If there’s no Stripe customer ID associated with the user, it means that a Stripe customer hasn’t been created for the user yet. So to associate a customer with the provided payment info, we need to make a separate request to the Stripe API to [create a customer](https://stripe.com/docs/api/customers/create). This is a necessary step for associating a payment from a specific customer. Even though the Stripe API allows you to just pass the `$token_id` when creating a charge, it isn’t really recommended. Especially if you expect to receive payments from the same person in the future:

```
try {
  $customer = \Stripe\Customer::create([
    "source" => $token // the payment token received from the app
  ]);

  // update the user to include the Stripe customer ID
  DB::table('users')
    ->where('access_token', $access_token)
    ->update([
      'stripe_customer_id' => $customer->id
    ]);

  $payment['customer'] = $customer->id; // assign the ID of the newly created customer to the payment
} catch (\Exception $e) {
  Log::info("Cannot create Stripe customer for user: " . $user->id);
}
```

Lastly, expose the server to the internet using ngrok. If you use Laravel Valet, first you have to change the default top-level domain to be the same as the one we’re using:

```
valet domain test
```

Next, navigate to the root of `RNPayBackend` and execute `valet park`. This will register `rnpaybackend.test` on your local host which you can then expose it using ngrok:

```
ngrok http -host-header=rewrite rnpaybackend.test:80
```

If you used Laravel Homestead, you can log in to your Homestead machine via `vagrant ssh` and run `share rnpay.test`. This will use ngrok to expose the server.

Once that’s done, you can update the `src/helpers/pay.js` file in the app with the HTTPS URL from ngrok.

At this point, the app should be fully functional. Go ahead and run it:

```
react-native run-android
```

## Conclusion

That’s it! In this tutorial, you learned how to use the Tipsi-Stripe library and the Lumen PHP framework to accept payments within a React Native app.

You can find the full source code on this [GitHub repo](https://github.com/anchetaWern/RNPay).

*Originally published on the [Pusher Tutorial Hub](https://pusher.com/tutorials/react-native-payments)*