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. 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:
- DBeaver - Windows, Linux, Mac
- Sequel Pro - Mac only
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:
<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:
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:
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.
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 in Tipsi-Stripe’s GitHub repo. And for more info on how to use them, check out the following:
- paymentRequestWithNativePay (Android) - uses Android Pay for accepting payments.
- paymentRequestWithNativePay (iOS) - uses Apple Pay for accepting payments.
- paymentRequestWithCardForm - a ready-made React form for accepting payments.
- PaymentCardTextField - 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 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.
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. 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. 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.
Originally published on the Pusher Tutorial Hub
Top comments (0)