Integrate a Stripe Payment with React

// in a terminal
npx create-react-app react-stripe
cd react-stripe
yarn add @stripe/stripe-js @stripe/react-stripe-js axios

// App.js
import { loadStripe } from "@stripe/stripe-js";
import { Elements } from "@stripe/react-stripe-js";
import PaymentForm from "./PaymentForm"; // not implemented yet

// when you toggle to live mode, you should add the live publishale key.
const stripePromise = loadStripe(STRIPE_PK_TEST);

function App() {
  return (
    <div className="App">
      {/* Elements is the provider that lets us access the Stripe object. 
         It takes the promise that is returned from loadStripe*/}
      <Elements stripe={stripePromise}>
        <PaymentForm /> 
      </Elements>
    </div>
  );
}

export default App;

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

const PaymentForm = () => {

  const handleSubmit = async (e) => {
    e.preventDefault();
    // stripe code here
  };
  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>BUY</button>
    </form>
  );
};

export default PaymentForm;

//PaymentForm.js
import { CardElement, useStripe, useElements } from "@stripe/react-stripe-js";
import axios from "axios";

const PaymentForm = () => {
  const stripe = useStripe();
  const elements = useElements();
  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!stripe || !elements) {
      // Stripe.js has not loaded yet. Make sure to disable
      // form submission until Stripe.js has loaded.
      return;
    }
    // Get a reference to a mounted CardElement. Elements knows how
    // to find your CardElement because there can only ever be one of
    // each type of element.
    const cardElement = elements.getElement(CardElement);

    // use stripe.createToken to get a unique token for the card
    const { error, token } = await stripe.createToken(cardElement);

    if (!error) {
      // Backend is not implemented yet, but once there isn’t any errors,
      // you can pass the token and payment data to the backend to complete
      // the charge
      axios
        .post("http://localhost:5000/api/stripe/charge", {
          token: token.id,
          currency: "EGP",
          price: 1000, // or 10 pounds (10*100). Stripe charges with the smallest price unit allowed
        })
        .then((resp) => {
          alert("Your payment was successful");
        })
        .catch((err) => {
          console.log(err);
        });
    } else {
      console.log(error);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <CardElement />
      <button>PAY</button>
    </form>
  );
};

export default PaymentForm;

 yarn add express stripe dotenv cors
 yarn add --dev concurrently nodmon

  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "start": "node server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },

require("dotenv").config();
const express = require("express");
const app = express();
const cors = require("cors");

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(cors());

const PORT = process.env.PORT || 5000;

const stripe = require("stripe")(env.process.STRIPE_SECRET_KEY_TEST);

// same api we used in the frondend
app.post("/api/stripe/charge", async (req, resp) => {
  const { token, currency, price } = req.body;
  const charge = await stripe.charges.create({
    amount: price,
    currency,
    source: token,
  });

  if (!charge) throw new Error("charge unsuccessful");
});

app.listen(PORT, () => {
  console.log(`Server running on port: ${PORT}`);
});