條紋“狀態”：“requires_payment_method”，

Question

使用 Jquery，條帶集成工作得非常好。

我正在嘗試在沒有 jquery 的情況下集成腳本，但我遇到了問題，因為付款不完整：“狀態”：“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>

Answer 1

您的 Javascript 代碼看起來正在創建條紋令牌，這是傳統方法。

由於您使用的是 PaymentIntent，您應該按照本指南（ https://stripe.com/docs/payments/accept-a-payment#set-up-stripe-elements ）安裝card元素，然后使用 PaymentIntents 的客戶端-秘密並在您的腳本中調用confirmCardPayment()以“確認”PaymentIntent，這將導致創建費用。

Answer 2

Stripe 的 PaymentIntent object 允許您從客戶那里收取付款。

創建 SetupIntent 時，它的狀態為requires_payment_method ，直到附加了付款方式。

要成功設置，請遵循本網站上的官方文檔： https://stripe.com/docs/api/payment_intents/create