Handling payments is very complex, not talking the security risks one can take if handling payment information. Stripe API, make things easier, secure and faster to deploy
Implementing Stripe API in React
In my latest React project, Studio Ghibli’s Fan Hub I implemented Stripe API to test and handle payments on the Shop component of the app.
Handling payments is very complex, not talking the security risks one can take if handling payment information. Stripe API, make things easier, secure and faster to deploy.
Intro to Stripe
Stripe is well known in the payments sphere. You can read the docs to learn more how easy it can be implemented. But basically Stripe renders itself the handling of payments and you implement some configuration to get the payment information and handle it backend. For this post we will focus on the frontend with React.
Setting Up Stripe
Again we will implement the frontend of Stripe. We might implement the backend handling of the data received in a future blog.
First things first lets sign up for Stripe account.
Integrating Stripe
Lets add it to our package.json
yarn add react-stripe-checkout
With this installed we can now add our Stripe element to render it frontend. Lets begin by creating a boilerplate element such as this one.
import React from "react";
import StripeCheckout from 'react-stripe-checkout'
const StripeBtn = ({ price }) => {
const priceForStripe = price * 100
const publishableKey = "your_key"
const onToken = token => {
console.log(token)
alert('Payment Successful')
}
return (
<StripeCheckout
label="Pay Now"
name="Studio Ghibli's Fan Hub (Demo Purposes)"
billingAddress
shippingAddress
image="https://svgshare.com/i/Lko.svg"
description={`Your (demo) total is ${price}`}
amount={priceForStripe}
panelLabel="Pay Now"
token={onToken}
stripeKey={publishableKey}
>
</StripeCheckout>
)
}
export default StripeBtn
Not here it is worth mentioning that stripe handles values as cents, that is why we create the const. The publishableKey
is your own API key. To get the key, just access your new account and click on developer tab then API keys.
Now, the imported stripeCheckout
has a bunch of features and you can read more here.
token
is where you process your payment on your backend. For now we will just log it to the console and have the fake alert.
With this you can go ahead and test adding this button to your appropriate component and see the button has been added accordingly. Here’s how it shows on mine:
You might see some console errors they are usual Stripe’s end and had to do with style them, if it doesn’t affect functionality ignore them for now.
Go ahead and test by using any of the test credit cards found a Stripe’s docs. Everything should test correctly. And done you have implemented Stripe! Here’s the token object format.
Now although these are just the first steps. You can continue building and show how as a React developer you can implement Stripe!