Question

我遵循了我为Java中的POC创建的Stripe documentation for a simple checkout scenario，但无法使错误处理正常工作。

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;
}
});

我的页面上有以下div：

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

如果插入无效的sku_123，我看不到错误消息出现。

我确定正在执行JavaScript，因为如果输入正确的sku，则会重定向到结帐页面。

由于我插入了一些日志记录却从未看到过日志消息，因此似乎还没有在成功执行redirectToCheckout时执行该函数。正确和错误的SKU代码都是如此。

有人知道这应该如何工作吗？

我怀疑Stripe JS函数中可能存在错误，或者示例代码/文档不正确？

Answer 1

我认为示例代码可以进行一些改进。

在当前的示例代码中，它们处理的错误情况不太可能发生，因为此时会发生（当您尝试重定向到结帐时），因为当您尝试加载条带脚本时，该代码实际上会失败。
我在控制台中看到的错误（当sku或计划ID无效时）为Uncaught (in promise)。这意味着从承诺内部抛出了未处理的错误，导致承诺被拒绝，并且没有定义的catch函数。参见此Promise Error handling documentation。

我认为处理所有可能的错误的代码应如下所示：

<!-- 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 (result.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>

错误情况1 ：这是针对redirectToCheckout内部正确处理的错误，我们可以假定正在返回一条用户友好的错误消息。

错误情形2 ：这是针对未处理的错误-从redirectToCheckout引发的错误-例如sku或计划ID未知的集成错误。也许以用户友好的方式处理集成错误并不重要，但我认为这是因为，如果非开发人员正在创建产品并遇到此问题，他们可能不知道要查看Javascript控制台来查找其错误消息。 / p>

错误情形3 ：这是针对其他任何问题，甚至是编译错误或在Stripe服务器不可用且无法加载Stripe JS文件的网络错误。希望此错误永远不会真正发生，并且可以省略此try / catch。

我希望这对某人有帮助...

如何处理“ redirectToCheckout”的条带错误？

1 个答案: