Блог

Я написал свой код на основе примера, предоставленного 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.

Хорошо, я понял это. Простой 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);
}
  

Прочитайте об обещаниях. Если 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.
});
});