javascript - 从外部 api 获取数据

Question

我已成功创建 ajax 代码以将数据发送到外部 api(支付网关)。

问题是我如何在他们付款后获取数据并在显示“谢谢”容器之前显示“等待付款”按钮？

以下是我的 ajax 发布数据代码:

$.ajax({
            url: 'creating_bill.php',
            data: { 
                paid_amount : JSON.stringify(jumlah_semua),
                email : emel,
                mobile : telefon,
                name : nama
            },
            type: "POST",
            dataType: "json",
            success: function (data) {
               confirm('Terima Kasih ! Sila buat pembayaran dengan segera.');
               console.log(data)               
               window.open(data.url, '_blank');
               
                 setTimeout(function()
                 {
                    window.location = 'index.html';
                 },10000);
            },
            async: false,
            error: function(data) {
                handleRequestError(data);
            }
        })   
}

这是支付完成的api文档链接:BillPlz doc

但我不知道它是如何工作的。我如何在同一个 ajax 请求中发布数据并取回数据？

基本上我的系统流程是这样的。

1. 客户访问网站
2. 客户添加他们想购买的商品
3. 客户确认商品并决定通过支付网关付款
4. 客户重定向到支付网关发票进行支付
5. 系统在等待客户完成付款时在我的网站上显示“正在等待”消息。
6. 客户完​​成付款后，他们将返回我的网站并看到“感谢您的付款”消息。

我上面发布的代码是我用来将客户数据发布到支付网关 api 的代码。我现在的问题是，如何在等待客户完成付款时显示“等待”消息，并在付款完成后显示“谢谢”消息。

Answer 1

因此您将不得不单独请求检查用户是否已完成支付账单。基本上你创建了一个函数:

• 发送请求以检查账单是否已支付
• 如果账单未支付，它会在 1 秒(或其他时间间隔)内再次调用自身
• 如果账单已支付，它会显示“谢谢”消息并重定向到索引(或您之后想做的任何事情)

同时删除 async: false 可能是个好主意，因为它会在请求运行时阻止浏览器。

你的代码应该是这样的:

function checkBillStatus() {
  $.ajax({
    ...
    // Compose the ajax request to check the bill status
    ...
    success: function (data) {
      // Here you need to check if the bill is paid
      if (data.isBillPaid) {
        console.log('Remove waiting for the payment message');
        console.log('Show thank you for the payment message');
        // Payment is done, redirecting to index
        setTimeout(function() {
          window.location = 'index.html';
        },10000);
      } else {
        // Repeat the request after a while
        setTimeout(checkBillStatus, 1000);
      }
    }
  });
}

$.ajax({
  ...
  success: function (data) {
    confirm('Terima Kasih ! Sila buat pembayaran dengan segera.');
    console.log('Add waiting for the payment message');
    console.log('User confirmed the payment, redirecting to gateway');
    window.open(data.url, '_blank');

    setTimeout(checkBillStatus, 1000);
  },
  async: true,
  ...
});

所以在确认之后你应该显示“waiting”消息，然后代码打开一个网关页面并设置超时以在1秒内检查账单状态。 checkBillStatus 函数本身执行账单状态检查，如果未支付，它会设置超时以在 1 秒内再次检查账单状态。依此类推，直到账单付清。如果是，它会显示“谢谢”消息并重定向到索引。

您将不得不依赖网关来关闭打开的窗口。