SECRET_KEY

PUBLISHABLE_KEY

PRODUCT_ID

CUSTOMER_ID

Discover how to integrate Stripe API to accept and manage online payments, create recurring charges, and handle payments in React apps using Stripe SDKs and libraries.

stripe.tar.gz

code-widget-job

app-demo

Stripe helps developers to accept payments online. It allows you to keep track of payments, search past payments, create recurring charges, and keep track of customers. Stripe API helps to access the Stripe functionalities.

This course is designed for learners who want to learn about Stripe SDKs and libraries (both client and server) to enable payments in their apps and expand their skill set. This course provides React applications to help you learn how to create a checkout experience and handle various payment scenarios with Stripe.

Integration With Stripe API

Now that the server is ready for handling payments, let's see how to build the checkout flow on the client-side. For this, we'll focus on the ***frontend*** folder of the application directory.

import { useHistory } from "react-router";
import { Card, CardBody, CardHeader, CardTitle, Button } from "shards-react";

import { useCheckout } from "../checkout";

const CartPage = () => {
  const { products, amount } = useCheckout();

  const history = useHistory();

  const handleNavigation = () => history.push("/billing-details");

  return (
    <Card className="app-card">
      <CardHeader>
        <CardTitle>Your Cart</CardTitle>
      </CardHeader>
      <CardBody>
        {products.map((product) => (
          <div key={product.id} className="cart-item">
            <span className="title">{product.title}</span>
            <span className="price">₹{product.price}</span>
          </div>
        ))}
        <div className="cart-item">
          <span className="cart-total">Order Total ₹{amount}</span>
        </div>
        <hr />
        <Button block onClick={handleNavigation}>
          <span className="font-weight-bold">Add Billing details</span>
        </Button>
      </CardBody>
    </Card>
  );
};

export default CartPage;

import {
  Card,
  CardBody,
  CardHeader,
  CardTitle,
  FormGroup,
  Button,
} from "shards-react";
import { useStripe, useElements, CardElement } from "@stripe/react-stripe-js";
import { useCheckout } from "../checkout";

const CARD_ELEMENT_OPTIONS = {
  style: {
    base: {
      color: "#495057",
      fontFamily: "inherit",
      fontSmoothing: "antialiased",
      fontSize: "16px",
      "::placeholder": {
        color: "#6c757d",
      },
    },
    invalid: {
      color: "#dc3545",
      iconColor: "#dc3545",
    },
  },
};

const PayPage = () => {
  const stripe = useStripe();
  const elements = useElements();

  const { checkoutSecret, billingDetails } = useCheckout();

  const handlePayment = async () => {
    if (!stripe || !elements) {
      return;
    }

    const result = await stripe.confirmCardPayment(checkoutSecret, {
      payment_method: {
        card: elements.getElement(CardElement),
        billing_details: billingDetails,
      },
    });

    if (result.error) {
      alert(result.error.message);
    } else {
      // The payment has been processed!
      if (result.paymentIntent.status === "succeeded") {
        alert("Payment successful");
        window.location.href = "/checkout/cart";
      }
    }
  };

  return (
    <Card className="app-card">
      <CardHeader>
        <CardTitle>Complete Payment</CardTitle>
      </CardHeader>
      <CardBody>
        <FormGroup>
          <div>
            <CardElement options={CARD_ELEMENT_OPTIONS} />
          </div>
        </FormGroup>
        <Button
          disabled={!stripe}
          block
          className="mt-4"
          onClick={handlePayment}
        >
          <span className="font-weight-bold">Pay</span>
        </Button>
      </CardBody>
    </Card>
  );
};

export default PayPage;

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import "shards-ui/dist/css/shards.min.css";
import { Container } from "shards-react";
import { Elements } from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";

import "./App.css";

import BillingDetailsPage from "./pages/BillingDetails";
import CartPage from "./pages/Cart";
import PayPage from "./pages/Pay";

import { CheckoutProvider } from "./checkout";

const stripePromise = loadStripe(<stripe publishable key>);

function App() {
  return (
    <Elements stripe={stripePromise}>
      <CheckoutProvider>
        <div className="App">
          <Router basename="/checkout">
            <Container className="app-container">
              <Switch>
                <Route path="/cart">
                  <CartPage />
                </Route>
                <Route path="/billing-details">
                  <BillingDetailsPage />
                </Route>
                <Route path="/pay">
                  <PayPage />
                </Route>
              </Switch>
            </Container>
          </Router>
        </div>
      </CheckoutProvider>
    </Elements>
  );
}

export default App;

import React from 'react';
import { useReducer, useEffect, createContext, useContext } from "react";
import axios from "axios";

