从外部API获取数据

Question

i have successful created ajax code to send data to external api (payment gateway).

The problem is how can i get data after they pay and show "waiting payment" button before display "Thank you" container ?

Below is my code for ajax post data :

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

Here is the api doc link for payment completion : BillPlz doc

But i have no idea how its work. How can i post the data and get the data back in same ajax request ?

Basically my system process is like this.

1. Customer visit the website
2. Customer add item that they want to buy
3. Customer confirm the item and decide to pay via payment gateway
4. Customer redirect to payment gateway invoice to pay
5. System show 'waiting' message at my website while waiting customer to complete their payment.
6. After customer complete their payment then they will back to my website and see "thank you for your payment" message.

The code i post above is a code that i use to post customer data to payment gateway api. My problem now is, how can i show "waiting" message while waiting for customer to complete their payment and show "Thank you" message when payment has been completed.

</div>

Answer 1

So you will have to make a separate request to check if the user has completed paying the bill. Basically you create a function which:

• sends a request to check if the bill is paid
• if the bill is not paid it calls itself again in 1 second (or some other interval)
• if the bill is paid it shows the "Thank you" message and redirects to index (or whatever you want to do after)

Also removing async: false is probably a good idea since it blocks the browser while the request is running.

Your code should be along the lines of:

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

So after the confirm you should show the "waiting" message, then the code opens a gateway page and sets a timeout to check the bill status in 1 second. The checkBillStatus function itself performs a bill's status check and if it is not paid, it sets timeout to check the bill status again in 1 second. And so on until the bill is paid. When it is, it displays the 'thank you' message and redirects to index.

You will have to rely on the gateway to close the opened window.