Web 串接 OnlinePay

街口支付 OnlinePay 服務支援已介接業務窗口並開通此服務的店鋪串接此功能，APP 或 Web 可通過 OnlinePay 產品完成您銷售商品或內容的收款需求。

此文件將敘述兩種介接方式：

我有 APP，且付款頁面是在 Webview 內實作
我有 PC 網頁

我有 APP，且付款頁面是在 Webview 內實作

轉導流程： 您的付款頁 -> 付款連結轉導 -> 確認支付 -> 支付成功 -> 回到您的應用

說明：

使用訂單創建返回參數 payment_url 作為跳轉連結。(訂單創建 API #返回參數)
當支付成功時，街口支付會將用戶導回您訂單創建時的請求參數 result_display_url。(訂單創建 API 請求參數)

注意：

用戶於街口支付應用中付款成功後，街口支付服務會立即將用戶導向 result_display_url。
若用戶於街口支付應用中付款失敗，街口支付服務不會將用戶導回您的應用。
用戶於非支付成功的情況下，自行返回您的應用時，需要自行處理狀態。建議使用 window.onpageshow 監聽用戶是否有回到頁面，重新刷新頁面或檢查當前狀態呈現對應 UI。
還原頁面需考慮時機，較為複雜，因此建議作法是於您的付款頁點擊時，由 JSAPI 呼叫 APP 向外開啟系統瀏覽器進行付款連結轉導（JSAPI 由您的 APP 實作）。
不建議 APP 使用最終跳轉連結作為判斷關閉 Webview 的時機。

範例程式碼

監聽用戶是否有回到頁面，重新刷新頁面或檢查當前狀態呈現對應 UI。

// 頁面 mounted 
addEventListener("visibilitychange", (event) => {
    if (document.visibilityState === 'visible') {
        window.location.reload();
      }
});

付款頁點擊時，由 JSAPI 呼叫 APP 向外開啟系統瀏覽器進行付款連結轉導。

// payment_url : 呼叫訂單創建 API 返回參數
function() {
    jsapi.openBrowser(payment_url); // JSAPI 由您的 APP 實作
}

（不建議）在 Webview 本身進行付款連結轉導。

// payment_url : 呼叫訂單創建 API 返回參數
function() {
    window.location.href = payment_url;
}

我有 PC 網站

轉導流程：您的付款頁 -> 付款連結轉導 -> 用戶掃描付款 QR Code -> 確認支付 -> 支付成功

說明：

使用訂單創建返回參數 payment_url 作為跳轉連結。(訂單創建 API #返回參數)
使用訂單創建返回參數 qr_img ，將 QRCode 嵌入付款網頁。(訂單創建 API #返回參數)
使用桌面裝置：畫面顯示付款 QR Code ，用戶使用手機裝置開啟街口支付 APP 掃碼付款。
使用手機裝置：街口支付服務會開啟手機裝置上的街口支付 APP 進行付款。

注意：

使用手機裝置瀏覽器開啟，跳轉時遵循該瀏覽器政策，部分瀏覽器禁止非用戶觸發之跳轉行為。建議的做法是，透過用戶點擊行為轉導至付款連結。
使用手機裝置瀏覽器開啟，若用戶的手機裝置沒有安裝街口支付 APP，街口支付服務會嘗試引導用戶前往應用程式商店下載。

範例程式碼

使用訂單創建返回參數 payment_url 作為跳轉連結

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="description" content="baru belajar html"
    <title> Hello World! </title>
</head>
<body>
   <div>
     <button id="paymentBtn">街口支付付款</button>
   </div>

   <script>
      const paymentBtn = document.getElementById('paymentBtn');
      function apiGetPaymentUrl() {
        // 您的後端請求街口支付訂單創建 API ，返回參數 payment_url
        const payment_url = 'https://onlinepay.jkopay.com/';

        return payment_url;
      }

      async function startPayment() {
        const payment_url = await apiGetPaymentUrl();

        window.location.href = payment_url;
      }

      paymentBtn.onclick = startPayment;
    </script>
</body>
</html>