Элементы Stripe выбрасывают «Необработанный отказ от обещания» - PullRequest
Новая
       0

Элементы Stripe выбрасывают «Необработанный отказ от обещания»

0 голосов
/ 28 марта 2020

Я получаю эту ошибку, когда пытаюсь создать страницу оформления заказа с использованием Stripe Elements, в соответствии с документами здесь: https://stripe.com/docs/payments/save-during-payment

Ошибка: необработанное отклонение обещания: IntegrationError: мы могли бы не получить данные из указанного элемента. Убедитесь, что элемент, который вы пытаетесь использовать, все еще установлен. 

<html>

<head>
  <title>Checkout</title>
  <script src="https://js.stripe.com/v3/"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <style>
        /**
        * The CSS shown here will not be introduced in the Quickstart guide, but shows
        * how you can use CSS to style your Element's container.
        */
        .StripeElement {
        box-sizing: border-box;

        height: 40px;

        padding: 10px 12px;

        border: 1px solid transparent;
        border-radius: 4px;
        background-color: white;

        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
        }

        .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
        }

        .StripeElement--invalid {
        border-color: #fa755a;
        }

        .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
        }
    </style>

</head>

<script>
    // Set your publishable key: remember to change this to your live publishable key in production
    var stripe = Stripe('%%key%%');
    var elements = stripe.elements();
</script>

<div id="card-element">
  <!-- Elements will create input elements here -->
</div>

<!-- We'll put the error messages in this element -->
<div id="card-errors" role="alert"></div>

<button id="submit">Pay</button>

<script>

    var clientSecret = '%%clientSecret%%';

    // Set up Stripe.js and Elements to use in checkout form
    var style = {
      base: {
        color: "#32325d",
      }
    };

    var card = elements.create("card", { style: style });
    card.mount("#card-element");

    card.addEventListener('change', function(event) {
      var displayError = document.getElementById('card-errors');
      if (event.error) {
        displayError.textContent = event.error.message;
      } else {
        displayError.textContent = '';
      }
    });

    stripe.confirmCardPayment(clientSecret, {
      payment_method: {
        card: card,
        billing_details: {
          name: 'Jenny Rosen'
        }
      },
      setup_future_usage: 'off_session'
    }).then(function(result) {
      if (result.error) {
        // Show error to your customer
        console.log(result.error.message);
      } else {
        if (result.paymentIntent.status === 'succeeded') {
          // Show a success message to your customer
          // There's a risk of the customer closing the window before callback execution
          // Set up a webhook or plugin to listen for the payment_intent.succeeded event
          // to save the card to a Customer

          // The PaymentMethod ID can be found on result.paymentIntent.payment_method
        }
      }
    });


</script>

</html>

1 Ответ

0 голосов
/ 28 марта 2020

Как упоминалось в комментарии, ваша интеграция вызывает confirmCardPayment() сразу после монтирования элемента, поэтому он запускается до монтирования card элемента, что приводит к ошибке.

У вас есть кнопка "Оплатить" установлена, но она еще не подключена. Создайте обработчик кликов для кнопки «Оплатить» и переместите вызов confirmCardPayment в этот обработчик кликов.

...