javascript - 如果付款成功或不成功，如何在重定向页面的顶部显示横幅

Question

我已经集成了我的条带客户端结帐。正如您在代码中看到的那样，有一个部分（successUrl 和 cancelUrl 用于重定向用户（我已经 xxx 出来了）。但我还需要做一件事。

如果支付成功，它会在重定向页面上显示一个带有“支付成功”的绿色横幅，用户可以关闭横幅。如果付款不成功，它会做同样的事情，但它是一个红色的横幅，上面写着“付款已取消”。

如何实施？

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

标签： javascriptjqueryhtmlcss

Answer 1

您可以使用参数重定向到页面

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>

CSS

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