A react native component that shows integration of stripe (tipsi-stripe) consists of a dialog that shows up when a button is clicked.

ReactNativeStripeIntegration.js

import React from 'react'
import { View, Text, TouchableOpacity } from 'react-native'
import stripe from 'tipsi-stripe'

const YourCard = () => {
  
  // initialize stripe
  stripe.setOptions({
    publishableKey: 'pk_test_publishableUniqueKey'
  })
  
  // show the dialog to fill card details
  const stripeCardDialog = () => {
    return stripe.paymentRequestWithCardForm()
      .then((stripeTokenInfo) => {
         console.log("[SUCCESS] Stripe Token ID: ", stripeTokenInfo.id)  
         // do anything with the Stripe Token Info, like sending some data server 
      })
      .catch((error) => {
        console.log("[ERROR] User Cancelled the action")
        // show a toast with the error if needed
      })
  }

  // view which will trigger the dialog
  return (
    <View>
      <TouchableOpacity onPress={() => stripeCardDialog()}>
        <View>
          <Text>Add Card</Text>
        </View>
      </TouchableOpacity>
    </View>
  )
}

export default YourCard

Click here to go to the blog where this was used, better explanation of how to integrate stripe in android with React Native, also Java and Kotlin code included.

Took some time in the evening to write a blog about my struggle with @stripe adding card when the card method was deprecated.

For the community. Cheers!#stripe #android #reactnative #kotlin #java #payment #card #medium #blog

Here is the link to blog:https://t.co/jvRz8ThxZP

— Nishchal Raj (@thenishchalraj) April 25, 2021

Re-tweet on Twitter.

Share on LinkedIn.