YouTube Icon

Code Playground.

How to Implement Stripe Payment Gateway In React

CFG

How to Implement Stripe Payment Gateway In React

Introduction

Stripe is a main online Payment processor that can be effortlessly coordinated into an application. Numerous organizations over the globe use Stripe to acknowledge cash for their items and administrations. 

This guide will be an ideal beginning for you to see how installment passages work and how you can coordinate Stripe into a current React application. 

Right now, will make an item card, as demonstrated as follows, and coordinating it with Stripe.

Payment Flow

The total Payment handling stream is depicted beneath: 

  • The user enters subtleties into the card structure. 

  • The user application sends the card subtleties to the Stripe API. 

  • The Stripe API performs tokenization and returns a token item for the card. 

  • The user application sends the card token to the backend application with other information identified with the buy. 

  • The backend application makes the Payment demand with the card token and sum subtleties to the Stripe API.

Bootstrapping the Application

Get started with setting up the product card in the App.js file by adding the product image.

const App = () => {
  return (
    <div className="App">
      <div className="product">
        <img
          src="https://images.pexels.com/photos/18105/pexels-photo.jpg?auto=compress"
          alt="laptop"
          style={{ width: "100%", height: "auto" }}
        />
        <div>
          {
            // Checkout component
          }
        </div>
      </div>
    </div>
  );
};

Installing and Initializing the Stripe Libraries

You need to install two Stripe libraries to get started with the integration.

npm i @stripe/stripe-js @stripe/react-stripe-js

The stripe-js library includes the main Stripe JavaScript API, and the react-stripe-js library contains the required frontend elements as React components.

In the App.js file, initialize Stripe by using the loadStripe() function.

import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);

In the loadStripe() function, pass your Stripe publishable key, which you can get from your Stripe dashboard. The function will return a promise that you need to pass to the <Elements /> wrapper component.

The <Elements /> wrapper component is a provider that allows you to access a Stripe object in any of the nested components. You should wrap the card input form in the <Elements /> component.

The loadStripe() function is asynchronous and loads the stripe-js script with the Stripe object.

import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

const stripePromise = loadStripe(STRIPE_PUBLISHABLE_KEY);

const App = () => {
  return (
    <div className="App">
      <div className="product">
        <img
          src="https://crowdforgeek.com"
          alt="Desktop"
          style={{ width: "100%", height: "auto" }}
        />
        <div>
          <Elements stripe={stripePromise}>
            <CheckoutForm />
          </Elements>
        </div>
      </div>
    </div>
  );
};

The <CardSection /> Component

Inside the component, render the component from the Stripe library. The component securely accepts and stores the card details entered by the user. It is completely customizable in terms of styling so that you can easily embed it in your application without having to worry about the overall theme.

import { CardElement } from "@stripe/react-stripe-js";

const CARD_ELEMENT_OPTIONS = {
  iconStyle: "solid",
  hidePostalCode: true,
  style: {
    base: {
      iconColor: "rgb(240, 57, 122)",
      color: "rgb(240, 57, 122)",
      fontSize: "16px",
      fontFamily: '"Open Sans", sans-serif',
      fontSmoothing: "antialiased",
      "::placeholder": {
        color: "#CFD7DF"
      }
    },
    invalid: {
      color: "#e5424d",
      ":focus": {
        color: "#303238"
      }
    }
  }
};

function CardSection() {
  return <CardElement options={CARD_ELEMENT_OPTIONS} />;
}

Add the <CardSection /> component inside the <CheckoutForm />.

The <CheckoutForm /> Component

The <CheckoutForm /> component contains product details, and the <CardSection /> component accepts the user's card details.

import { ElementsConsumer, CardElement } from "@stripe/react-stripe-js";

class CheckoutForm extends React.Component {
  handleSubmit = async event => {
    event.preventDefault();

    // handle payment request
  };

  render() {
    return (
      <div>
        <div class="product-info">
          <h3 className="product-title">MacBook Pro</h3>
          <h4 className="product-price">$1089</h4>
        </div>
        <form onSubmit={this.handleSubmit}>
          <CardSection />
          <button className="btn-pay">Buy Now</button>
        </form>
      </div>
    );
  }
}

Wrap the <Checkout /> form component with the <ElementsConsumer /> component to get access to the Stripe object. The <ElementsConsumer /> component safely passes the payment information collected by the card element. Pass the properties stripe and elements of the Stripe object to the <CheckoutForm />.

Now, in the handleSubmit method, first check if Stripe is initialized or not. If it is, get the card details from the elements prop and pass them to the createToken() function of the stripe prop.

handleSubmit = async event => {
  event.preventDefault();

  const { stripe, elements } = this.props;
  if (!stripe || !elements) {
    return;
  }

  const card = elements.getElement(CardElement);
  const result = await stripe.createToken(card);
  if (result.error) {
    console.log(result.error.message);
  } else {
    console.log(result.token);
    // pass the token to your backend API
  }
};

