Accepting payments in React Native

Accepting payments in React Native

In this tutorial, we’ll be looking at how to accept payments within a React Native app.

In this tutorial, we’ll be looking at how to accept payments within a React Native app.

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?


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. If you’re on Mac, you can get up and running even faster with Laravel Valet.

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

You also need to have an ngrok account for exposing the server to the internet.

Developer accounts

We will be using Stripe 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 - 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.
  • Apple developer account - 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 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 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:

You can find the source code on this GitHub repo.

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:

        android:value="true" />

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:

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. Be sure to toggle Viewing Test Data if you want your test credentials:


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';

      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.

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) {
        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) {
          canPay: true

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

    render() {
      return (
        <View style={styles.container}>
            payAction={this.payItem} />

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 (
            source={image} />

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

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

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

          <View style={styles.buttonContainer}>
            canPay && !isPaying &&
              title="Buy Now"

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



    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 () => {

        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:

          "name":"Wern Ancheta",
             "name":"Wern Ancheta",
             "locality":"San Juan",
             "administrativeArea":"La Union",
             "address1":"Forest street"


For more examples, please refer to the example folder in Tipsi-Stripe’s GitHub repo. And for more info on how to use them, check out the following:

Do note that if you plan on using the paymentRequestWithNativePay method, you have to first determine the platform 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.");

      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, 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:


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:


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:

    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->string('access_token'); // the user's access token
                $table->timestamps(); // created_at and updated_at timestamp fields

        public function down()

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.

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:


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', '[email protected]');

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


    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() {

      // 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. 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')

      // 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. 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
        ->where('access_token', $access_token)
          '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


In this tutorial, we 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.

javascript reactjs react-native laravel php ios

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

Hire Dedicated React Native Developer

Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

React Native Map components for iOS + Android

React Native Map components for iOS + Android.Contribute to react-native-community/react-native-maps development by creating an account on GitHub

Build a simple React Native Pokemon app with React-Navigation

As we start learning new technologies we want to start building something or work on a simple project to get a better understanding of the technology.