{"id":15649560,"url":"https://github.com/a-tokyo/react-native-stripe-checkout-webview","last_synced_at":"2025-04-04T18:05:11.579Z","repository":{"id":39237670,"uuid":"291853845","full_name":"a-tokyo/react-native-stripe-checkout-webview","owner":"a-tokyo","description":"💰 React Native implementation for Stripe.js Checkout.","archived":false,"fork":false,"pushed_at":"2025-02-10T03:34:46.000Z","size":836,"stargazers_count":75,"open_issues_count":11,"forks_count":19,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-28T17:09:10.959Z","etag":null,"topics":["apple-pay","checkout","expo","flow","online-payments","payments","react-native","react-native-expo","react-native-stripe","stripe","stripe-checkout","typescript"],"latest_commit_sha":null,"homepage":"https://stripe.com/payments/checkout","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/a-tokyo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-09-01T00:19:17.000Z","updated_at":"2025-03-17T16:36:03.000Z","dependencies_parsed_at":"2024-06-20T22:08:56.497Z","dependency_job_id":null,"html_url":"https://github.com/a-tokyo/react-native-stripe-checkout-webview","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-stripe-checkout-webview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-stripe-checkout-webview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-stripe-checkout-webview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/a-tokyo%2Freact-native-stripe-checkout-webview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/a-tokyo","download_url":"https://codeload.github.com/a-tokyo/react-native-stripe-checkout-webview/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247226213,"owners_count":20904465,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple-pay","checkout","expo","flow","online-payments","payments","react-native","react-native-expo","react-native-stripe","stripe","stripe-checkout","typescript"],"created_at":"2024-10-03T12:30:15.694Z","updated_at":"2025-04-04T18:05:11.545Z","avatar_url":"https://github.com/a-tokyo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Native Stripe Checkout\nReact Native implementation for [Stripe.js Checkout](https://stripe.com/payments/checkout).\n\n\u003ca href=\"https://npmjs.com/package/react-native-stripe-checkout-webview\"\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/react-native-stripe-checkout-webview.svg\"\u003e\u003c/img\u003e\n  \u003cimg src=\"https://img.shields.io/npm/dt/react-native-stripe-checkout-webview.svg\"\u003e\u003c/img\u003e\n\u003c/a\u003e\n\u003ca href=\"https://codecov.io/gh/A-Tokyo/react-native-stripe-checkout-webview\"\u003e\n  \u003cimg src=\"https://codecov.io/gh/A-Tokyo/react-native-stripe-checkout-webview/branch/main/graph/badge.svg\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/intent/follow?screen_name=ahmad_tokyo\"\u003e\u003cimg src=\"https://img.shields.io/twitter/follow/ahmad_tokyo.svg?label=Follow%20@ahmad_tokyo\" alt=\"Follow @ahmad_tokyo\"\u003e\u003c/img\u003e\u003c/a\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://i.imgur.com/auF95TW.png\" width=\"340px\"\u003e\u003c/img\u003e\n\u003c/p\u003e\n\n\n## Description\nThe library allows you to use [Stripe.js Checkout](https://stripe.com/payments/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](#important-notes-about-urls).\n\n\n## Prequisites\n- This library relies on [React Native Webview](https://www.npmjs.com/package/react-native-webview). Please follow [this guide](https://github.com/react-native-community/react-native-webview/blob/HEAD/docs/Getting-Started.md) to install in your project first.\n\n\n## Installation\n\n- Ensure you've completed the setps in [prequisites.](#prequisites)\n\n- Install package via npm or yarn:\n\n`npm install --save react-native-stripe-checkout-webview` OR `yarn add react-native-stripe-checkout-webview`\n\n- Import in your project\n\n```javascript\nimport StripeCheckout from 'react-native-stripe-checkout-webview';\n```\n\n\n## Usage\n```jsx\nimport StripeCheckout from 'react-native-stripe-checkout-webview';\n\ntype Props = { STRIPE_PUBLIC_KEY: string, CHECKOUT_SESSION_ID: string };\n\nconst MyStripeCheckout = ({ STRIPE_PUBLIC_KEY, CHECKOUT_SESSION_ID }: Props) =\u003e (\n  \u003cStripeCheckout\n    stripePublicKey={STRIPE_PUBLIC_KEY}\n    checkoutSessionInput={{\n      sessionId: CHECKOUT_SESSION_ID,\n    }}\n    onSuccess={({ checkoutSessionId }) =\u003e {\n      console.log(`Stripe checkout session succeeded. session id: ${checkoutSessionId}.`);\n    }}\n    onCancel={() =\u003e {\n      console.log(`Stripe checkout session cancelled.`);\n    }}\n  /\u003e\n);\n\nexport default MyStripeCheckout;\n```\n\n\n## Important Notes about URLs\n\n- successUrl must have the query string params `?sc_checkout=success\u0026sc_sid={CHECKOUT_SESSION_ID}`\n  - sc_sid is optional - must be the last param - when passed results in sessionId being passed to the onSuccess function\n- cancelUrl must have the query string params `?sc_checkout=cancel`\n- A simple way to do this is using [url-join](https://www.npmjs.com/package/url-join). eg: `urlJoin(mySuccessUrl, '?sc_checkout=success\u0026sc_sid={CHECKOUT_SESSION_ID}')`.\n\n\n## Component props\n\n- `stripePublicKey` (String) - Stripe public key of your project.\n- `checkoutSessionInput` (Object) - Object to be passed to Stripe's `redirectToCheckout` function. [Docs](https://stripe.com/docs/js/checkout/redirect_to_checkout).\n  - ```js\n    {\n      sessionId: string,\n      successUrl: string,\n      cancelUrl: string,\n      // common\n      customerEmail?: string,\n      billingAddressCollection?: 'required' | 'auto',\n      shippingAddressCollection?: {\n        allowedCountries: Array\u003cstring\u003e,\n      },\n      locale?: string,\n    }\n    | {\n        clientReferenceId: string,\n        successUrl: string,\n        cancelUrl: string,\n        items?: Array\u003c{ plan: string, quantity: string }\u003e,\n        lineItems?: Array\u003c{ price: number, quantity: number }\u003e,\n        mode?: 'payment' | 'subscription',\n        submitType?: string,\n        // common\n        customerEmail?: string,\n        billingAddressCollection?: 'required' | 'auto',\n        shippingAddressCollection?: {\n          allowedCountries: Array\u003cstring\u003e,\n        },\n        locale?: string,\n      }\n    ```\n- `onSuccess` (?Function) - Called upon success of the checkout session with `{ ...props, checkoutSessionId: 'CHECKOUT_SESSION_ID' }`\n- `onCancel` (?Function) - Called upon success of the checkout session with `{ ...props }`\n- `onLoadingComplete` (?Function) - Called when the Stripe checkout session webpage loads successfully.\n- `options` (?Object) - custom options to display content in the webview\n  - `htmlContentLoading` (String) - Html string to display a loading indication. - default: `\u003ch1 id=\"sc-loading\"\u003eLoading...\u003c/h1\u003e` - note: The loading item is set on the element with id='sc-loading'\n  - `htmlContentError` (String) - Html string to display stripe errors. - default: `\u003cdiv id=\"sc-error-message\"\u003e\u003c/div\u003e` - note: The error is set on the element with id='sc-error-message'\n  - `htmlContentHead` (String) - Html string to inject in head. - default: ''\n- `webViewProps` (?Object) - WebView Component props, spread on the WebView Component.\n- `renderOnComplete` (?(props) =\u003e 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.\n\n\n## Apple Pay and Google Pay\n- This library uses [react-native-webview](https://github.com/react-native-webview) under the hood to render the Stripe Checkout webpage. To get Apple Pay and Google Pay to work we need to pass the context to the browser, [here's how to get it working](https://github.com/react-native-webview/react-native-webview/issues/920#issuecomment-720305564):\n  - What causes the issue is an injected script by default on webview start named html5HistoryAPIShimSource\nHow to fix (Note that the fix doesn't fully work on expo, but workarounds can be found in the issue thread):\n    - Comment this line in /node_modules/react-native-webview/apple/RNCWebView.m like shown below (in v10.9.2 line number is 1270.)\n    ```\n    WKUserScript *script = [[WKUserScript alloc] initWithSource:html5HistoryAPIShimSource injectionTime:WKUserScriptInjectionTimeAtDocumentStart\n    forMainFrameOnly:YES];\n    // [wkWebViewConfig.userContentController addUserScript:script]; // this line that inject \"html5HistoryAPIShimSource\" on start\n    ```\n    - You can use [patch-package](https://www.npmjs.com/package/patch-package) to easily persist this change\n\n## Contributing\nPull requests are highly appreciated! For major changes, please open an issue first to discuss what you would like to change.\n\n### Related Projects\n- Stripe's identity verification for react native: [react-native-stripe-identity](https://github.com/A-Tokyo/react-native-stripe-identity)\n\n### Roadmap\n- Add eslint\n- Config prettier\n- Add typescript\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-tokyo%2Freact-native-stripe-checkout-webview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fa-tokyo%2Freact-native-stripe-checkout-webview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fa-tokyo%2Freact-native-stripe-checkout-webview/lists"}