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.
- Add the following to public/index.html
<script src="https://checkout.stripe.com/checkout.js"></script>
- 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)
});
- 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)
});
- Send the Stripe token to your server when your customer's card has been validated.
- ...
- PROFIT! π€π°π΅πΈππ
- Clone this repo.
yarn install
ornpm install
- Open
src/App.js
and replace<YOUR_STRIPE_PUBLISHABLE_KEY>
with your Stripe's publishable key. yarn run