Stripe Elements throw 'Unhandled Promise Rejection'

Question

I keep getting this error when trying to create a checkout page using Stripe Elements, according to the docs here: https://stripe.com/docs/payments/save-during-payment

Error: Unhandled Promise Rejection: IntegrationError: We could not retrieve data from the specified Element. Please make sure the Element you are attempting to use is still mounted.

<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

As mentioned in the comment, your integration is calling confirmCardPayment() right after the Element is mounted, so it is being triggered before the card Element has mounted, leading to the error.

You have a "Pay" button set up but that isn't hooked up yet. Create a click handler for the "Pay" button and move the confirmCardPayment call into that click handler.

Stripe Elements throw 'Unhandled Promise Rejection'

Question

1 answers

solution1
0 2020-03-28 00:43:44

Stripe Elements throw 'Unhandled Promise Rejection'

Question

1 answers

solution1 0 2020-03-28 00:43:44

solution1
0 2020-03-28 00:43:44