Stripe - PaymentIntents handleCardPayment () - как отловить ошибки JS?

Question

Я написал свой код на основе примера, предоставленного Stripe:

var cardButton = document.getElementById('card-button');
var clientSecret = cardButton.dataset.secret;

cardButton.addEventListener('click', function(ev) {
  stripe.handleCardPayment(
    clientSecret, cardElement
  ).then(function(result) {
    if (result.error) {
      // Display error.message in your UI.
    } else {
      // The payment has succeeded. Display a success message.
    }
  });
});

https://stripe.com/docs/stripe-js/reference#stripe-handle-card-payment

У меня проблема, скажем, например, я не предоставляю значение для clientSecret. Когда я отправляю форму, я получаю эту ошибку в консоли:

Как я могу поймать эту ошибку (и другие ошибки JS) и показать ошибку в моем пользовательском интерфейсе? Я пытался поймать его в функции then(), но думаю, что это только для сообщения об ошибках в ответе API.

Answer 1

ОК, я понял это. Простой try / catch - это все, что нужно.

try {
  stripe.handleCardPayment(
    clientSecret, cardElement
  ).then(function(result) {
    if (result.error) {
      // Display error.message in your UI.
    } else {
      // The payment has succeeded. Display a success message.
    }
  });
}
catch(error) {
  console.log(error.message);
}

Answer 2

Читайте об обещаниях.Если stripe.handleCardPayment обрабатывается успешно, он возвращает возвращаемое значение в качестве первого параметра.Если это не так, он отклоняется и отправляется во втором параметре.Вы должны справиться с этим так:

var cardButton = document.getElementById('card-button');
var clientSecret = cardButton.dataset.secret;

cardButton.addEventListener('click', function(ev) {
stripe.handleCardPayment(
clientSecret, cardElement
).then(function(result) {
if (result.error) {
  // Display error.message in your UI.
} else {
  // The payment has succeeded. Display a success message.
}
},
function(err){
console.log('err:', err); // Handle your error here.
});
});