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 theStripe dashboard.
Stripe dashboard in test mode will look like this.
Installation
For server-side installation, you can refer to thislink
For the react-native side, run this command in terminal
yarnadd@stripe/stripe-react-nativeAnd to install the required native dependencies, run this command in theios folder. Android doesn’t require any additional steps.
podinstallConfiguration
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';functionApp(){return(<StripeProviderpublishableKey="pk_test_TYooMQauvdEDq54NiTphI7jx"urlScheme="your-url-scheme"// required for 3D Secure and bank redirectsmerchantIdentifier="merchant.com.{{YOUR_APP_NAME}}"// required for Apple Pay>// Your app code here</StripeProvider>);}Card Component
Stripe has multipleelements to choose from. I chooseCard Element, it is a build-in UI component to securely collect card details.
import{CardField,useStripe}from'@stripe/stripe-react-native';functionPaymentScreen(){// ...return(<View><CardFieldpostalCodeEnabled={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 theCheckout 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 thesesteps to create a payment intent API.
Now we'll fetch theclient secret from this API.
functionPaymentScreen(){constfetchPaymentIntentClientSecret=async()=>{constresponse=awaitfetch(`${API_URL}/create-payment-intent`,{method:'POST',headers:{'Content-Type':'application/json',},body:JSON.stringify({currency:'usd',}),});const{clientSecret}=awaitresponse.json();returnclientSecret;};consthandlePayPress=async()=>{if(!card){return;}// Fetch the intent client secret from the backend.constclientSecret=awaitfetchPaymentIntentClientSecret();};return(<View><CardFieldonCardChange={(cardDetails)=>console.log('cardDetails',cardDetails)}/><ButtononPress={handlePayPress}title="Pay"disabled={loading}/></View>);}Submit the Payment
Next, we'll send theclient secret and user details to theconfirmPayment method, which you can access with theuseConfirmPayment hook.
const{confirmPayment,loading}=useConfirmPayment();consthandlePayPress=async()=>{// Gather the customer's billing information (for example, email)constbillingDetails:BillingDetails={email:'jenny.rosen@example.com',};// Fetch the intent client secret from the backendconstclientSecret=awaitfetchPaymentIntentClientSecret();// Confirm the payment with the card detailsconst{paymentIntent,error}=awaitconfirmPayment(clientSecret,{type:'Card',billingDetails,});if(error){console.log('Payment confirmation error',error);}elseif(paymentIntent){console.log('Success from promise',paymentIntent);}};After that, you can check the statuses of payments on the Stripe dashboard.
Test Cards
There is alist of test cards available of different brands to test your payments.
Thank you for reading!
Feel free to connect onTwitter
Top comments(1)
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 >For further actions, you may consider blocking this person and/orreporting abuse
