How to collect Stripe Payment in react native app

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: '[e-mail]',
    };

    // 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

Comments

[Charly Escalona]

Hi!

Where can I find the url_scheme?

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