Как отобразить верхнюю часть баннера перенаправленной страницы, если платеж был успешным или неудачным

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

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

Answer 2

Добавьте параметр в URL, который вы хотите перенаправить, и прочитайте этот параметр на целевой странице, затем покажите правильный баннер на основе параметра URL.