Requirements

Getting started

Documentation

Minimal example

npm install @stripe/react-stripe-js @stripe/stripe-js

Using hooks

importReact,{useState}from'react';importReactDOMfrom'react-dom';import{loadStripe}from'@stripe/stripe-js';import{PaymentElement,Elements,useStripe,useElements,}from'@stripe/react-stripe-js';constCheckoutForm=()=>{conststripe=useStripe();constelements=useElements();const[errorMessage,setErrorMessage]=useState(null);consthandleSubmit=async(event)=>{event.preventDefault();if(elements==null){return;}// Trigger form validation and wallet collectionconst{error:submitError}=awaitelements.submit();if(submitError){// Show error to your customersetErrorMessage(submitError.message);return;}// Create the PaymentIntent and obtain clientSecret from your server endpointconstres=awaitfetch('/create-intent',{method:'POST',});const{client_secret:clientSecret}=awaitres.json();const{error}=awaitstripe.confirmPayment({//`Elements` instance that was used to create the Payment Element      elements,      clientSecret,confirmParams:{return_url:'https://example.com/order/123/complete',},});if(error){// This point will only be reached if there is an immediate error when// confirming the payment. Show error to your customer (for example, payment// details incomplete)setErrorMessage(error.message);}else{// Your customer will be redirected to your `return_url`. For some payment// methods like iDEAL, your customer will be redirected to an intermediate// site first to authorize the payment, then redirected to the `return_url`.}};return(<formonSubmit={handleSubmit}><PaymentElement/><buttontype="submit"disabled={!stripe||!elements}>        Pay</button>{/* Show error message to your customers */}{errorMessage&&<div>{errorMessage}</div>}</form>);};conststripePromise=loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');constoptions={mode:'payment',amount:1099,currency:'usd',// Fully customizable with appearance API.appearance:{/*...*/},};constApp=()=>(<Elementsstripe={stripePromise}options={options}><CheckoutForm/></Elements>);ReactDOM.render(<App/>,document.body);

Using class components

importReactfrom'react';importReactDOMfrom'react-dom';import{loadStripe}from'@stripe/stripe-js';import{PaymentElement,Elements,ElementsConsumer,}from'@stripe/react-stripe-js';classCheckoutFormextendsReact.Component{handleSubmit=async(event)=>{event.preventDefault();const{stripe, elements}=this.props;if(elements==null){return;}// Trigger form validation and wallet collectionconst{error:submitError}=awaitelements.submit();if(submitError){// Show error to your customerreturn;}// Create the PaymentIntent and obtain clientSecretconstres=awaitfetch('/create-intent',{method:'POST',});const{client_secret:clientSecret}=awaitres.json();const{error}=awaitstripe.confirmPayment({//`Elements` instance that was used to create the Payment Element      elements,      clientSecret,confirmParams:{return_url:'https://example.com/order/123/complete',},});if(error){// This point will only be reached if there is an immediate error when// confirming the payment. Show error to your customer (for example, payment// details incomplete)}else{// Your customer will be redirected to your `return_url`. For some payment// methods like iDEAL, your customer will be redirected to an intermediate// site first to authorize the payment, then redirected to the `return_url`.}};render(){const{stripe}=this.props;return(<formonSubmit={this.handleSubmit}><PaymentElement/><buttontype="submit"disabled={!stripe}>          Pay</button></form>);}}constInjectedCheckoutForm=()=>(<ElementsConsumer>{({stripe, elements})=>(<CheckoutFormstripe={stripe}elements={elements}/>)}</ElementsConsumer>);conststripePromise=loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');constoptions={mode:'payment',amount:1099,currency:'usd',// Fully customizable with appearance API.appearance:{/*...*/},};constApp=()=>(<Elementsstripe={stripePromise}options={options}><InjectedCheckoutForm/></Elements>);ReactDOM.render(<App/>,document.body);

TypeScript support

Contributing