react-native-stripe-checkout
v0.0.15
Published
Cross Platform React Native component which mimics Stripe's iOS components. Supports selecting payment method and adding card manually or using the camera.
Downloads
7
Maintainers
Readme
react-native-stripe-checkout
React Native component which mimics Stripe's ios component.
For iOS and Android
Note: This plugin is dependent from react-native-awesome-card-io, which you have to install manually and link
Installation
$ npm i react-native-stripe-checkout --save
$ react-native link react-native-awesome-card-io
Usage
<SelectPayment
enableApplePay={true} // optional, default: false
applePayHandler={() => console.log('apple pay is go')} // optional, mandatory if enableApplePay={true}
paymentSources={[{}]} // mandatory, See: [Customer Object](https://stripe.com/docs/api/node#customer_object) -> sources -> data for exact format.
selectPaymentHandler={(paymentSource) => console.log(paymentSource)}
fontFamily="" // Optional, Default: iOS default
fontSize={16} // Optional, Default: iOS default
//more custom styles
/>
<AddCard
createCardHandler={(cardDetails) => console.log(cardDetails)}
invalidStyle={{borderColor: 'red'}} // Optional. Default: {borderColor: 'red'}
fontFamily="" // Optional, Default: iOS default
fontSize={16} // Optional, Default: iOS default
/>
Selecting a payment method
When the component is rendered it shows the user their existing cards.
No Nav. No card picture. Apple pay present if it exists. Simple Add button at bottom. Tapping a payment option, fires selectPaymentMethod
Adding a card
We provide support for the minimal number of fields:
- Card Number
- Expiry Month
- Expiry Year
- CVC
These fields are validated using https://github.com/jessepollak/payment.
Add button goes at the bottom. No nav. No card diagram.
Apple pay / Android Wallet
Neither are directly supported. We have a button, which can be enabled / disabled with enableApplePay
and a handler applePayHandler
which is called when it is pressed.
Notes
Create card fields: We care about mandatory ones only: https://stripe.com/docs/api#create_card_token cvc, number, exp_year, exp_year
Prop types to check types / mandatory fields