📖 Stripe Frontend Integration Guide

1️⃣ Install Stripe.js

Add Stripe library in your HTML file:

<script src="https://js.stripe.com/v3/"></script>

---

2️⃣ Setup Stripe and Card Element

<form id="payment-form">
  <!-- Stripe Card Input -->
  <div id="card-element"></div>
  <button id="submit">Add Card</button>
</form>

<script>
    // Initialize Stripe with your Publishable Key
    const stripe = Stripe("pk_test_xxx"); // replace with real publishable key

    // Create an instance of Elements
    const elements = stripe.elements();

    // Create a card input field
    const cardElement = elements.create("card");
    cardElement.mount("#card-element");
</script>

---

3️⃣ Create Payment Method on Form Submit

const form = document.getElementById("payment-form");

form.addEventListener("submit", async (e) => {
    e.preventDefault();

    // Step 1: Create payment method from card input
    const {paymentMethod, error} = await stripe.createPaymentMethod({
        type: "card",
        card: cardElement,
    });

    if (error) {
        alert(error.message);
        return;
    }

    console.log("✅ Payment Method ID:", paymentMethod.id);

    // Step 2: Send Payment Method ID to backend
    const response = await fetch("/api/payment-method/add", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Accept": "application/json",
            "X-CSRF-TOKEN": "{{ csrf_token() }}" // for Laravel
        },
        body: JSON.stringify({
            payment_method_id: paymentMethod.id
        }),
    });

    const data = await response.json();
    if (data.status) {
        alert("Card added successfully!");
    } else {
        alert("Error: " + data.message);
    }
});

---

4️⃣ Workflow Summary

1. User enters card info in Stripe input.
2. stripe.createPaymentMethod generates a payment_method.id.
3. This ID is sent to Laravel backend (/api/payment-method/add).
4. Backend attaches the card to the customer and sets as default.

---

⚡ Tip:
Always use Publishable Key on frontend, never the Secret Key.

full Frontend (JavaScript - Stripe.js)

Stripe er official way hocche client side e Payment Method create kora, then backend e pathano.

<!-- Stripe JS Load -->
<script src="https://js.stripe.com/v3/"></script>

<form id="payment-form">
  <div id="card-element"></div>
  <button id="submit">Add Card</button>
</form>

<script>
    const stripe = Stripe("pk_test_xxx"); // ✅ Stripe publishable key
    const elements = stripe.elements();
    const cardElement = elements.create("card");
    cardElement.mount("#card-element");

    const form = document.getElementById("payment-form");

    form.addEventListener("submit", async (e) => {
        e.preventDefault();

        // Step 1: Create payment method from card input
        const {paymentMethod, error} = await stripe.createPaymentMethod({
            type: "card",
            card: cardElement,
        });

        if (error) {
            alert(error.message);
            return;
        }

        // Step 2: Send payment method id to backend
        const response = await fetch("/api/payment-method/add", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "X-CSRF-TOKEN": "{{ csrf_token() }}"
            },
            body: JSON.stringify({
                payment_method_id: paymentMethod.id
            }),
        });

        const data = await response.json();
        console.log(data);
        if (data.status) {
            alert("Card added successfully!");
        } else {
            alert("Error: " + data.message);
        }
    });
</script>

-- 👉 Ei part e Stripe card input box ashbe, user card entry korbe → paymentMethod.id generate hobe → backend e pathabo.