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!

• ← Previous Post
• Next Post →