Hi folks, today I want to share the procedure of payment integration in react native app through Stripe

Registration
Installation
Configuration
Card Component
Create a Payment Indent
Submit the Payment
Test Cards

Registration

First, you have to create your account on the Stripe dashboard.
Stripe dashboard in test mode will look like this.

Installation

For server-side installation, you can refer to this link
For the react-native side, run this command in terminal



yarn add @stripe/stripe-react-native

And to install the required native dependencies, run this command in the ios folder. Android doesn’t require any additional steps.



pod install

Configuration

Now wrap your <App/> in <StripeProvider> tag and pass your account publishable key to it. You can find this key in the Home tab on the Stripe dashboard.



import { StripeProvider } from '@stripe/stripe-react-native';

function App() {
  return (
    <StripeProvider
      publishableKey="pk_test_TYooMQauvdEDq54NiTphI7jx"
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
      merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay
    >
      // Your app code here
    </StripeProvider>
  );
}

Card Component

Stripe has multiple elements to choose from. I choose Card Element, it is a build-in UI component to securely collect card details.



import { CardField, useStripe } from '@stripe/stripe-react-native';

function PaymentScreen() {
  // ...
  return (
    <View>
      <CardField
        postalCodeEnabled={false}
        placeholder={{
          number: '4242 4242 4242 4242',
        }}
        onCardChange={(cardDetails) => {
          console.log('cardDetails', cardDetails);
        }}
      />
    </View>
  );
}

onCardChange the callback returns the non-sensitive information about the card. You can use this info to enable/disable the Checkout button or display an error message.

Create a Payment Indent

After this, we create a payment intent to collect payment from the user.
But to create a Payment Intent we need an API because the server-side is saved as opposed to the client. Please follow these steps to create a payment intent API.

Now we'll fetch the client secret from this API.



function PaymentScreen() {
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-payment-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        currency: 'usd',
      }),
    });
    const {clientSecret} = await response.json();
    return clientSecret;
  };

  const handlePayPress = async () => {
    if (!card) {
      return;
    }

    // Fetch the intent client secret from the backend.
    const clientSecret = await fetchPaymentIntentClientSecret();
  };

  return (
    <View>
      <CardField
        onCardChange={(cardDetails) => console.log('cardDetails', cardDetails)}
      />
      <Button onPress={handlePayPress} title="Pay" disabled={loading} />
    </View>
  );
}

Submit the Payment

Next, we'll send the client secret and user details to the confirmPayment method, which you can access with the useConfirmPayment hook.



const {confirmPayment, loading} = useConfirmPayment();
const handlePayPress = async () => {
    // Gather the customer's billing information (for example, email)
    const billingDetails: BillingDetails = {
      email: 'jenny.rosen@example.com',
    };

    // Fetch the intent client secret from the backend
    const clientSecret = await fetchPaymentIntentClientSecret();

    // Confirm the payment with the card details
    const {paymentIntent, error} = await confirmPayment(clientSecret, {
      type: 'Card',
      billingDetails,
    });

    if (error) {
      console.log('Payment confirmation error', error);
    } else if (paymentIntent) {
      console.log('Success from promise', paymentIntent);
    }
  };

After that, you can check the statuses of payments on the Stripe dashboard.

Test Cards

There is a list of test cards available of different brands to test your payments.

Thank you for reading!
Feel free to connect on Twitter

How to collect Stripe Payment in react native app