React Stripe Script Loader

Github Pages Demo or Code Sandbox Demo

install

Install as a node module

npm i react-stripe-script-loader -S

usage

1import React from 'react'
2import StripeScriptLoader from 'react-stripe-script-loader'
3import {
4  StripeProvider,
5  Elements,
6  CardNumberElement,
7} from 'react-stripe-elements'
8
9const PageWithStripeElements = () => (
10  <div>
11    <h1>Stripe Elements</h1>
12    <StripeScriptLoader
13      uniqueId='myUniqueId'
14      script='https://js.stripe.com/v3/'
15      loader="Loading..."
16    >
17      <StripeProvider apiKey="stripeApiKey">
18        <Elements>
19          <CardNumberElement />
20        </Elements>
21      </StripeProvider>
22    </StripeScriptLoader>
23  </div>
24)
25
26export default PageWithStripeElements

props

uniqueId string

unique id for script element

script string

script to load

loader ReactElement

string, React elements array, React component

supports

supports all React version with hooks "react": "^16.9.0"

important note

For older versions of React ^15.0.0 please install following version with tag react-version-15

npm install react-stripe-script-loader@react-version-15 -S

Yusuf Özlü