javascript - 条纹“状态”：“requires_payment

问题描述

使用 Jquery，条带集成工作得非常好。

我正在尝试在没有 jquery 的情况下集成脚本，但我遇到了问题，因为付款不完整：“status”：“requires_payment_method”，

我有点受阻，因为我没有找到我的错误并且我按照条纹教程进行操作？

谢谢

[https://stripe.com/docs/payments/accept-a-payment-charges#web][1]

最重要的代码的一部分：

 // have to create intent before loading the javascript because it needs the intent id
          $content .= '<input type="hidden" id="intent_id" value="' . HTML::output($stripe_payment_intent_id) . '" />' .
                      '<input type="hidden" id="secret" value="' . HTML::output($this->intent->client_secret) . '" />';

$content .= '
      <div class="form-row">
';
    $content .= '
        <div id="stripe_table_new_card">
          <div><label for="cardholder-name" class="control-label">' . $this->app->getDef('text_stripe_credit_card_owner') . '</label>
          <div><input type="text" id="cardholder-name" class="form-control" value="' . HTML::output($this->billing['firstname'] . ' ' . $this->billing['lastname']) . '" required></text></div>
        </div>
        <div class="separator"></div>
        <div>
          <label for="card-element" class="control-label">' . $this->app->getDef('text_stripe_credit_card_type') . '</label>
            <div id="card-element"  class="col-md-5 col-12">         
              <div class="group">
                <label>
                  <span>Card number</span>
                  <div id="card-number-element" class="field"></div>
                </label>
                <label>
                  <span>Expiry date</span>
                  <div id="card-expiry-element" class="field"></div>
                </label>
                <label>
                  <span>CVC</span>
                  <div id="card-cvc-element" class="field"></div>
                </label>
              </div>
            </div>
        <!-- Used to display Element errors. -->
          <div id="card-errors" role="alert" class="messageStackError payment-errors"></div>
      </div>
      ';
  $content .= '<input type="hidden" id="city" value="' . $this->billing['city'] . '" />';
  $content .= '<input type="hidden" id="line1" value="' . HTML::output($this->customer['street_address']) . '" />';
  $content .= '<input type="hidden" id="line2" value="' . HTML::output($this->billing['suburb']) . '" />';
  $content .= '<input type="hidden" id="postal_code" value="' . HTML::output($this->customer['postcode']) . '" />';
  $content .= '<input type="hidden" id="state" value="' . $this->getZoneName($this->billing['country']['id'], $this->billing['zone_id'], $this->billing['state']) . '" />';
  $content .= '<input type="hidden" id="country" value="' . $this->billing['country']['iso_code_2'] . '" />';
  $content .= '<input type="hidden" id="email_address" value="' . HTML::output($this->customer['email_address']) . '" />';
  $content .= '<input type="hidden" id="customer_id" value="' . HTML::output($customer_id) . '" />';

现在脚本

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

const stripe = Stripe('{$stripe_publishable_key}');
const elements = stripe.elements();

// Custom styling can be passed to options when creating an Element.
const style = {
  base: {
    // Add your base input styles here. For example:
    fontSize: '16px',
    color: '#32325d',
  },
};

// Create an instance of the card Element.
const card = elements.create('card', {style});

// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');

// Create a token or display an error when the form is submitted.
const form = document.getElementById('payment-form');
form.addEventListener('submit', async (event) => {
  event.preventDefault();

  const {token, error} = await stripe.createToken(card);

  if (error) {
    // Inform the customer that there was an error.
    const errorElement = document.getElementById('card-errors');
    errorElement.textContent = error.message;
  } else {
    // Send the token to your server.
    stripeTokenHandler(token);
  }
});

const stripeTokenHandler = (token) => {
  // Insert the token ID into the form so it gets submitted to the server
  const form = document.getElementById('payment-form');
  const hiddenInput = document.createElement('input');
  hiddenInput.setAttribute('type', 'hidden');
  hiddenInput.setAttribute('name', 'stripeToken');
  hiddenInput.setAttribute('value', token.id);
  form.appendChild(hiddenInput);

  // Submit the form
  form.submit();
}
</script>

标签： javascriptphpstripe-payments

javascript - 条纹“状态”：“requires_payment_method”，

问题描述

解决方案

推荐阅读