完成付款流程后不会显示横幅-javascript/html

我有一个问题，显示我的横幅后，在条纹完成付款。基本上，在付款后，url显示一个success参数，根据付款状态，该参数为true或false。url看起来是正确的，并且按照它应该的方式运行，但是横幅没有显示，我似乎不知道为什么在我的javascript中尝试移动相关的代码块之后会出现这种情况

有什么想法吗

     <div id="stripe-info-success">Your payment was successful
    <span class='close'>x</span>
  </div>
   <div id="stripe-info-failure">
    Your payment was cancelled
  <span class='close'>x</span>
</div> 
<button type="button" class="custombtn" id="checkout-button-sku_xxx" role="link">Retake Online Examination</button>


 <script>
(function() {
  var stripe = Stripe('pk_test_xxx');

  var checkoutButton = document.getElementById('checkout-button-sku_xxx');
  checkoutButton.addEventListener('click', function () {
    // When the customer clicks on the button, redirect
    // them to Checkout.
    stripe.redirectToCheckout({
      items: [{sku: 'sku_xxx', 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.metis-online.com/home?success=true',
      cancelUrl: window.location.protocol + '//www.metis-online.com/home?success=false',

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

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


window.onload = function(){
var label = document.getElementsByClassName('close');
for (var i = 0; i<label.length; i++) {
  label[i].onclick = function () {
  var el = (this.parentNode);
  el.parentNode.removeChild(el);
  };
}
};

    </script>

您的付款成功
x
你的付款被取消了
x
重考网上考试
（功能（）{
var stripe=stripe（'pk_test_xxx'）；
var checkburatton=document.getElementById（'checkout-button-sku_xxx'）；
CheckExutton.addEventListener（'click'，函数（）{
//当客户单击按钮时，重定向
//让他们结账。
stripe.redirectToCheckout({
商品：[{sku:'sku_xxx'，数量：1}]，
//不要依靠重定向到successUrl来实现
//购买后，客户可能不会始终在
//成功的付款。
//相反，请使用中描述的其中一种策略
// https://stripe.com/docs/payments/checkout/fulfillment
successUrl:window.location.protocol+'//www.metis-online.com/home？success=true'，
cancelUrl:window.location.protocol+'//www.metis-online.com/home？success=false'，
})
.然后（函数（结果）{
if（result.error）{
//如果“redirectToCheckout”由于浏览器或网络而失败
//错误，向您的客户显示本地化的错误消息。
var displayError=document.getElementById（'error-message'）；
displayError.textContent=result.error.message；
}
让url=新url（window.location.href）；
让success=url.searchParams.get（“success”）；
如果（成功）{
document.getElementById（'stripe-info-success'）.classList.add（'visible'））
}否则{
document.getElementById（'stripe-info-failure'）.classList.add（'visible'））
}
});
});
})();        
window.onload=函数（）{
var label=document.getElementsByClassName（'close'）；
对于（var i=0；iIf（success）您确定它是一个布尔值。请尝试将其编码为success=true；您是否已尝试在开发工具控制台中手动运行代码块？@swimerf确定，因此当我在控制台中以活动表达式运行此代码块时，它会显示横幅：
let url=new url（window.location.href）；let success=url.searchParams.get（“success”）；if（success）{document.getElementById（'stripe-info-success'）.classList.add（'visible'）}else{document.getElementById（'stripe-info-failure'）.classList.add（'visible'）}
@swimberf它也给了我：未捕获的语法错误：标识符“url”已经声明在1:！。不知道这是否是一个问题，或者仅仅是因为我粘贴代码的方式。如果横幅确实显示，问题很可能出在调用函数的时间上。经常发生的事情是，您试图将一个类添加到e要解决这个问题，需要添加一个超时，正确的解决方案是编写代码，在添加类之前检查元素。