如何從條紋 checkout.js 遷移到條紋元素？

Question

我正在嘗試使用元素使用我自己的自定義結帳表單，並合並我的 ajax 函數，它使用StripeCheckout.configure來處理付款，但我想制作一個高度可定制的結帳表單。 我找到了一種通過元素來做到這一點的方法，其中我有以下內容：

<script src="https://js.stripe.com/v3/"></script>
<body>
  <form action="//httpbin.org/post" method="POST">
    <input type="hidden" name="token" />
    <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>
      <label>
        <span>Postal code</span>
        <input id="postal-code" name="postal_code" class="field" placeholder="Regular field placeholder" />
      </label>
    </div>
    <button type="submit">Pay $25</button>
    <div class="outcome">
      <div class="error"></div>
      <div class="success">
        Success! Your Stripe token is <span class="token"></span>
      </div>
    </div>
  </form>
  <script>
    var stripe = Stripe('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
var elements = stripe.elements();

var style = {
  base: {
    iconColor: '#666EE8',
    color: '#31325F',
    lineHeight: '40px',
    fontWeight: 300,
    fontFamily: 'Helvetica Neue',
    fontSize: '15px',

    '::placeholder': {
      color: '#CFD7E0',
    },
  },
};

var cardNumberElement = elements.create('cardNumber', {
  style: style,
  placeholder: 'Custom card number placeholder',
});
cardNumberElement.mount('#card-number-element');

var cardExpiryElement = elements.create('cardExpiry', {
  style: style,
  placeholder: 'Custom expiry date placeholder',
});
cardExpiryElement.mount('#card-expiry-element');

var cardCvcElement = elements.create('cardCvc', {
  style: style,
  placeholder: 'Custom CVC placeholder',
});
cardCvcElement.mount('#card-cvc-element');


function setOutcome(result) {
  var successElement = document.querySelector('.success');
  var errorElement = document.querySelector('.error');
  successElement.classList.remove('visible');
  errorElement.classList.remove('visible');

  if (result.token) {
    // In this example, we're simply displaying the token
    successElement.querySelector('.token').textContent = result.token.id;
    successElement.classList.add('visible');

    // In a real integration, you'd submit the form with the token to your backend server
    var form = document.querySelector('form');
    form.querySelector('input[name="token"]').setAttribute('value', result.token.id);
    form.submit();
  } else if (result.error) {
    errorElement.textContent = result.error.message;
    errorElement.classList.add('visible');
  }
}

cardNumberElement.on('change', function(event) {
  setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
  var options = {
    address_zip: document.getElementById('postal-code').value,
  };
  stripe.createToken(cardNumberElement, options).then(setOutcome);
});

  </script>
</body>

我想集成以下 ajax-stripe 沒有元素做同樣的事情，但使用元素版本。

<form action="{% url 'payments' %}" method="post">
  {% csrf_token %}
  <script src="https://checkout.stripe.com/checkout.js"></script>
  <script>
        CSRF_TOKEN = document.getElementsByName("csrfmiddlewaretoken")[0].value;
        var handler = StripeCheckout.configure({
        key: '{{ key }}',
        locale: 'auto',
        token: function(token) {
          $('.notification-success-wrapper').css('display', 'none');
          $('.notification-danger-wrapper').css('display', 'none');
          $.ajax({
            url: "{% url 'payments' %}",
            method: 'POST',
            data: JSON.stringify({
              token: token.id,
              amount: {{ amount }},
              description: "{{ description }}",
            }),
            headers: {'X-CSRFToken': CSRF_TOKEN},
          })
          .done((res) => {
            console.log(res)
          })
          .fail((err) => {
            console.log(err)
          });
        },
        allowRememberMe: false
      });
      document.getElementById('purchase-btn').addEventListener('click', function(e) {
        // Open Checkout with further options:
        handler.open({
          name: "demoo",
          description: "{{ description }}",
          amount: {{ amount }}
        });
        e.preventDefault();
      });
      // Close Checkout on page navigation:
      window.addEventListener('popstate', function() {
        handler.close();
      });
  </script>
</form>

Answer 1

您在舊版 Checkout token回調中進行的 AJAX 調用，您需要在setOutcome函數中進行相同的調用，其中有result.token並相應地修改它。

如何從條紋 checkout.js 遷移到條紋元素？

問題描述

1 個解決方案

解決方案1
0 2020-09-11 23:19:03

如何從條紋 checkout.js 遷移到條紋元素？

問題描述

1 個解決方案

解決方案1 0 2020-09-11 23:19:03

解決方案1
0 2020-09-11 23:19:03