React Native implementation for Stripe.js Checkout.
The library allows you to use Stripe.js Checkout with react-native without ejecting. You can use it with both server-side implementations and client-side implementations. Simply ensure you follow the url structure guidelines below.
Ensure you’ve completed the setps in prequisites.
Install package via npm or yarn:
npm install --save react-native-stripe-checkout-webview
OR yarn add react-native-stripe-checkout-webview
import StripeCheckout from 'react-native-stripe-checkout-webview';
import StripeCheckout from 'react-native-stripe-checkout-webview';
type Props = { STRIPE_PUBLIC_KEY: string, CHECKOUT_SESSION_ID: string };
const MyStripeCheckout = ({ STRIPE_PUBLIC_KEY, CHECKOUT_SESSION_ID }: Props) => (
<StripeCheckout
stripePublicKey={STRIPE_PUBLIC_KEY}
checkoutSessionInput={{
sessionId: CHECKOUT_SESSION_ID,
}}
onSuccess={({ checkoutSessionId }) => {
console.log(`Stripe checkout session succeeded. session id: ${checkoutSessionId}.`);
}}
onCancel={() => {
console.log(`Stripe checkout session cancelled.`);
}}
/>
);
export default MyStripeCheckout;
?sc_checkout=success&sc_sid={CHECKOUT_SESSION_ID}
?sc_checkout=cancel
urlJoin(mySuccessUrl, '?sc_checkout=success&sc_sid={CHECKOUT_SESSION_ID}')
.stripePublicKey
(String) - Stripe public key of your project.checkoutSessionInput
(Object) - Object to be passed to Stripe’s redirectToCheckout
function. Docs.onSuccess
(?Function) - Called upon success of the checkout session with { ...props, checkoutSessionId: 'CHECKOUT_SESSION_ID' }
onCancel
(?Function) - Called upon success of the checkout session with { ...props }
onLoadingComplete
(?Function) - Called when the Stripe checkout session webpage loads successfully.options
(?Object) - custom options to display content in the webview
htmlContentLoading
(String) - Html string to display a loading indication. - default: <h1 id="sc-loading">Loading...</h1>
- note: The loading item is set on the element with id=‘sc-loading’htmlContentError
(String) - Html string to display stripe errors. - default: <div id="sc-error-message"></div>
- note: The error is set on the element with id=‘sc-error-message’webViewProps
(?Object) - WebView Component props, spread on the WebView Component.renderOnComplete
(?(props) => React$Node) - Optional rendering function returning a component to display upon checkout completion. note: You don’t need this if your onSuccess and onCancel functions navigate away from the component.Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.
Author: A-Tokyo
Demo: https://stripe.com/payments/checkout
Source Code: https://github.com/A-Tokyo/react-native-stripe-checkout-webview
#react-native #react #mobile-apps