Javascript 如果付款成功或失败，如何在重定向页面顶部显示横幅

我已经集成了我的stripe客户端签出。正如您在代码中看到的，有一个部分（successUrl和cancelUrl），它在其中重定向用户（我已经把它删除了）

如果付款成功，它将在重定向页面上显示一条绿色横幅，文本为“successful payment”（成功付款），用户可以关闭横幅。如果付款失败，它也会这样做，但它是一条红色横幅，并显示“payment cancelled”（付款已取消）

如何实现这一点

(function() {
  var stripe = Stripe('pk_test_xxxxxxxxxxxxxxxxxxxxxP');

  var checkoutButton = document.getElementById('checkout-button-sku_xxxxxxxxxx');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_xxxxxxxx', quantity: 1}],

      // Do not rely on the redirect to the successUrl for fulfilling
      // purchases, customers may not always reach the success_url after
      // a successful payment.
      // Instead use one of the strategies described in
      // https://stripe.com/docs/payments/checkout/fulfillment
      successUrl: window.location.protocol + '//www.xxx-xxx.com/xxx/xx-xxx',
      cancelUrl: window.location.protocol + '//www.xxx-xxx.com/xxx/xx-xxx',
    })
    .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;
      }
    });
  });

---

向要重定向的url添加一个参数，并在目标页面中读取该参数，然后根据url参数显示适当的横幅。

您可以重定向到带有参数的页面

www.xxx-xxx.com/xxx/xx-xxx?success=true

然后在重定向页面上使用javaScript

let url = new URL(window.location.href);
let success = url.searchParams.get("success");
if(success) {
  document.getElementById('stripe-info').classList.add('visible')
}

Html

---

您是否将页面重定向到项目的一部分或某个外部网站？

<div id="stripe-info">Stripe payment successful</div>

#stripe-info {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
   // then background color, width etc.
}
#stripe-info.visible {
  display: block;
}