将方法中声明的 JSON 对象数据发送到另一个页面

Question

我正在尝试在我的网站上实现支付集成；现在，在使用示例代码之后，我能够开发第一阶段，即付款收集和处理。

现在我的问题是，当它成功重定向到另一个页面时，我如何在另一个页面上显示付款详细信息

<div class="row">
    <div class="col-75">
    <div class="container">
    <form method="POST" id="payment-form">
    <div class="row">
    <div class="col-50-left">
    <h3>Billing Information</h3>
    <label for="fname"><i class="fa fa-user"></i> First Name</label>
    <input type="text" id="firstname" name="firstname" placeholder="First Name" required="">
    <label for="fname"><i class="fa fa-user"></i> Last Name</label>
    <input type="text" id="lastname" name="lastname" placeholder="Last Name">

    <label for="adr"><i class="fa fa-money"></i> Amount</label>
    <input type="number" id="amount" name="amount" placeholder="NGN 20000">

    <label for="city"><i class="fa fa-institution"></i> City</label>
    <input type="text" id="city" name="city" placeholder="Benin City">
    </div>

    <div class="col-50">
    <div class="icon-container">
    <img src="assets/images/remita-payment-options.png" style="width: 100%;">
    </div>
    <label for="email"><i class="fa fa-envelope"></i> Email</label>
    <input type="email" id="email" name="email" placeholder="john@example.com">

            <label for="adr"><i class="fa fa-phone"></i> Phone</label>
            <input type="text" id="phone" name="phone" placeholder="+234 XXX XXX XXXX">

            <label for="city"><i class="fa fa-comment"></i> Narration</label>
            <input type="text" id="narration" name="narration" placeholder="Donation">
          </div>
        </div>
        <button type="button" class="btn" onclick="makePayment();"> Pay </button>
      </form>
    </div></div></div>

     <script>

                    var date = new Date();
                    var timestamp = date.getTime();
                    var form = document.querySelector("#payment-form");

                    function makePayment() {
                      var paymentEngine = RmPaymentEngine.init({
                         key: 'RzAwMDAyMjg5NTl8NDMwNjUxNDd8ZmM4MDg5Yjc3M2Y5ZTk0YWViMDJkMmRmMDVhYmI2MjAwMWVhYjNjY2I5NmU0ZWU3MzBiNTMwYzNlOGEzYTYyMTc2ODM1NzBkYmI4MmI3MTE1ZmUxMzkxYTg0MzZhYjM0ODlkY2U0NzZiMTE4OWU0YTNjMjA1MGJjY2UyNzNkN2I=',
                          customerId: form.querySelector("#email").value,
                          firstName: form.querySelector("#firstname").value,
                          lastName: form.querySelector("#lastname").value,
                          email: form.querySelector("#email").value,
                          amount: form.querySelector("#amount").value,
                          transactionId: timestamp,
                          narration: form.querySelector("#narration").value,
                          phone: form.querySelector("#phone").value,
                          city: form.querySelector("#city").value,
                          onSuccess: function (response) {
                          console.log('callback Successful Response', response);
                          console.log('Amount', response.amount);
                          console.log('TransactionId: ', response.transactionId);
                          console.log('RRR: ', response.paymentReference);

                          /*How do i display these data on the save_live.html page
                          RRR:
                          TransactionId:
                          Amount:
                           when it redirects there*/
                        window.localStorage.setItem("globaly", JSON.stringify(response));
                        window.location.href = 'save_live.html';


                          },
                          onError: function (response) {
                          console.log('callback Error Response', response);
                          },
                          onClose: function () {

                          form.reset();
                          console.log("closed");

                          }
                          });
                          paymentEngine.showPaymentWidget();
                        }
                    </script>
                    <script type="text/javascript" src="https://remitademo.net/payment/v1/remita-pay-inline.bundle.js"></script>

这是下面的 save_live.html 页面脚本以及我尝试过的操作

    <div class="row">
    <div class="col-75">
    <div class="container" id="paid">

    </div></div></div>

    <script>
     $(document).ready(function(){
    $.getJSON("index.html", function(data){
      var payment_data = '';
      $.each(data, function(key, value){

        payment_data += '<div>';
        payment_data += '<p>'+value.paymentReference+'</p>';
        payment_data += '<p>'+value.amount+'</p>';
        payment_data += '<p>'+value.transactionId+'</p>';
        payment_data += '</div>';
      })
      $('#paid').append(payment_data);
    });
    });
</script>

Answer 1

您如何运行上述页面？ 我们使用localhost服务器，使用localStorage.setItem保存，使用localStorage.getItem获取同域。