{"id":13432270,"url":"https://github.com/stripe-archive/react-stripe-elements","last_synced_at":"2025-12-12T01:06:24.628Z","repository":{"id":40679241,"uuid":"82956161","full_name":"stripe-archive/react-stripe-elements","owner":"stripe-archive","description":"Moved to stripe/react-stripe-js.","archived":true,"fork":false,"pushed_at":"2021-03-26T19:26:02.000Z","size":2126,"stargazers_count":3029,"open_issues_count":7,"forks_count":319,"subscribers_count":56,"default_branch":"master","last_synced_at":"2025-09-19T12:38:20.065Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://github.com/stripe/react-stripe-js","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/stripe-archive.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-23T18:04:00.000Z","updated_at":"2025-09-09T18:53:02.000Z","dependencies_parsed_at":"2022-08-10T00:40:40.664Z","dependency_job_id":null,"html_url":"https://github.com/stripe-archive/react-stripe-elements","commit_stats":null,"previous_names":["stripe/react-stripe-elements"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/stripe-archive/react-stripe-elements","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Freact-stripe-elements","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Freact-stripe-elements/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Freact-stripe-elements/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Freact-stripe-elements/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stripe-archive","download_url":"https://codeload.github.com/stripe-archive/react-stripe-elements/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stripe-archive%2Freact-stripe-elements/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276038174,"owners_count":25574280,"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","status":"online","status_checked_at":"2025-09-20T02:00:10.207Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-07-31T02:01:09.904Z","updated_at":"2025-09-28T21:31:07.375Z","avatar_url":"https://github.com/stripe-archive.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":[],"readme":"## We’ve moved to [@stripe/react-stripe-js](https://github.com/stripe/react-stripe-js)!\n\nWe have decided to rename, rework, and move this project. We have no plans for\nany additional major releases of `react-stripe-elements`. If you have an issue with this package, please open it on the [react-stripe-js repo](https://github.com/stripe/react-stripe-js).\n\nIf you are starting a new Stripe integration or are looking to update your\nexisting integration, use\n[React Stripe.js](https://github.com/stripe/react-stripe-js).\n\n- [Learn to accept a payment (with React Stripe.js!)](https://stripe.com/docs/payments/accept-a-payment#web)\n- [Migrate from `react-stripe-elements` to React Stripe.js](https://github.com/stripe/react-stripe-js/blob/master/docs/migrating.md)\n\n---\n\n# react-stripe-elements\n\n[![build status](https://img.shields.io/travis/stripe/react-stripe-elements/master.svg?style=flat-square)](https://travis-ci.org/stripe/react-stripe-elements)\n[![npm version](https://img.shields.io/npm/v/react-stripe-elements.svg?style=flat-square)](https://www.npmjs.com/package/react-stripe-elements)\n\n\u003e React components for Stripe.js and Stripe Elements\n\nThis project is a thin React wrapper around\n[Stripe.js](https://stripe.com/docs/stripe.js) and\n[Stripe Elements](https://stripe.com/docs/elements). It allows you to add\nElements to any React app, and manages the state and lifecycle of Elements for\nyou.\n\nThe\n[Stripe.js / Stripe Elements API reference](https://stripe.com/docs/elements/reference)\ngoes into more detail on the various customization options for Elements (e.g.\nstyles, fonts).\n\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n## Table of Contents\n\n- [Demo](#demo)\n- [Installation](#installation)\n  - [First, install `react-stripe-elements`.](#first-install-react-stripe-elements)\n  - [Then, load Stripe.js in your application:](#then-load-stripejs-in-your-application)\n- [Getting started](#getting-started)\n  - [The Stripe context (`StripeProvider`)](#the-stripe-context-stripeprovider)\n  - [Element groups (`Elements`)](#element-groups-elements)\n  - [Setting up your payment form (`injectStripe`)](#setting-up-your-payment-form-injectstripe)\n  - [Using individual `*Element` components](#using-individual-element-components)\n  - [Using the `PaymentRequestButtonElement`](#using-the-paymentrequestbuttonelement)\n- [Advanced integrations](#advanced-integrations)\n  - [Loading Stripe.js asynchronously](#loading-stripejs-asynchronously)\n  - [Server-side rendering (SSR)](#server-side-rendering-ssr)\n  - [Using an existing Stripe instance](#using-an-existing-stripe-instance)\n- [Component reference](#component-reference)\n  - [`\u003cStripeProvider\u003e`](#stripeprovider)\n    - [Props shape](#props-shape)\n  - [`\u003cElements\u003e`](#elements)\n    - [Props shape](#props-shape-1)\n  - [`\u003c*Element\u003e` components](#element-components)\n    - [Available components](#available-components)\n    - [Props shape](#props-shape-2)\n    - [Using `onReady`](#using-onready)\n  - [`injectStripe` HOC](#injectstripe-hoc)\n    - [Example](#example)\n- [Troubleshooting](#troubleshooting)\n- [Development](#development)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n## Demo\n\nThe fastest way to start playing around with `react-stripe-elements` is with\nthis JSFiddle: \u003chttps://jsfiddle.net/f5wxprnc/\u003e.\n\nYou can also play around with the demo locally. The source code is in\n[demo/](demo/). To run it:\n\n```shell\ngit clone https://github.com/stripe/react-stripe-elements\ncd react-stripe-elements\n\n# (make sure you have yarn installed: https://yarnpkg.com/)\n\nyarn install\nyarn run demo\n```\n\nNow go to \u003chttp://localhost:8080/\u003e to try it out!\n\n\u003e :warning: `PaymentRequestButtonElement` will not render unless the page is\n\u003e served over HTTPS. To demo `PaymentRequestButtonElement`, you can tunnel over\n\u003e HTTPS to the local server using ngrok or a similar service.\n\n![Screenshot of the demo running](demo/demo.png)\n\n## Installation\n\n### First, install `react-stripe-elements`.\n\nInstall with `yarn`:\n\n```\nyarn add react-stripe-elements\n```\n\nOR with `npm`:\n\n```\nnpm install --save react-stripe-elements\n```\n\nOR using UMD build (exports a global `ReactStripeElements` object);\n\n```html\n\u003cscript src=\"https://unpkg.com/react-stripe-elements@latest/dist/react-stripe-elements.min.js\"\u003e\u003c/script\u003e\n```\n\n### Then, load Stripe.js in your application:\n\n```html\n\u003cscript src=\"https://js.stripe.com/v3/\"\u003e\u003c/script\u003e\n```\n\n## Getting started\n\n### The Stripe context (`StripeProvider`)\n\nIn order for your application to have access to\n[the Stripe object](https://stripe.com/docs/elements/reference#the-stripe-object),\nlet's add `StripeProvider` to our root React App component:\n\n```jsx\n// index.js\nimport React from 'react';\nimport {render} from 'react-dom';\nimport {StripeProvider} from 'react-stripe-elements';\n\nimport MyStoreCheckout from './MyStoreCheckout';\n\nconst App = () =\u003e {\n  return (\n    \u003cStripeProvider apiKey=\"pk_test_12345\"\u003e\n      \u003cMyStoreCheckout /\u003e\n    \u003c/StripeProvider\u003e\n  );\n};\n\nrender(\u003cApp /\u003e, document.getElementById('root'));\n```\n\n### Element groups (`Elements`)\n\nNext, when you're building components for your checkout form, you'll want to\nwrap the `Elements` component around your `form`. This groups the set of Stripe\nElements you're using together, so that we're able to pull data from groups of\nElements when you're tokenizing.\n\n```jsx\n// MyStoreCheckout.js\nimport React from 'react';\nimport {Elements} from 'react-stripe-elements';\n\nimport InjectedCheckoutForm from './CheckoutForm';\n\nclass MyStoreCheckout extends React.Component {\n  render() {\n    return (\n      \u003cElements\u003e\n        \u003cInjectedCheckoutForm /\u003e\n      \u003c/Elements\u003e\n    );\n  }\n}\n\nexport default MyStoreCheckout;\n```\n\n### Setting up your payment form (`injectStripe`)\n\nUse the `injectStripe` [Higher-Order Component][hoc] (HOC) to build your payment\nform components in the `Elements` tree. The [Higher-Order Component][hoc]\npattern in React can be unfamiliar to those who've never seen it before, so\nconsider reading up before continuing. The `injectStripe` HOC provides the\n`this.props.stripe` and `this.props.elements` properties that manage your\n`Elements` groups. Within an injected component, you can call any of the methods\non the [Stripe][stripe] or [Elements][elements] objects.\n\n[hoc]: https://facebook.github.io/react/docs/higher-order-components.html\n[stripe]: https://stripe.com/docs/stripe-js/reference#the-stripe-object\n[elements]: https://stripe.com/docs/stripe-js/reference#the-elements-object\n\n\u003e :warning: NOTE `injectStripe` cannot be used on the same element that renders\n\u003e the `Elements` component; it must be used on the child component of\n\u003e `Elements`. `injectStripe` _returns a wrapped component_ that needs to sit\n\u003e under `\u003cElements\u003e` but above any code where you'd like to access\n\u003e `this.props.stripe`.\n\n```jsx\n// CheckoutForm.js\nimport React from 'react';\nimport {injectStripe} from 'react-stripe-elements';\n\nimport AddressSection from './AddressSection';\nimport CardSection from './CardSection';\n\nclass CheckoutForm extends React.Component {\n  handleSubmit = (ev) =\u003e {\n    // We don't want to let default form submission happen here, which would refresh the page.\n    ev.preventDefault();\n\n    // Use Elements to get a reference to the Card Element mounted somewhere\n    // in your \u003cElements\u003e tree. Elements will know how to find your Card Element\n    // because only one is allowed.\n    // See our getElement documentation for more:\n    // https://stripe.com/docs/stripe-js/reference#elements-get-element\n    const cardElement = this.props.elements.getElement('card');\n\n    // From here we can call createPaymentMethod to create a PaymentMethod\n    // See our createPaymentMethod documentation for more:\n    // https://stripe.com/docs/stripe-js/reference#stripe-create-payment-method\n    this.props.stripe\n      .createPaymentMethod({\n        type: 'card',\n        card: cardElement,\n        billing_details: {name: 'Jenny Rosen'},\n      })\n      .then(({paymentMethod}) =\u003e {\n        console.log('Received Stripe PaymentMethod:', paymentMethod);\n      });\n\n    // You can also use confirmCardPayment with the PaymentIntents API automatic confirmation flow.\n    // See our confirmCardPayment documentation for more:\n    // https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-payment\n    this.props.stripe.confirmCardPayment('{PAYMENT_INTENT_CLIENT_SECRET}', {\n      payment_method: {\n        card: cardElement,\n      },\n    });\n\n    // You can also use confirmCardSetup with the SetupIntents API.\n    // See our confirmCardSetup documentation for more:\n    // https://stripe.com/docs/stripe-js/reference#stripe-confirm-card-setup\n    this.props.stripe.confirmCardSetup('{PAYMENT_INTENT_CLIENT_SECRET}', {\n      payment_method: {\n        card: cardElement,\n      },\n    });\n\n    // You can also use createToken to create tokens.\n    // See our tokens documentation for more:\n    // https://stripe.com/docs/stripe-js/reference#stripe-create-token\n    // With createToken, you will not need to pass in the reference to\n    // the Element. It will be inferred automatically.\n    this.props.stripe.createToken({type: 'card', name: 'Jenny Rosen'});\n    // token type can optionally be inferred if there is only one Element\n    // with which to create tokens\n    // this.props.stripe.createToken({name: 'Jenny Rosen'});\n\n    // You can also use createSource to create Sources.\n    // See our Sources documentation for more:\n    // https://stripe.com/docs/stripe-js/reference#stripe-create-source\n    // With createSource, you will not need to pass in the reference to\n    // the Element. It will be inferred automatically.\n    this.props.stripe.createSource({\n      type: 'card',\n      owner: {\n        name: 'Jenny Rosen',\n      },\n    });\n  };\n\n  render() {\n    return (\n      \u003cform onSubmit={this.handleSubmit}\u003e\n        \u003cAddressSection /\u003e\n        \u003cCardSection /\u003e\n        \u003cbutton\u003eConfirm order\u003c/button\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n\nexport default injectStripe(CheckoutForm);\n```\n\n### Using individual `*Element` components\n\nNow, you can use individual `*Element` components, such as `CardElement`, to\nbuild your form.\n\n```jsx\n// CardSection.js\nimport React from 'react';\nimport {CardElement} from 'react-stripe-elements';\n\nclass CardSection extends React.Component {\n  render() {\n    return (\n      \u003clabel\u003e\n        Card details\n        \u003cCardElement style={{base: {fontSize: '18px'}}} /\u003e\n      \u003c/label\u003e\n    );\n  }\n}\n\nexport default CardSection;\n```\n\n### Using the `PaymentRequestButtonElement`\n\nThe\n[Payment Request Button](https://stripe.com/docs/elements/payment-request-button)\nlets you collect payment and address information from your customers using Apple\nPay and the Payment Request API.\n\nTo use the `PaymentRequestButtonElement` you need to first create a\n[`PaymentRequest` object](https://stripe.com/docs/stripe.js#the-payment-request-object).\nYou can then conditionally render the `PaymentRequestButtonElement` based on the\nresult of `paymentRequest.canMakePayment` and pass the `PaymentRequest` Object\nas a prop.\n\n```jsx\nclass PaymentRequestForm extends React.Component {\n  constructor(props) {\n    super(props);\n\n    // For full documentation of the available paymentRequest options, see:\n    // https://stripe.com/docs/stripe.js#the-payment-request-object\n    const paymentRequest = props.stripe.paymentRequest({\n      country: 'US',\n      currency: 'usd',\n      total: {\n        label: 'Demo total',\n        amount: 1000,\n      },\n    });\n\n    paymentRequest.on('token', ({complete, token, ...data}) =\u003e {\n      console.log('Received Stripe token: ', token);\n      console.log('Received customer information: ', data);\n      complete('success');\n    });\n\n    paymentRequest.canMakePayment().then((result) =\u003e {\n      this.setState({canMakePayment: !!result});\n    });\n\n    this.state = {\n      canMakePayment: false,\n      paymentRequest,\n    };\n  }\n\n  render() {\n    return this.state.canMakePayment ? (\n      \u003cPaymentRequestButtonElement\n        paymentRequest={this.state.paymentRequest}\n        className=\"PaymentRequestButton\"\n        style={{\n          // For more details on how to style the Payment Request Button, see:\n          // https://stripe.com/docs/elements/payment-request-button#styling-the-element\n          paymentRequestButton: {\n            theme: 'light',\n            height: '64px',\n          },\n        }}\n      /\u003e\n    ) : null;\n  }\n}\nexport default injectStripe(PaymentRequestForm);\n```\n\n## Advanced integrations\n\nThe above [Getting started](#getting-started) section outlines the most common\nintegration, which makes the following assumptions:\n\n- The Stripe.js script is loaded before your application's code.\n- Your code is only run in a browser environment.\n- You don't need fine-grained control over the Stripe instance that\n  `react-stripe-elements` uses under the hood.\n\nWhen all of these assumptions are true, you can pass the `apiKey` prop to\n`\u003cStripeProvider\u003e` and let `react-stripe-elements` handle the rest.\n\nWhen one or more of these assumptions doesn't hold true for your integration,\nyou have another option: pass a Stripe instance as the `stripe` prop to\n`\u003cStripeProvider\u003e` directly. The `stripe` prop can be either `null` or the\nresult of using `Stripe(apiKey, options)` to construct a [Stripe instance].\n\n[stripe-function]: https://stripe.com/docs/stripe-js/reference#stripe-function\n\nWe'll now cover a couple of use cases which break at least one of the\nassumptions listed above.\n\n### Loading Stripe.js asynchronously\n\nLoading Stripe.js asynchronously can speed up your initial page load, especially\nif you don't show the payment form until the user interacts with your\napplication in some way.\n\n```html\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003c!-- ... --\u003e\n\n    \u003c!-- Note the 'id' and 'async' attributes:                         --\u003e\n    \u003c!--    ┌────────────┐                                 ┌───┐       --\u003e\n    \u003cscript id=\"stripe-js\" src=\"https://js.stripe.com/v3/\" async\u003e\u003c/script\u003e\n\n    \u003c!-- ... --\u003e\n  \u003c/head\u003e\n  \u003c!-- ... --\u003e\n\u003c/html\u003e\n```\n\nInitialize `this.state.stripe` to `null` in the `constructor`, then update it in\n`componentDidMount` when the script tag has loaded.\n\n```jsx\nclass App extends React.Component {\n  constructor() {\n    super();\n    this.state = {stripe: null};\n  }\n  componentDidMount() {\n    if (window.Stripe) {\n      this.setState({stripe: window.Stripe('pk_test_12345')});\n    } else {\n      document.querySelector('#stripe-js').addEventListener('load', () =\u003e {\n        // Create Stripe instance once Stripe.js loads\n        this.setState({stripe: window.Stripe('pk_test_12345')});\n      });\n    }\n  }\n  render() {\n    // this.state.stripe will either be null or a Stripe instance\n    // depending on whether Stripe.js has loaded.\n    return (\n      \u003cStripeProvider stripe={this.state.stripe}\u003e\n        \u003cElements\u003e\n          \u003cInjectedCheckoutForm /\u003e\n        \u003c/Elements\u003e\n      \u003c/StripeProvider\u003e\n    );\n  }\n}\n```\n\nWhen loading Stripe.js asynchronously, the `stripe` prop provided by\n`injectStripe` will initially be `null`, and will update to the Stripe instance\nonce you pass it in to your `StripeProvider`. You can find a working demo of\nthis strategy in [async.js](demo/async/async.js). If you run the demo locally,\nyou can view it at \u003chttp://localhost:8080/async/\u003e.\n\nFor alternatives to calling `setState`in `componentDidMount`, consider using a\n`setTimeout()`, moving the `if/else` statement to the `constructor`, or\ndynamically injecting a script tag in `componentDidMount`. For more information,\nsee [stripe/react-stripe-elements][issue-154].\n\n[issue-154]: https://github.com/stripe/react-stripe-elements/issues/154\n\n### Server-side rendering (SSR)\n\nIf you're using `react-stripe-elements` in a non-browser environment\n(`React.renderToString`, etc.), Stripe.js is not available. To use\n`react-stripe-elements` with SSR frameworks, use the following instructions.\n\nThe general idea is similar to the async loading snippet from the previous\nsection (initialize `this.state.stripe` to `null` in `constructor`, update in\n`componentDidMount`), but this time we don't have to wait for the script tag to\nload in `componentDidMount`; we can use `window.Stripe` directly.\n\n```jsx\nclass App extends React.Component {\n  constructor() {\n    super();\n    this.state = {stripe: null};\n  }\n  componentDidMount() {\n    // Create Stripe instance in componentDidMount\n    // (componentDidMount only fires in browser/DOM environment)\n    this.setState({stripe: window.Stripe('pk_test_12345')});\n  }\n  render() {\n    return (\n      \u003cStripeProvider stripe={this.state.stripe}\u003e\n        \u003cElements\u003e\n          \u003cInjectedCheckoutForm /\u003e\n        \u003c/Elements\u003e\n      \u003c/StripeProvider\u003e\n    );\n  }\n}\n```\n\nInside your form, `\u003cInjectedCheckoutForm /\u003e`, `this.props.stripe` will either be\n`null` or a valid Stripe instance. This means that it will be `null` when\nrendered server-side, but set when rendered in a browser.\n\n### Using an existing Stripe instance\n\nIn some projects, part of the project uses React, while another part doesn't.\nFor example, maybe you have business logic and view logic separate. Or maybe you\nuse `react-stripe-elements` for your credit card form, but use Stripe.js APIs\ndirectly for tokenizing bank account information.\n\nYou can use the `stripe` prop to get more fine-grained control over the Stripe\ninstance that `\u003cStripeProvider\u003e` uses. For example, if you have a `stripe`\ninstance in a Redux store that you pass to your `\u003cApp /\u003e` as a prop, you can\npass that instance directly into `\u003cStripeProvider\u003e`:\n\n```jsx\nclass App extends React.Component {\n  render() {\n    return (\n      \u003cStripeProvider stripe={this.props.stripe}\u003e\n        \u003cElements\u003e\n          \u003cInjectedCheckoutForm /\u003e\n        \u003c/Elements\u003e\n      \u003c/StripeProvider\u003e\n    );\n  }\n}\n```\n\nAs long as `\u003cApp /\u003e` is provided a non-`null` `stripe` prop, `this.props.stripe`\nwill always be available within your `InjectedCheckoutForm`.\n\n## Component reference\n\n### `\u003cStripeProvider\u003e`\n\nAll applications using `react-stripe-elements` must use the `\u003cStripeProvider\u003e`\ncomponent, which sets up the Stripe context for a component tree.\n`react-stripe-elements` uses the provider pattern (which is also adopted by\ntools like [`react-redux`](https://github.com/reactjs/react-redux) and\n[`react-intl`](https://github.com/yahoo/react-intl)) to scope a Stripe context\nto a tree of components.\n\nThis allows configuration like your API key to be provided at the root of a\ncomponent tree. This context is then made available to the `\u003cElements\u003e`\ncomponent and individual `\u003c*Element\u003e` components that we provide.\n\nAn integration usually wraps the `\u003cStripeProvider\u003e` around the application’s\nroot component. This way, your entire application has the configured Stripe\ncontext.\n\n#### Props shape\n\nThere are two _distinct_ props shapes you can pass to `\u003cStripeProvider\u003e`.\n\n```jsx\ntype StripeProviderProps =\n  | {apiKey: string, ...}\n  | {stripe: StripeObject | null};\n```\n\nSee [Advanced integrations](#advanced-integrations) for more information on when\nto use each.\n\nThe `...` above represents that this component accepts props for any option that\ncan be passed into `Stripe(apiKey, options)`. For example, if you are using\n[Stripe Connect](https://stripe.com/connect) and want to act on behalf of a\nconnected account, you can pass `stripeAccount=\"acct_123\"` as a property to\n`\u003cStripeProvider\u003e`. This will get used just like passing `stripeAccount` in the\noptions of the `Stripe` constructor or like using `stripe_account` when your\nbackend calls the Stripe API directly\n\n### `\u003cElements\u003e`\n\nThe `Elements` component wraps groups of Elements that belong together. In most\ncases, you want to wrap this around your checkout form.\n\n#### Props shape\n\nThis component accepts all `options` that can be passed into\n`stripe.elements(options)` as props.\n\n```jsx\ntype ElementsProps = {\n  locale?: string,\n  fonts?: Array\u003cObject\u003e,\n  // The full specification for `elements()` options is here: https://stripe.com/docs/elements/reference#elements-options\n};\n```\n\n### `\u003c*Element\u003e` components\n\nThese components display the UI for Elements, and must be used within\n`StripeProvider` and `Elements`.\n\n#### Available components\n\n(More to come!)\n\n- `CardElement`\n- `CardNumberElement`\n- `CardExpiryElement`\n- `CardCvcElement`\n- `PaymentRequestButtonElement`\n- `IbanElement`\n- `IdealBankElement`\n\n#### Props shape\n\nThese components accept all `options` that can be passed into\n`elements.create(type, options)` as props.\n\n```jsx\ntype ElementProps = {\n  id?: string,\n  className?: string,\n\n  // For full documentation on the events and payloads below, see:\n  // https://stripe.com/docs/elements/reference#element-on\n  onBlur?: () =\u003e void,\n  onChange?: (changeObject: Object) =\u003e void,\n  onFocus?: () =\u003e void,\n  onReady?: (StripeElement) =\u003e void,\n};\n```\n\nThe props for the `PaymentRequestButtonElement` are:\n\n```jsx\ntype PaymentRequestButtonProps = {\n  id?: string,\n  className?: string,\n\n  paymentRequest: StripePaymentRequest,\n\n  onBlur?: () =\u003e void,\n  onClick?: () =\u003e void,\n  onFocus?: () =\u003e void,\n  onReady?: (StripeElement) =\u003e void,\n};\n```\n\n#### Using `onReady`\n\nNote that the `onReady` callback gives you access to the underlying [Element]\ncreated with Stripe.js. You can use this to get access to all the underlying\nmethods that a Stripe Element supports.\n\nFor example, you can use `onReady` to force your element to focus:\n\n```jsx\n// CardSection.js\nimport React from 'react';\nimport {CardElement} from 'react-stripe-elements';\n\nclass CardSection extends React.Component {\n  render = () =\u003e {\n    return (\n      \u003clabel\u003e\n        Card details\n        \u003cCardElement onReady={(el) =\u003e el.focus()} /\u003e\n      \u003c/label\u003e\n    );\n  };\n}\n\nexport default CardSection;\n```\n\n(Note that this functionality is new as of react-stripe-elements v1.6.0.)\n\n[element]: https://stripe.com/docs/stripe-js/reference#other-methods\n\n### `injectStripe` HOC\n\n```jsx\nfunction injectStripe(\n  WrappedComponent: ReactClass,\n  options?: {\n    withRef?: boolean = false,\n  }\n): ReactClass;\n```\n\nUse `injectStripe` to wrap a component that needs to interact with `Stripe.js`\nto create sources or tokens.\n\n1.  First, create a component that accepts the `stripe` prop and calls one of\n    the Stripe or Elements methods when necessary.\n2.  Wrap that component by passing it to `injectStripe` so that it actually\n    receives the `stripe` and `elements` props.\n3.  Render the component that `injectStripe` returns.\n\n#### Example\n\n```jsx\n// 1. Create a component that uses this.props.stripe:\nclass CheckoutForm extends React.Component {\n  render() {\n    /* ... */\n  }\n  onCompleteCheckout() {\n    this.props.stripe\n      .createPaymentMethod({\n        type: 'card',\n        card: this.props.stripe.getElement('card'),\n      })\n      .then(/* ... */);\n  }\n}\n\n// 2. Wrap it in a higher-order component that provides the `stripe` prop:\nconst InjectedCheckoutForm = injectStripe(CheckoutForm);\n\n// 3. Render the wrapped component in your app:\nconst CheckoutRoute = (props) =\u003e (\n  \u003cdiv\u003e\n    \u003cInjectedCheckoutForm /\u003e\n  \u003c/div\u003e\n);\n```\n\n`injectStripe` will work with any method of providing the actual Stripe instance\nwith `StripeProvider`, whether you just give it an api key,\n[load Stripe.js asynchronously](#loading-stripejs-asynchronously), or\n[pass in an existing instance](#using-an-existing-stripe-instance).\n\nWithin the context of `Elements`, `stripe.createToken` and `stripe.createSource`\nwrap methods of the same name in\n[Stripe.js](https://stripe.com/docs/stripe-js/reference#stripe-create-Token).\nCalls to them automatically infer and pass the `Element` object as the first\nargument.\n\nIf the `withRef` option is set to `true`, the wrapped component instance will be\navailable with the `getWrappedInstance()` method of the wrapper component. This\nfeature can not be used if the wrapped component is a stateless function\ncomponent.\n\nWithin the wrapped component, the `stripe` and `elements` props have the type:\n\n```jsx\ntype FactoryProps = {\n  elements: null | {\n    getElement: (type: string) =\u003e Element | null,\n    // For more detail and documentation on other methods available on\n    // the `elements` object, please refer to our official documentation:\n    // https://stripe.com/docs/elements/reference#the-elements-object\n  },\n  stripe: null | {\n    createToken: (tokenData: {type?: string}) =\u003e Promise\u003c{\n      token?: Object,\n      error?: Object,\n    }\u003e,\n    createSource: (sourceData: {type: string}) =\u003e Promise\u003c{\n      source?: Object,\n      error?: Object,\n    }\u003e,\n    createPaymentMethod: (\n      paymentMethodData: Object\n    ) =\u003e Promise\u003c{\n      paymentMethod?: Object,\n      error?: Object,\n    }\u003e,\n    confirmCardPayment: (\n      clientSecret: string,\n      paymentIntentData?: Object\n    ) =\u003e Promise\u003c{\n      paymentIntent?: Object,\n      error?: Object,\n    }\u003e,\n    confirmCardSetup: (\n      clientSecret: string,\n      paymentIntentData?: Object\n    ) =\u003e Promise\u003c{\n      setupIntent?: Object,\n      error?: Object,\n    }\u003e,\n    // For more detail and documentation on other methods available on\n    // the `stripe` object, please refer to our official documentation:\n    // https://stripe.com/docs/elements/reference#the-stripe-object\n  },\n};\n```\n\nThe `stripe` and `elements` props can only be `null` if you are using one of the\n[Advanced integrations](#advanced-integrations) mentioned above, like loading\nStripe.js asynchronously or providing an existing instance. If you are using a\nbasic integration where you pass in an api key to `\u003cStripeProvider/\u003e`, they will\nalways be present.\n\n## Troubleshooting\n\n`react-stripe-elements` may not work properly when used with components that\nimplement `shouldComponentUpdate`. `react-stripe-elements` relies heavily on\nReact's `context` feature and `shouldComponentUpdate` does not provide a way to\ntake context updates into account when deciding whether to allow a re-render.\nThese components can block context updates from reaching `react-stripe-element`\ncomponents in the tree.\n\nFor example, when using `react-stripe-elements` together with\n[`react-redux`](https://github.com/reactjs/react-redux) doing the following will\nnot work:\n\n```jsx\nconst Component = connect()(injectStripe(_Component));\n```\n\nIn this case, the context updates originating from the `StripeProvider` are not\nreaching the components wrapped inside the `connect` function. Therefore,\n`react-stripe-elements` components deeper in the tree break. The reason is that\nthe `connect` function of `react-redux`\n[implements `shouldComponentUpdate`](https://github.com/reactjs/react-redux/blob/master/docs/troubleshooting.md#my-views-arent-updating-when-something-changes-outside-of-redux)\nand blocks re-renders that are triggered by context changes outside of the\nconnected component.\n\nThere are two ways to prevent this issue:\n\n1.  Change the order of the functions to have `injectStripe` be the outermost\n    one:\n\n    ```jsx\n    const Component = injectStripe(connect()(_CardForm));\n    ```\n\nThis works, because `injectStripe` does not implement `shouldComponentUpdate`\nitself, so context updates originating from the `redux` `Provider` will still\nreach all components.\n\n2.  You can use the [`pure: false`][pure-false] option for redux-connect:\n\n    ```jsx\n    const Component = connect(\n      mapStateToProps,\n      mapDispatchToProps,\n      mergeProps,\n      {\n        pure: false,\n      }\n    )(injectStripe(_CardForm));\n    ```\n\n[pure-false]:\n  https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options\n\n## Development\n\nInstall dependencies:\n\n    yarn install\n\nRun the demo:\n\n    yarn run demo\n\nRun the tests:\n\n    yarn run test\n\nBuild:\n\n    yarn run build\n\nWe use [prettier](https://github.com/prettier/prettier) for code formatting:\n\n    yarn run prettier\n\nTo update the ToC in the README if any of the headers changed:\n\n    yarn run doctoc\n\nChecks:\n\n    yarn test\n    yarn run lint\n    yarn run flow\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe-archive%2Freact-stripe-elements","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstripe-archive%2Freact-stripe-elements","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstripe-archive%2Freact-stripe-elements/lists"}