💰 React Native implementation for Stripe.js Checkout.
MIT License
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.
{
sessionId: string,
successUrl: string,
cancelUrl: string,
// common
customerEmail?: string,
billingAddressCollection?: 'required' | 'auto',
shippingAddressCollection?: {
allowedCountries: Array<string>,
},
locale?: string,
}
| {
clientReferenceId: string,
successUrl: string,
cancelUrl: string,
items?: Array<{ plan: string, quantity: string }>,
lineItems?: Array<{ price: number, quantity: number }>,
mode?: 'payment' | 'subscription',
submitType?: string,
// common
customerEmail?: string,
billingAddressCollection?: 'required' | 'auto',
shippingAddressCollection?: {
allowedCountries: Array<string>,
},
locale?: string,
}
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'htmlContentHead
(String) - Html string to inject in head. - default: ''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.WKUserScript *script = [[WKUserScript alloc] initWithSource:html5HistoryAPIShimSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart
forMainFrameOnly:YES];
// [wkWebViewConfig.userContentController addUserScript:script]; // this line that inject "html5HistoryAPIShimSource" on start
Pull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.