Analyser payment and relative behavoir

[tesshsu]

sample : https://github.com/mukeshphulwani66/mystore2021-Ecommerce-nextjs

https://blog.logrocket.com/integrating-stripe-react-stripe-js/ npm i @stripe/stripe-js @stripe/react-stripe-js npm install --save @stripe/react-stripe-js @stripe/stripe-js The useStripe and useElements Hooks

loadStripe -> useStripe -> useElements -> ElementsConsumer

const stripe = loadStripe(
    "pk_test_*****"(strip publishable key)
  );

import React, { useState } from "react";
import {
  Elements,
  CardElement,
} from "@stripe/react-stripe-js";
import { loadStripe } from "@stripe/stripe-js";
import "./App.css";
const App = () => {
  const stripe = loadStripe(
    "pk_test_*****"
  );
  return (
    <Elements stripe={stripe}>
      <CheckoutForm />
    </Elements>
  );
};
function CheckoutForm() {
  const [isPaymentLoading, setPaymentLoading] = useState(false);
  return (
    <div
      style={{
        padding: "3rem",
      }}
    >
      <div
        style={{
          maxWidth: "500px",
          margin: "0 auto",
        }}
      >
        <form
          style={{
            display: "block",
            width: "100%",
          }}
        >
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            <CardElement
              className="card"
              options={{
                style: {
                  base: {
                    backgroundColor: "white"
                  } 
                },
              }}
            />
            <button
              className="pay-button"
              disabled={isPaymentLoading}
            >
              {isPaymentLoading ? "Loading..." : "Pay"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

[tesshsu]

cle public de test: pk_test_51HgmzIBjqnSC21bhUov33uWhuXhCFQBnwRcy1pfJgKmXv42GkV7vLZJ0uNR26SdEUomqGHDnGhCXvxn0MY6GjIg100F67arXkO

security kwy: sk_test_51HgmzIBjqnSC21bhuUPX8DMnH1ynu6iKdvoVMhjUqKgdVqDGKmrBximAok0WD9ypSgk6b3uq1ZE1uqsEEoM4PKzP00iDeWHIKx

test card number 4242 4242 4242 4242

https://stripe.com/docs/testing

[tesshsu]

https://dev.to/notrab/working-with-stripe-payment-intents-and-next-js-106h

[tesshsu]

1. checkout.js page create
2. server side : import stripe -> Create a Payment Intent
3. client side: paymentMethod -> checkout.js

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

4. checkoutForm: include checkoutForm in Elements

https://github.com/notrab/nextjs-stripe-intents