Stripe will make a token that speaks to the client's card subtleties. This procedure is called tokenization. 

When you have the token item, call your backend API administration to process the installment. 

Following is an example Node.js code to manage you through it.

const stripe = require('stripe')(STRIPE_SECRET_KEY);

// get the product details
const product = getTheProduct(productId);

stripe.charges.create(
  {
    amount: product.price,
    currency: 'usd',
    source: cardToken.id,
    description: `Payment for ${product.title}`,
    metadta: {
      productId: product.id
    }
  },
  function(err, charge) {
    if(err) new Error("Payment Failed");
    else console.log("Payment Success");
  }

Once you get a successful response from the Stripe server, send the response back to your client application and show a success message.

Complete Source Code

Here is the entire code for your reference.

App.js

import React from "react";
import "./styles.css";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import CheckoutForm from "./CheckoutForm";

const stripePromise = loadStripe("pk_test_35dsdsdrtuHX72SmrvsFqh00Azv3ZaIA");

const App = () => {
  return (
    <div className="App">
      <div className="product">
        <img
          src="https://crowdforgeeks.com"
          alt="Desktop"
          style={{ width: "100%", height: "auto" }}
        />
        <div>
          <Elements stripe={stripePromise}>
            <CheckoutForm />
          </Elements>
        </div>
      </div>
    </div>
  );
};

export default App;

CheckoutForm.js

import React from "react";
import { ElementsConsumer, CardElement } from "@stripe/react-stripe-js";

import CardSection from "./CardSection";

class CheckoutForm extends React.Component {
  handleSubmit = async event => {
    event.preventDefault();

    const { stripe, elements } = this.props;
    if (!stripe || !elements) {
      return;
    }

    const card = elements.getElement(CardElement);
    const result = await stripe.createToken(card);
    if (result.error) {
      console.log(result.error.message);
    } else {
      console.log(result.token);
    }
  };

  render() {
    return (
      <div>
        <div class="product-info">
          <h3 className="product-title">Apple MacBook Pro</h3>
          <h4 className="product-price">$999</h4>
        </div>
        <form onSubmit={this.handleSubmit}>
          <CardSection />
          <button disabled={!this.props.stripe} className="btn-pay">
            Buy Now
          </button>
        </form>
      </div>
    );
  }
}

export default function InjectedCheckoutForm() {
  return (
    <ElementsConsumer>
      {({ stripe, elements }) => (
        <CheckoutForm stripe={stripe} elements={elements} />
      )}
    </ElementsConsumer>
  );
}

CardSection.js

import React from "react";
import { CardElement } from "@stripe/react-stripe-js";

const CARD_ELEMENT_OPTIONS = {
  style: {
    base: {
      color: "#303238",
      fontSize: "16px",
      fontFamily: "sans-serif",
      fontSmoothing: "antialiased",
      "::placeholder": {
        color: "#CFD7DF"
      }
    },
    invalid: {
      color: "#e5424d",
      ":focus": {
        color: "#303238"
      }
    }
  }
};

function CardSection() {
  return (
    <label>
      Card details
      <CardElement options={CARD_ELEMENT_OPTIONS} />
    </label>
  );
}

export default CardSection;

index.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

styles.css

body {
  margin: 0;
  padding: 0;
}

.App {
  font-family: sans-serif;
  height: 100vh;
  display: flex;
  align-items: center;
}

.StripeElement {
  margin: 15px auto;
  padding: 10px 12px;
  color: #32325d;
  background-color: white;
  border: 1px solid transparent;
  border-radius: 4px;
}

.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}

.product {
  width: 100%;
  max-width: 450px;
  margin: auto;
  box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.4);
  border-radius: 10px;
  overflow: hidden;
}

.btn-pay {
  display: block;
  width: 100%;
  border: none;
  background: linear-gradient(
    135deg,
    rgb(49, 0, 62) 0%,
    rgb(195, 40, 110) 100%
  );
  color: #fff;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
}

.product-info {
  padding: 0 16px;
}

h3.product-title {
  font-size: 28px;
  margin-bottom: 15px;
}

h4.product-price {
  font-size: 24px;
  margin: 0;
  margin-bottom: 30px;
  color: #777;
  font-weight: 500;
}

Conclusion 

Incorporating installment entryways into web applications is a fundamental expertise to have as an engineer now that such a large number of organizations acknowledge installment on the web. With Stripe's customer and server-side libraries, you can make hearty and make sure about applications that are PCI-agreeable. Continuously make sure to never pass card subtleties to your server as it disregards PCI rules. 

I trust this was an enjoyment and extraordinary learning open door for you to comprehend online installment passages. This is only the start. There are a lot increasingly complex ideas, such as taking care of memberships with Stripe, that you can investigate for additional learning.




CFG