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

Question

我已按照Stripe 文档了解我正在为 Javascript 中的 POC 创建的简单结帐方案，但我无法使错误处理正常工作。

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，我会被重定向到结帐页面。

似乎 function 在成功执行 redirectToCheckout 时正在执行，因为我插入了一些日志记录并且从未看到日志消息。 这适用于正确和不正确的 sku 代码。

有谁知道这应该如何工作？

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

Answer 1

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

1. 在当前示例代码中，他们处理的错误情况不太可能在此时发生（当您尝试重定向到结帐时），因为当您尝试加载条带脚本时代码将失败。

2. 我在控制台中看到的错误（当 sku 或计划 ID 无效时）是Uncaught (in promise) 。 这意味着从 promise 内部抛出未处理的错误，导致 promise 被拒绝，并且没有定义的捕获 function。 请参阅此Promise 错误处理文档。

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

<!-- 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>

错误场景 1 ：这是针对在redirectToCheckout中正确处理的错误，我们可以假设正在返回用户友好的错误消息。

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

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

我希望这可以帮助某人...