1.0.0 • Published 3 years ago
react-native-simple-stripe v1.0.0
React Native / Expo Stripe Checkout Component
easy components making collecting payment super easy using bare react native or expo all you need is stripe public key and function that will handel the token once generated like making a request to your server where it will make a charge also you can pass a card color and text for the button
Installation
installing by npm
npm install react-native-simple-stripe
Requirements
token and stripeKey are the only required props
import React from 'react'
import {View, Text} from 'react-native'
import StripeCheckout from 'react-native-simple-stripe'
export default function App () {
const publicKey = "pk_sakdasokwkdawjdaasd"
const [viewToken, setViewToken] = React.useState()
const func = (token)=>{
setViewToken(token)
//call api or anything with token
}
return (
<View style={{flex: 1, alignItems: 'center', justifyContent: 'center', marginHorizontal:30 }} >
<Text>
{JSON.stringify(viewToken)}
</Text>
<StripeCheckoutReactNative token={(token)=>{func(token)}} stripeKey={publicKey}/>
</View>
);
}
Other props
other props are cardColor, buttonText
<StripeCheckoutReactNative token={(token)=>{func(token)}} stripeKey={pkey} buttonText={"Pay $500"} cardColor={#d11717}/>
more props will be added in next releses
how to use stripe and the token in general
once the token has been generated you pass it to your backend such in node you can create charges by requiring stripe and initializing it with the secret key
const stipeCharge = require('stripe')('sk_test_ajdkajdpokawdokafjsklfjejpow' );
app.post("/stripe", async (req, res)=>{
const token = req.body.tocken
const amount = 20
const charge = await stipeCharge.charges.create({
amount: amount*100,
currency: 'usd',
source: token.id,
description: 'react native stripe checkout',
});
res.send(charge.status)
})
for more information visit stripe website
Built by
Ahmed Gameel at jeem
1.0.0
3 years ago