How do I handle stripe errors for “redirectToCheckout”?

Question

I have followed the Stripe documentation for a simple checkout scenario that I'm creating for a POC in Javascript and I cannot get the error handling to work.

stripe.redirectToCheckout({
  items: [
    // Replace with the ID of your SKU
    {sku: 'sku_123', quantity: 1}
  ],
  successUrl: 'https://example.com/success',
  cancelUrl: 'https://example.com/cancel',
}).then(function (result) {
if (result.error) {
    // If `redirectToCheckout` fails due to a browser or network
    // error, display the localized error message to your customer.
    var displayError = document.getElementById('error-message');
    displayError.textContent = result.error.message;
}
});

I have the following div on my page:

<div id="error-message"></div>

If I insert an invalid sku_123 I don't see the error message appear.

I'm sure the javascript is being executed because if I enter the correct sku then I get redirected to the checkout page.

It doesn't even seem like the function is being executed on a successful execution of redirectToCheckout because I inserted some logging and never saw the log messages. This is true for both correct and incorrect sku codes.

Does anyone know how this is supposed to work?

I suspect there may be a bug in the Stripe JS function or the example code/documentation is incorrect?

Answer 1

I think the sample code could do with a couple of improvements.

1. The error case they handle, in the current example code, is unlikely to happen at that point (when you try redirect to checkout) because the code will fail when you try load the stripe script.

2. The error I saw in the console (when the sku or plan id was invalid) was Uncaught (in promise) . This means that an unhandled error is being thrown from inside the promise, causing the promise to be rejected, and that there is no defined catch function. See this Promise Error handling documentation .

This is what I think code that handles all possible errors should look like:

<!-- Load Stripe.js on your website. -->
<script src="https://js.stripe.com/v3"></script>

<!-- Create a button that your customers click to complete their purchase. Customize the styling to suit your branding. -->
<button
  style="background-color:#6772E5;color:#FFF;padding:8px 12px;border:0;border-radius:4px;font-size:1em"
  id="checkout-button"
  role="link"
>
  Checkout
</button>

<div id="error-message"></div>

<script>
(function() {
  try {
    var stripe = Stripe('pk_test_xxxxxx');

    var checkoutButton = document.getElementById('checkout-button');
    checkoutButton.addEventListener('click', function () {
      stripe.redirectToCheckout({
        items: [{sku: 'sku_xxxx', quantity: 1}],
        successUrl: 'https://www.example.com/success',
        cancelUrl: 'https://www.example.com/canceled',
      })
      .then(function (result) {
        if (result.error) {
          // Error scenario 1
          // If `redirectToCheckout` fails due to a browser or network
          // error, display the localized error message to your customer.
          displayError(result.error.message);
        }
      }).catch(function (error) {
        if (error) {
          // Error scenario 2
          // If the promise throws an error
          displayError("We are experiencing issues connecting to our"
          + " payments provider. " + error);
        }
      });
    });
  } catch (error) {
    // Error scenario 3
    // If there is no internet connection at all
    displayError("We are experiencing issues connecting to our"
    + " payments provider. You have not been charged. Please check"
    + " your internet connection and try again. If the problem"
    + " persists please contact us.");
  }
})();
function displayError(errorMessage) {
  var displayError = document.getElementById('error-message');
  displayError.textContent = errorMessage;
}
</script>

Error Scenario 1 : this is for errors handled properly inside redirectToCheckout where we can assume a user friendly error message is being returned.

Error Scenario 2 : this is for unhandled errors - errors thrown from redirectToCheckout - such as integration errors where the sku or plan id is unknown. Perhaps it's not important to handle integration errors in a user friendly way, but in my opinion it is because if a non-developer is creating products and encounters this issue they may not know to look at the Javascript Console to find their error message.

Error Scenario 3 : this is for any other issue, even compilation errors, or network errors where the Stripe server is unavailable and the Stripe JS file cannot be loaded. Hopefully this error never actually happens and this try/catch could be omitted.

I hope that this helps someone...