Stripe Elements表单未随表单提交Token问题求助

Hey there! Let's get this sorted out for you—submitting the Stripe token alongside your other form data is totally doable, even if you're not super comfortable with JavaScript yet. Here's a step-by-step solution tailored to your code:

Step 1: Add a Hidden Input to Your Form #

First, you need a place to store the Stripe token so it gets sent with the rest of your form fields. Add this hidden input inside your form:

<form id="paymentForm" action="/your-submit-endpoint" method="POST">
  <!-- Your existing form fields (name, email, etc.) go here -->
  <div id="card-element"></div> <!-- This is where Stripe Elements mounts -->
  <input type="hidden" name="stripeToken" id="stripeToken">
  <button type="submit">Submit Payment</button>
</form>

Step 2: Update Your JavaScript Code #

We'll adjust your existing Stripe code to:

• Mount the card element to your page
• Intercept the form submit to generate the token first
• Populate the hidden input with the token before submitting the form

Here's the updated code:

// Initialize Stripe client
var stripe = Stripe($('meta[name="stripe-key"]').attr('content'));
var elements = stripe.elements();

// Create and mount the card element
var card = elements.create('card', {
  hidePostalCode: true,
  style: {
    base: {
      iconColor: '#666EE8',
      color: '#31325F',
      lineHeight: '40px',
      fontWeight: 300,
      fontFamily: 'Helvetica, Arial, sans-serif' // Completed font family for valid syntax
    }
  }
});
card.mount('#card-element'); // Mount to the div we added in the form

// Handle form submission
document.getElementById('paymentForm').addEventListener('submit', function(e) {
  e.preventDefault(); // Stop the form from submitting immediately

  // Generate a token from the card element
  stripe.createToken(card).then(function(result) {
    if (result.error) {
      // Show error to the user (customize this to fit your UI)
      alert('Oops: ' + result.error.message);
    } else {
      // Put the token into the hidden input
      document.getElementById('stripeToken').value = result.token.id;
      // Now submit the form normally—token will be included with other fields
      document.getElementById('paymentForm').submit();
    }
  });
});

Key Things to Note #

• Why this works: We block the form's default submit behavior, generate the token using Stripe's API, store it in the hidden input, then trigger the form submit manually. This ensures the token is present when the form sends data to your server.
• Error handling: The alert is a simple example—you can replace it with a more elegant error display (like showing text below the card element) for better user experience.
• Backend setup: Make sure your server endpoint is set up to receive the stripeToken field, along with your other form data, so you can use it to process the payment with Stripe's API.

内容的提问来源于stack exchange，提问作者albin persson