DEV Community

Cover image for How to collect Stripe Payment in react native app
Aneeqa Khan
Aneeqa Khan

Posted on

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

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

stripe dashboard

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
Enter fullscreen mode Exit fullscreen mode

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

pod install
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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.

card details

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
  };
Enter fullscreen mode Exit fullscreen mode

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

payment statuses

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

Discussion (0)