Stripe中source参数的取值选择及获取方式咨询

Hey there! Let's break down your Stripe source parameter confusion step by step, with practical examples to get you sorted.

1. Choosing the Right source Value #

First, let's clarify what those values actually mean:

• tok_visa/tok_mastercard: These are test-only tokens—they're meant exclusively for Stripe's test environment (when you use test card numbers like 4242 4242 4242 4242). Never use these in production; they won't work with real payment methods.
• bank_account: This refers to tokens generated for bank account payments (like ACH transfers), used when a user links their bank account instead of a credit/debit card.
• In production, you'll always use a unique token generated specifically for each user's payment method—these test values are just for quick debugging.

2. How to Get a Valid source via Stripe.js #

The key rule here: you can't handle raw credit card data in your backend (it violates PCI compliance). Stripe.js handles all sensitive payment info securely in the browser, then gives you a token to use in your Node.js code. Here's how to set it up:

Step 1: Add Stripe.js to Your Frontend #

First, include Stripe's script in your HTML:

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

Step 2: Create a Secure Payment Element #

Use Stripe Elements to build a safe payment form (no raw card fields on your site):

// Initialize Stripe with your publishable API key
const stripe = Stripe('your_publishable_key_here');
const elements = stripe.elements();

// Create and mount a card input element
const cardElement = elements.create('card');
cardElement.mount('#card-element'); // Mount to a div in your form

Step 3: Generate a Token on Form Submit #

When the user submits the payment form, use Stripe.js to create a token and send it to your backend:

const form = document.getElementById('payment-form');
form.addEventListener('submit', async (e) => {
  e.preventDefault();

  // Create token from the card element
  const { token, error } = await stripe.createToken(cardElement);

  if (error) {
    // Show error to the user (e.g., invalid card number)
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token ID to your /charge endpoint
    fetch('/charge', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ paymentToken: token.id })
    })
    .then(res => res.json())
    .then(data => {
      // Handle success/failure from your backend
      if (data.success) alert('Payment successful!');
      else alert(`Error: ${data.error}`);
    });
  }
});

3. Update Your Node.js Backend Code #

Now modify your /charge route to use the token sent from the frontend:

router.post('/charge', async (req, res, next) => {
  try {
    const amount = 500; // $5.00 (Stripe uses cents as the unit)
    const paymentToken = req.body.paymentToken;

    // Create the charge using the token from Stripe.js
    const charge = await stripe.charges.create({
      amount: amount,
      currency: 'usd',
      source: paymentToken, // This is the valid token from the frontend
      description: 'Example product charge'
    });

    res.json({ success: true, chargeId: charge.id });
  } catch (error) {
    res.status(500).json({ success: false, error: error.message });
  }
});

Quick Pro Tips #

• PCI Compliance: By using Stripe.js, you avoid handling sensitive card data entirely—this keeps you compliant with PCI rules without extra work.
• Modern Alternatives: Stripe now recommends using PaymentIntent and PaymentMethod instead of the older charge/source flow (it supports 3D Secure and more payment methods out of the box). If you're early in your integration, consider switching to that flow for better flexibility.
• Testing: In test mode, you can still use tok_visa directly in your backend to skip frontend setup temporarily, but always switch to real tokens from Stripe.js in production.

内容的提问来源于stack exchange，提问作者Alex Ironside