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
Top comments (1)
Hi!
Where can I find the url_scheme?