How do I charge a one-time $20 payment in Vue3 using Stripe?

Below is an example of how you can complete the integration. The key points are:

1. Collect and Validate Form Data on the Client:
   Validate that your form fields are complete and correct before proceeding with the payment.

2. Token Creation on the Client:
   Once your validations pass, use the vue-stripe-js card element to create a token (as you already did).

3. Send the Token to Your Secure Server:
   Since you must use your secret API key to create a charge, send the token (and any additional validated form data) to a secure backend endpoint. Do not use your secret key on the client side.

4. Charge the Token on the Server:
   On your backend, use the Stripe secret key and the Charges API to create a one-time charge for $20 (2000 cents).

Below is an example implementation:

Client-Side Code (Vue3)

JAVASCRIPTCopied
const pay = () => {
  // Validate other form fields before calling Stripe
  if (!validateMyForm()) {
    console.error("Please complete all required fields!");
    return;
  }

  const cardElement = card.value.stripeElement;

  elms.value.instance.createToken(cardElement).then((result) => {
    if (result.token) {
      // Send token and any additional form data to your server
      fetch("/charge", {
        method: "POST",
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
          token: result.token,
          // include other validated form fields here
          customerEmail: email.value,
          // etc.
        })
      })
        .then((response) => response.json())
        .then((data) => {
          if (data.success) {
            console.log("Payment successful:", data.charge);
          } else {
            console.error("Payment failed:", data.error);
          }
        })
        .catch((error) => console.error("Error processing payment:", error));
    } else {
      console.error("Error creating token:", result.error);
    }
  });
};

function validateMyForm() {
  // Your form validation logic here
  // Return true if form is valid, false otherwise
  return true;
}

Server-Side Code (Node/Express Example)

Make sure to secure this endpoint with proper authentication or other security measures.

JAVASCRIPTCopied
const express = require("express");
const app = express();
const stripe = require("stripe")("your_stripe_secret_key"); // Use your secret key here

app.use(express.json());

app.post("/charge", async (req, res) => {
  const { token, customerEmail } = req.body;

  // Validate additional form info as necessary
  if (!customerEmail) {
    res.status(400).send({ error: "Missing customer email." });
    return;
  }

  try {
    const charge = await stripe.charges.create({
      amount: 2000, // $20 charge in cents
      currency: "usd",
      source: token.id,
      description: `One-time $20 payment from ${customerEmail}`
    });

    res.send({ success: true, charge });
  } catch (error) {
    res.status(500).send({ error: error.message });
  }
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

Recap

• Client: Validate the form, create a token via the card element, then send that token along with any other form data to your server.
• Server: Use the token as the source parameter when creating a charge via the Stripe API. This charge will appear in your Stripe dashboard.

This setup ensures that sensitive operations (like charging a user) are handled securely on your server using your secret API key, while the tokenization process on the client maintains PCI compliance.