/react-stripe-checkout

A sample project for integrating Stripe Checkout with React (CRA) app

Primary LanguageJavaScript

Integrating Stripe's Checkout with custom pay button to your react app is actually pretty simple. You don't need to install third party package. This project (bootstrapped with Create React App) shows how to do it with a few lines of codes.

DEMO VIDEO

  1. Add the following to public/index.html
 <script src="https://checkout.stripe.com/checkout.js"></script>
  1. Configure the Stripe Checkout in any component you want. In this sample, it's in App.js.
this.stripeHandler = window.StripeCheckout.configure({
  key: "<YOUR_STRIPE_PUBLISHABLE_KEY>",
  image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
  locale: 'auto',
  token: this.onGetStripeToken.bind(this)
});
  1. Open the Checkout modal when the pay button is clicked.
this.stripeHandler.open({
  name: 'My Delightful Shop',
  description: 'An awesome product',
  amount: 1000, // 10 USD -> 1000 cents
  currency: 'usd',
  opened: onCheckoutOpened.bind(this)
});
  1. Send the Stripe token to your server when your customer's card has been validated.
  2. ...
  3. PROFIT! 🤑💰💵💸🌈🚀

Getting Started

  • Clone this repo.
  • yarn install or npm install
  • Open src/App.js and replace <YOUR_STRIPE_PUBLISHABLE_KEY> with your Stripe's publishable key.
  • yarn run

@nicnocquee.