如何處理“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 可以省略。

我希望這可以幫助某人...