React native Stripe payment

Introduction

React Native is a popular framework for building cross-platform mobile apps using JavaScript and React. Stripe is a well-known payment gateway that allows you to accept credit card payments online. Integrating Stripe with React Native allows you to add a seamless payment experience to your mobile app. In this tutorial, we will walk you through the steps to set up Stripe payment in a React Native app.

Prerequisites

Before you start, make sure you have the following:

1. React Native project set up: Create a new React Native project using npx react-native init ProjectName.
2. Stripe account set up: Sign up for a Stripe account and verify your account.
3. Stripe API keys: Go to your Stripe dashboard and obtain your API keys (API key and Secret key).
4. React Native version: Ensure your React Native version is compatible with the Stripe SDK (check the Stripe documentation for supported versions).

Step 1: Install Stripe React Native SDK

Open your React Native project and install the Stripe SDK using the following command:

npm install react-native-stripe-sdk

Step 2: Set up Stripe API Keys

Create a new file named stripe.config.js in your project's root directory and add the following code:

import { Stripe } from 'react-native-stripe-sdk';

const StripeConfig = {
  apiVersion: '2020-08-27',
  publishableKey: 'YOUR_STRIPE_PUBLISHABLE_KEY',
  secretKey: 'YOUR_STRIPE_SECRET_KEY',
};

export default StripeConfig;

Replace YOUR_STRIPE_PUBLISHABLE_KEY and YOUR_STRIPE_SECRET_KEY with your actual Stripe API keys.

Step 3: Import Stripe Library

In your React Native component, import the Stripe library:

import { Stripe } from 'react-native-stripe-sdk';

Step 4: Set up Payment Method

To accept payments, you need to set up a payment method. Stripe provides a few payment methods, including credit cards and bank accounts. For this tutorial, we will use the credit card payment method. Create a new file named PaymentMethod.js and add the following code:

import { Stripe } from 'react-native-stripe-sdk';

class PaymentMethod extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paymentMethod: null,
    };
  }

  handlePaymentMethodSelect = async (paymentMethod) => {
    this.setState({ paymentMethod });
  };

  render() {
    return (
      <View>
        <Text>Select Payment Method</Text>
        <Picker
          selectedValue={this.state.paymentMethod}
          onValueChange={(itemValue) => this.handlePaymentMethodSelect(itemValue)}
        >
          <Picker.Item label="Credit Card" value="credit_card" />
        </Picker>
      </View>
    );
  }
}

Step 5: Set up Payment Intent

A payment intent is a temporary token that represents the payment amount. Create a new file named PaymentIntent.js and add the following code:

import { Stripe } from 'react-native-stripe-sdk';

class PaymentIntent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paymentIntent: null,
    };
  }

  handleCreatePaymentIntent = async () => {
    const paymentIntent = await Stripe.createPaymentIntent({
      amount: 1000,
      currency: 'usd',
    });
    this.setState({ paymentIntent });
  };

  render() {
    return (
      <View>
        <Text>Create Payment Intent</Text>
        <Button title="Create Payment Intent" onPress={this.handleCreatePaymentIntent} />
      </View>
    );
  }
}

Step 6: Set up Payment Flow

Create a new file named PaymentFlow.js and add the following code:

import React, { useState } from 'react';
import { PaymentMethod, PaymentIntent } from './PaymentMethod';
import { Stripe } from 'react-native-stripe-sdk';

const PaymentFlow = () => {
  const [paymentMethod, setPaymentMethod] = useState(null);
  const [paymentIntent, setPaymentIntent] = useState(null);

  const handleCreatePaymentIntent = async () => {
    setPaymentIntent(await PaymentIntent.handleCreatePaymentIntent());
  };

  const handlePaymentMethodSelect = (paymentMethod) => {
    setPaymentMethod(paymentMethod);
  };

  const handleConfirmPayment = async () => {
    const { paymentIntent, paymentMethod } = this.state;
    const payment = await Stripe.confirmPayment(paymentIntent.id, {
      paymentMethod,
    });
    console.log(payment);
  };

  return (
    <View>
      <PaymentMethod onPaymentMethodSelect={handlePaymentMethodSelect} />
      <PaymentIntent onCreatePaymentIntent={handleCreatePaymentIntent} />
      <Button title="Confirm Payment" onPress={handleConfirmPayment} />
    </View>
  );
};

export default PaymentFlow;

Step 7: Run the App

Finally, run the app on a physical device or simulator using the following command:

npx react-native run-ios

or

npx react-native run-android

The app will launch, and you can select a payment method, create a payment intent, and confirm the payment.

That's it! You have successfully set up Stripe payment in your React Native app.

Remember to replace YOUR_STRIPE_PUBLISHABLE_KEY and YOUR_STRIPE_SECRET_KEY with your actual Stripe API keys.

I hope this tutorial helps you integrate Stripe payment in your React Native app.