Question

根据此处的文档，尝试使用Stripe Elements创建结帐页面时，我一直收到此错误：https://stripe.com/docs/payments/save-during-payment

错误：未处理的承诺拒绝：IntegrationError：我们无法从指定的元素检索数据。请确保您尝试使用的Element仍已安装。

<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>

Answer 1

如评论中所述，您的集成在元素挂载后立即调用confirmCardPayment()，因此在card元素挂载之前被触发，从而导致错误。

您已经设置了“付款”按钮，但该按钮尚未连接。为“付款”按钮创建一个点击处理程序，并将confirmCardPayment调用移到该点击处理程序中。

条纹元素抛出“未处理的承诺拒绝”

1 个答案: