Pricing

import React, { useRef } from "react";
import { isAuth } from "../helpers/auth";
import { useNavigate } from "react-router-dom";
import axios from 'axios';
import styles from "./Pricing.module.scss";
import ScriptTag from "react-script-tag";
import {loadStripe} from '@stripe/stripe-js'
const stripePromise = loadStripe('pk_test_51dsdsdsdsds');
export const Pricing = () => {
  const buttonValue = useRef();

  const navigate = useNavigate();

  const setBtnValue = (e) => {
    buttonValue.current = e.target.value;
  };
  const checkoutHandler = async (e) => {
    const btnValue = buttonValue.current;
    const stripe = await stripePromise;
    console.log(btnValue);
     axios
     .post( '/api/checkout' , {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      withCredentials:true,
      credentials: "include",
      body:
        btnValue,
    })
      .then((result) => result.json())
      .then(({ sessionID }) => stripe.redirectToCheckout({ sessionID }))
      .then((result) => {
        console.log(result.error.message);
      });
  };
  return (
    <div className={styles.container}>
      {isAuth() ? null : navigate("/login")}
      <ScriptTag isHydrating = {false} type = "text/javascript" src = 'https://js.stripe.com/v3/'/>
      <h2 className={styles.heading}>Choose</h2>
      <div className={styles.priceRow}>
        <div className={styles.priceCol}>
          <p>Starter</p>
          <h3>
            50$ <span> / month</span>
          </h3>
          <ul>
            <li>1 Website</li>
            <li>10 GB Disk Space</li>
            <li>Free Email Address</li>
            <li>No SSL certificate</li>
            <li>Limited Support</li>
          </ul>
          <form onSubmit={checkoutHandler}>
            <button
              value="price_1"
              type="submit"
              className="btn"
              name="product"
              onClick={setBtnValue}
            >
              Upgrade Now
            </button>
          </form>
        </div>
        <div className={styles.priceCol}>
          <p>Advanced</p>
          <h3>
            100$ <span> / month</span>
          </h3>
          <ul>
            <li>1 Website</li>
            <li>10 GB Disk Space</li>
            <li>Free Email Address</li>
            <li>No SSL certificate</li>
            <li>Limited Support</li>
          </ul>
          <form onSubmit={checkoutHandler}>
            <button
              value="price_1Kb"
              type="submit"
              className="btn"
              name="product"
              onClick={setBtnValue}
            >
              Upgrade Now
            </button>
          </form>
        </div>
        <div className={styles.priceCol}>
          <p>Premium</p>
          <h3>
            200$ <span> / month</span>
          </h3>
          <ul>
            <li>1 Website</li>
            <li>10 GB Disk Space</li>
            <li>Free Email Address</li>
            <li>No SSL certificate</li>
            <li>Limited Support</li>
          </ul>
          <form onSubmit={checkoutHandler}>
            <button
              value="price_1Kb"
              type="submit"
              className="btn"
              name="product"
              onClick={setBtnValue}
            >
              Upgrade Now
            </button>
          </form>
        </div>
      </div>
    </div>
  );
};