const initialState = {
  checkoutSecret: null,
  products: [],
  amount: null,
  billingDetails: {
    name: "",
    address: "",
    phone: "",
  },
  isLoading: true,
};

const CheckoutContext = createContext(initialState);

const checkoutReducer = (state, action) => {
  switch (action.type) {
    case "UPDATE_CHECKOUT":
      return { ...state, ...action.payload };
    case "LOADED":
      return { ...state, isLoading: false };
    default:
      return { ...state };
  }
};

const _useCheckout = () => {
  const [state, dispatch] = useReducer(checkoutReducer, initialState);

  useEffect(() => {
    axios
      .post(
        `/checkout`,
        {},
        { headers: { Authorization: 2 } }
      )
      .then(({ data }) => dispatch({ type: "UPDATE_CHECKOUT", payload: data }))
      .finally(() => dispatch({ type: "LOADED" }));
  }, []);

  const updateCheckout = (payload) =>
    dispatch({ type: "UPDATE_CHECKOUT", payload });

  return { ...state, updateCheckout };
};

export const CheckoutProvider = ({ children }) => {
  const state = _useCheckout();
  return (
    <CheckoutContext.Provider value={state}>
      {children}
    </CheckoutContext.Provider>
  );
};

export const useCheckout = () => useContext(CheckoutContext);

import { useState } from "react";
import { useHistory } from "react-router";
import {
    Form,
    FormGroup,
    FormInput,
    FormTextarea,
    Card,
    CardBody,
    CardHeader,
    CardTitle,
    Button,
} from "shards-react";
import { useCheckout } from "../checkout";

const BillingDetailsPage = () => {
  const history = useHistory();
  const { billingDetails, updateCheckout } = useCheckout();

  const [billingFormValues, setBillingFormValues] = useState(billingDetails);

  const handleChange = (e) =>
    setBillingFormValues({
      ...billingFormValues,
      [e.target.name]: e.target.value,
    });

  const handleSubmit = () => {
    updateCheckout({ billingDetails: billingFormValues });
    history.push("/pay");
  };

  return (
    <Card className="app-card">
      <CardHeader>
        <CardTitle>Billing Details</CardTitle>
      </CardHeader>
      <CardBody>
        <Form>
          <FormGroup>
            <label htmlFor="username">Name</label>
            <FormInput
              value={billingFormValues.name}
              onChange={handleChange}
              name="name"
              id="name"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="address">Address</label>
            <FormTextarea
              value={billingFormValues.address}
              onChange={handleChange}
              name="address"
              id="address"
            />
          </FormGroup>
          <FormGroup>
            <label htmlFor="phone">Phone</label>
            <FormInput
              value={billingFormValues.phone}
              onChange={handleChange}
              name="phone"
              id="phone"
            />
          </FormGroup>
          <Button block onClick={handleSubmit}>
            <span className="font-weight-bold">Save & Continue</span>
          </Button>
        </Form>
      </CardBody>
    </Card>
  );
};

export default BillingDetailsPage;

React

# Routes for checkout

We have three routes on the frontend:

1. The Cart page (***pages/Cart.jsx***).
2. The Billing Details page (***pages/BillingDetails.jsx***).
3. The Payment page (***pages/Pay.jsx***).

## 1. Cart page

In the ***pages/Cart.jsx*** file, we are simply displaying the cart items and the total order amount of the customer in the `Cart` component.

## 2. Billing Details page

The `BillingDetails` component in the ***pages/BillingDetails.jsx*** file includes a simple form to enter the billing details of the customer. All the form values will be stored in the local state of the component. Once the submit button is clicked, the form values will be stored in the checkout context, and the user will be taken to the payment page.

## 3. Payment page

In ***pages/Pay.jsx***, we import `useStripe`, `useElements`, and `CardElement` from the `@stripe/react-stripe-js` package.

The `useStripe` hook lets us access the stripe object reference that was passed as a prop to the Elements provider component. The `useElements` hook allows us to securely pass the card details collected by an element to the Stripe API. We use the `CardElement` component to accept credentials from the customer. We don't need to create a payment method. Instead, we can directly confirm the payment since we have already created the Payment Intent at the beginning of the checkout flow.

When the pay button is clicked, call the `stripe.confirmCardPayment` method and pass `checkoutSecret` and the billing details. If the Payment Intent status is "succeeded", it means the payment has gone through and we can show a success message to the user.

Get familiar with building routes for a successful checkout journey with Stripe.

Introduction

Understanding Stripe API

Creating a Checkout Experience

Conclusion

Build the Checkout Form

Routes for checkout