ลองเล่น Stripe payment gateway กัน

version: "3.7"

services:
  db:
    image: mysql:latest
    container_name: mysql_db
    command: --default-authentication-plugin=mysql_native_password
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: tutorial
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
    networks:
      - my_network

  phpmyadmin:
    image: phpmyadmin/phpmyadmin:latest
    container_name: phpmyadmin
    environment:
      PMA_HOST: db
      PMA_PORT: 3306
      PMA_USER: root
      PMA_PASSWORD: root
    ports:
      - "8080:80"
    depends_on:
      - db
    networks:
      - my_network

networks:
  my_network:
    driver: bridge

volumes:
  mysql_data:
    driver: local

const cors = require("cors");
const express = require("express");
const mysql = require("mysql2/promise");
const { v4: uuidv4 } = require("uuid");

require("dotenv").config();

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

const app = express();
const port = 8000;

// This is your Stripe CLI webhook secret for testing your endpoint locally.
const endpointSecret = "xxxx"; // เอาได้จากเว็บของ Stripe

// Middlewares here
app.use(cors());

let conn = null;

const initMySQL = async () => {
  conn = await mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "root",
    database: "tutorial",
  });
};

/* code ที่เขียนด้านล่างนี้จะเป็นการเพิ่มเติมส่วนจากตรงนี้ */

// Listen
app.listen(port, async () => {
  await initMySQL();
  console.log("Server started at port 8000");
});

app.post("/api/checkout", express.json(), async (req, res) => {
  const { product, information } = req.body;
  try {
    // create payment session
    const orderId = uuidv4();
    const session = await stripe.checkout.sessions.create({
      payment_method_types: ["card"],
      line_items: [
        {
          price_data: {
            currency: "thb",
            product_data: {
              name: product.name,
            },
            unit_amount: product.price * 100,
          },
          quantity: product.quantity,
        },
      ],
      mode: "payment",
      success_url: `http://localhost:8888/success.html?id=${orderId}`,
      cancel_url: `http://localhost:8888/cancel.html?id=${orderId}`,
    });

    // create order in database (name, address, session id, status)
    console.log("session", session);

    const data = {
      name: information.name,
      address: information.address,
      session_id: session.id,
      status: session.status,
      order_id: orderId,
    };

    const [result] = await conn.query("INSERT INTO orders SET ?", data);

    res.json({
      message: "Checkout success.",
      id: session.id,
      result,
    });
  } catch (error) {
    console.error("Error creating user:", error.message);
    res.status(400).json({ error: "Error payment" });
  }
});

app.post("/webhook", express.raw({ type: "application/json" }), async (req, res) => {
  const sig = req.headers["stripe-signature"];

  let event;

  try {
    event = stripe.webhooks.constructEvent(req.body, sig, endpointSecret);
  } catch (err) {
    res.status(400).send(`Webhook Error: ${err.message}`);
    return;
  }

  // Handle the event
  switch (event.type) {
    case "checkout.session.completed":
      const paymentSuccessData = event.data.object;
      const sessionId = paymentSuccessData.id;

      const data = {
        status: paymentSuccessData.status,
      };

      const result = await conn.query("UPDATE orders SET ? WHERE session_id = ?", [
        data,
        sessionId,
      ]);

      console.log("=== update result", result);

      // event.data.object.id = session.id
      // event.data.object.customer_details คือข้อมูลลูกค้า
      break;
    default:
      console.log(`Unhandled event type ${event.type}`);
  }

  // Return a 200 response to acknowledge receipt of the event
  res.send();
});

app.get("/order/:id", async (req, res) => {
  const orderId = req.params.id;
  try {
    const [result] = await conn.query("SELECT * from orders where order_id = ?", orderId);
    const selectedOrder = result[0];
    if (!selectedOrder) {
      throw {
        errorMessage: "Order not found",
      };
    }
    res.json(selectedOrder);
  } catch (error) {
    console.log("error", error);
    res.status(404).json({ error: error.errorMessage || "System error" });
  }
});

const stripe = Stripe("...");

const placeorder = async (data) => {
  try {
    const requestData = {
      product: {
        name: "test",
        price: 200,
        quantity: 1,
      },
      information: {
        name: data.name,
        address: data.address,
      },
    };

    const response = await axios.post("http://localhost:8000/api/checkout", requestData);
    const session = response.data;

    stripe.redirectToCheckout({
      sessionId: session.id,
    });
  } catch (error) {
    console.log("error", error);
  }

  return null;
};

... (ย่อ head)
<body>
  <div>
    Checkout
    <div>Name <input type="text" name="name" /></div>
    <div>
      Address
      <div>
        <textarea name="address"></textarea>
      </div>
    </div>

    <button id="checkout">Checkout</button>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>
  <script src="https://js.stripe.com/v3/"></script>
  <script src="./main.js"></script>
  <script>
    checkout.addEventListener("click", async () => {
      const name = document.querySelector("input[name=name]").value;
      const address = document.querySelector("textarea[name=address]").value;

      await placeorder({
        name,
        address,
      });
    });
  </script>
</body>
...

... (ย่อ head)
<body>
  จ่ายเงินสำเร็จ

  <div>
    <div>ชื่อ: <span id="name"></span></div>
    <div>ที่อยู่: <span id="address"></span></div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.4.0/axios.min.js"></script>

  <script>
    window.onload = async () => {
      const urlParams = new URLSearchParams(window.location.search);
      const orderId = urlParams.get("id");
      const response = await axios.get(`http://localhost:8000/order/${orderId}`);
      const orderData = response.data;
      if (orderData.status !== "complete") {
        window.location.href = "http://localhost:8888/cancel.html";
      }
      document.getElementById("name").innerText = orderData.name;
      address.innerText = orderData.address;
    };
  </script>
</body>

... (ย่อ head)
<body>
  จ่ายเงินล้มเหลว
</body>