如何從支付網站重定向回我的 ionic 應用程序

Question

大家好。 請我需要你的幫助。 我使用的支付網關需要在交易成功后重定向回我的 ionic 應用程序。 但是在成功交易后，我收到此錯誤消息“無法發布到 localhost:8100/home”，但是當我使用站點 URL 時（例如https://siteurl.Z4D236D9A2A2D102C5FE6AD1 ），它通過 504B391A8D2C5FE6AD1 重定向到指定的地址）地點。 我不知道我在哪里弄錯了，我的應用程序的回調 URL 將是什么。 這是我的代碼。 謝謝。

completePurchase() {
    this.loadingCtrl.create({
      message: "Order Processing...",
      showBackdrop: true
    }).then((overlay) => {
      this.loading = overlay;
      this.loading.present();
      let currentCustomerId = localStorage.getItem('currentUserId');
      if (this.paymentGatwayId == "tbz_rave") {
        this.rave.init(false, "PUBLIC_KEY") //true = production, false = test
          .then(_ => {
            var paymentObject = this.ravePayment.create({
              customer_email: this.user.email,
              amount: this.totalPrice,
              customer_firstname: `${this.user.first_name}`,
              customer_lastname: `${this.user.last_name}`,
              customer_phone: `${this.user.billing.phone}`,
              currency: "NGN",
              txref: "rave-1234550",
              redirect_url: "http://localhost:8100/home",
              meta: [{
                metaname: "flightID",
                metavalue: "AP1234"

              }]
            })
            this.rave.preRender(paymentObject)
              .then(secure_link => {
                secure_link = secure_link + " ";
                const browser: InAppBrowserObject = this.rave.render(secure_link, this.iab);
                browser.on("loadstart")
                  .subscribe((event: InAppBrowserEvent) => {
                    if (event.url.indexOf('http://localhost:8100/home') != -1) {

                      if (event.url.includes("payment_successfull")) {

                        browser.close();

                        console.log("Transaction Succesful");

                        // Place order after payment successfull
                          let orderObj = {};
                    orderObj['payment_method'] = this.paymentGatwayId;
                    orderObj['payment_method_title'] = this.paymentGatewayTitle;
                    orderObj['customer_id'] = currentCustomerId;
                    this.platform.ready().then(() => {
                      this.address = {
                        first_name: this.user.first_name,
                        last_name: this.user.last_name,
                        address_1: this.user.billing.address_1,
                        city: this.user.billing.city,
                        address_2: this.user.billing.address_2,
                        phone: this.user.billing.phone,
                      }
                      orderObj['billing'] = this.address;
                      orderObj['line_items'] = this.baseProducts;
                      this.WC.placeOrder(orderObj).then(async (respData) => {
                        this.storage.clear();
                        this.storage.set('currentOrderData', respData);
                        console.log(orderObj);
                        //navigate after successful placing of other
                        const alert = await this.alertCtrl.create({
                          cssClass: 'my-custom-class',
                          header: 'Status',
                          message: ' <strong>Transaction successful</strong>!',
                          buttons: [
                            {
                              text: 'Okay',
                              handler: () => {
                                this.route.navigate(['/menu/order']);
                              }
                            }
                          ]
                        });

                        await alert.present()

                        this.route.navigate(['/menu/order']);
                      }).catch((error) => {
                        console.log('Problem with placing order', error);
                      });
                    });

                      } else {
                        browser.close();
                        console.log("Transaction fail");

                      }
                      browser.close()
                    }
                  })
              }).catch(error => {
                // Error or invalid paymentObject passed in
                console.log("error", error);
              })
          });
      }
    });
    setTimeout(() => {

      this.loading.dismiss();
    }, 5000);
  }

交易成功后下單服務頁面

placeOrder(orderDataObj){
  let headers = new HttpHeaders ({
    'Content-Type': 'application/x-www-form-urlencoded'
  });

  let orderData = this.JSON_to_URLEncoded(orderDataObj);

  this.apiUrl = `${this.siteUrl}${this.woocommercePath}orders?consumer_key=${this.consumerKey}&consumer_secret=${this.consumerSecret}`;
  console.log('API URL for order: ', this.apiUrl);

  return new Promise ((resolve) => {
    this.orderResp = this.http.post(this.apiUrl,orderData, {headers});
    this.orderResp.subscribe((responseData) => {
      resolve(responseData);
    });
  });

}

Answer 1

幾天前，即使我面臨同樣的問題，從技術上講，當移動/智能手機上運行的 ionic apk 文件沒有運行任何端口號時，即http://localhost/dashboard而不是 http://localhost: 8100/儀表板。

因此將重定向 url 指定為redirect_url: "http://localhost/home"

或返回到付款開始的同一窗口/頁面，指定為redirect_url：window.location.href，

然后您將能夠重定向回離子應用程序。

Answer 2

我認為你做錯了； 當交易成功時，支付網站將通過 webhook URL 通知您，此 url 應該在您的服務器上，因為它們是一個發布請求。 您不能直接向您的客戶端（瀏覽器/IONIC 客戶端）發送發布請求，因為它們不應該充當 web 服務器。 一個簡單的解決方案是在您的服務器上創建一個接收響應的 URL，然后將用戶重定向到您的 web 應用程序（不確定它是否與 IONIC 一起使用）在否：

http.post('/rave-callback',function(req,res){ 
// you can store the payment details in the db if you need to
   res.redirect('http://localhost:8100/home')
})

在您的 IONIC 應用程序中，您必須將 redirect_url 更改為redirect_url: "http://my-server-url.com/rave-callback

更多關於這里的信息： https://medium.com/@jake_parkers/3d-secure-guidelines-9e17f9a6cf32

Answer 3

我們沒有完整的故事，所以我主要是猜測，所以我想這是你的問題：

if (event.url.indexOf('http://localhost:8100/home') != -1) {
  if (event.url.includes("payment_successfull")) {
  }
}

你怎么知道支付網關會重定向到http://localhost:8100/home ？ 它不起作用，因為這只是您的本地服務。 如果您在支付網關提供商中配置它，則需要更改它。

你最好的選擇（我所做的）是將它留在它已經擁有的任何 defulat 成功頁面上，這個頁面應該有一些關鍵字，你可以使用這個 function 來檢查event.url.includes("your keyword here")

或者，如果您必須填寫一個值，請使用他們的頁面並在末尾添加一個帶有關鍵字的參數： www.url.com?status=payment_successfull