iT邦幫忙

2025 iThome 鐵人賽

DAY 26
1
Modern Web

Line Bot × NestJS:30 天開發日記系列 第 26

Day 26:LINE Pay 線上付款

  • 分享至 

  • xImage
  •  

2025 鐵人賽背景圖

前言

LINE Pay 提供兩種付款方式:線上付款與實體付款。實體付款主要採用店家出示條碼的模式,顧客掃描後即可輸入金額完成付款。這兩種付款方式都支援在沙盒(Sandbox)環境中進行測試。本文將著重說明線上付款的整合流程。

Sandbox 帳號申請

LINE Pay 沙盒註冊官方網站

沙盒環境是一個獨立的測試空間,所有操作都不會產生實際付款,開發者可以放心進行測試。

官方沙盒帳號申請

填寫完資料後,系統會將沙盒環境的帳號密碼以 Email 方式寄送給您,該帳號用於登入 LINE Pay 官方網站。
Email 收到 LINE Pay 沙盒帳密

LINE Pay 官方網站登入的時候,需要使用信件內提供的帳號密碼。

LINE Pay 官方網站

LINE Pay 後台登入畫面

LINE Pay 使用先前須知

LINE Pay 服務在使用時需要 ChannelId 及 ChannelSecret,取得方式如下:

  1. 登入 LINE Pay 後台
  2. 左側選單點擊「開發者工具」中的「管理連結金鑰」
  3. 右側畫面點選「查詢」後,系統會發送驗證信至您的信箱
  4. 完成信箱驗證後,即可查看 通路 ID (ChannelId)通路密鑰 (ChannelSecret)

LINE Pay 後台管理連結金鑰

LINE Pay 基礎付款流程

LINE Pay 線上付款流程包含四個核心步驟,這些步驟與 API 的設計和使用密切相關:

  1. 付款請求步驟:消費者選擇 LINE Pay 付款後,商店伺服器向 LINE Pay 發送付款請求 API,傳送訂單編號、付款金額、貨幣代碼、商品資訊及跳轉網址。LINE Pay 回傳付款網址(paymentUrl)及交易編號(transactionId),店家需要將用戶導向該付款網址。
  2. LINE Pay 認證步驟:用戶進入 LINE Pay 付款頁面後,系統要求完成 LINE 帳號登入及身份驗證,接著顯示交易明細供用戶確認,並輸入付款密碼完成認證。用戶可隨時取消並跳轉至取消頁面(cancelUrl)。
  3. 付款授權步驟:用戶完成認證後,頁面跳轉回商店的確認頁面(confirmUrl),URL 參數中包含交易編號。商店伺服器呼叫付款確認 API(Confirm API)請求授權。LINE Pay 驗證後執行扣款,商店確認成功後導向付款完成頁面。
  4. 請款步驟:LINE Pay 預設採用「授權即請款」模式,授權完成時自動執行請款並結算。請款完成後無法取消授權,僅能透過退款 API 處理。若需使用「授權與請款分離」模式,須事先向 LINE Pay 申請核准。

LINE Pay 線上付款流程

使用 LINE Pay API 前置作業

LINE Pay API 需要在 HTTP 請求標頭中指定以下三個欄位::

  • X-LINE-ChannelId:商家的 Channel ID,可在 LINE Pay 管理後台的連結金鑰頁面中取得
  • X-LINE-Authorization:使用 HMAC-SHA256 演算法產生的簽章。簽章訊息由 Channel Secret + API 路徑 + 請求 Body + Nonce 依序串接組合而成,再以 Channel Secret 作為金鑰進行加密。
  • X-LINE-Authorization-Nonce:填入 UUID(v1 或 v4)或時間戳記等一次性隨機值,用於防止重放攻擊。

接下來操作會透過 Postman 跑過一次流程,首先會先使用 pre-request 處理標頭的部分。

Postman 設定環境變數

在 Postman 中建立環境變數以儲存 Channel ID 和 Channel Secret,設定完成後可搭配 Pre-request Script 自動產生請求標頭資訊。

Postman Enviroment(變數值記得替換你申請的部分)
Postman Enviroment

Postman pre-request

const CryptoJS = require('crypto-js');

const channelId = pm.environment.get("Channel_ID").trim();
const channelSecretKey = pm.environment.get("Channel_Secret_Key").trim();

const nonce = crypto.randomUUID();
const body = pm.request.body.raw
const apiPath = new URL(pm.request.url.toString()).pathname; 

// 按照官方文檔組合訊息:ChannelSecret + URI + Body + Nonce
const message = channelSecretKey + apiPath + body + nonce;

// 使用 ChannelSecret 作為 HMAC key,對 message 進行簽名
const signature = CryptoJS.HmacSHA256(message, channelSecretKey)
    .toString(CryptoJS.enc.Base64);

// 設定 Headers
pm.request.headers.upsert({ key: "Content-Type", value: "application/json" });
pm.request.headers.upsert({ key: "X-LINE-ChannelId", value: channelId });
pm.request.headers.upsert({ key: "X-LINE-Authorization-Nonce", value: nonce });
pm.request.headers.upsert({ key: "X-LINE-Authorization", value: signature });

付款請求步驟

API 說明

【 基本參數 】

  • orderId:訂單編號,這邊可以按照商家編號習慣產生,但不可以重複
  • currency:交易貨幣幣別,例如 TWD
  • amount:訂單總金額
  • useIfee:手續費

【 packages(套裝產品資訊) 】

  • name:產品名稱
  • imageUrl:產品圖片 URL
  • quantity:購買數量
  • price:產品單價
  • originalPrice:產品原價

【 redirectUrls(跳轉網址) 】

  • confirmUrl:用戶完成付款認證後,LINE Pay 會將用戶導向此網址。
  • cancelUrl:用戶取消付款時,LINE Pay 會將用戶導向此網址。

我們可以使用上面的參數組合出我們的付款請求

orderId 使用過之後必須要手動替換喔!

body 請求 JSON

{
    "orderId": "TEST_20251009_0013",
    "currency": "TWD",
    "packages": [
        {
            "id": "1",
            "amount": 100,
            "products": [
                {
                    "id": "P001",
                    "name": "鐵人咖啡",
                    "quantity": 1,
                    "imageUrl": "https://res.cloudinary.com/dseg0uwc9/image/upload/v1759988202/2025%20IT%20%E9%90%B5%E4%BA%BA%E8%B3%BD/Day%2025%EF%BC%9ALINE%20%E9%9B%86%E9%BB%9E%E5%8D%A1%E8%88%87%E5%84%AA%E6%83%A0%E5%8D%B7/%E5%92%96%E5%95%A1%E5%9C%96_qb2gt2.jpg",
                    "originalPrice": 200,
                    "price": 100
                }
            ]
        }
    ],
    "amount": 100,
    "redirectUrls": {
        "confirmUrl": "https://www.google.com.tw/",
        "cancelUrl": "https://www.google.com.tw/",
        "confirmUrlType": "CLIENT"
    }
}

呼叫付款請求 API 成功後會收到以下回應內容:

  • returnCode:回應狀態碼,詳細說明請參考官方說明
  • paymentUrl .web:LINE Pay 提供的付款頁面網址,需將用戶導向此網址完成付款認證
  • transactionId:此筆交易的唯一識別碼,後續呼叫付款確認 API 時需要使用此值。
{
    "returnCode": "0000",
    "returnMessage": "Success.",
    "info": {
        "paymentUrl": {
            "web": "https://sandbox-web-pay.line.me/web/payment/wait?transactionReserveId=MURWc0NLQ3VZVU5nTzdueVFCcnIyK1dnVzJjMHhBV2hoNnVRSTh1Tk9qSFQ0TjlsaEp2OEcxY0pLN3YreVRtWg",
            "app": "line://pay/payment/MURWc0NLQ3VZVU5nTzdueVFCcnIyK1dnVzJjMHhBV2hoNnVRSTh1Tk9qSFQ0TjlsaEp2OEcxY0pLN3YreVRtWg"
        },
        "transactionId": 2025100902308399810,
        "paymentAccessToken": "884394403270"
    }
}

1. 網頁呈現 paymentUrl .web 導覽畫面(未登入 LINE 狀態,需要驗證)

網頁呈現 paymentUrl .web 導覽畫面(用戶未登入狀態)

2. 手機呈現 paymentUrl .web 導覽畫面(驗證通過,可看到購買商品資訊)

手機呈現 paymentUrl .web 導覽畫面(用戶已登入)

付款授權步驟

API 說明

當手機端完成付款後,網頁會自動跳轉至 confirmUrl,並在網址列中攜帶交易編號(transactionId)及訂單編號(orderId)等參數。

手機在沙盒付款完成行動裝置顯示

同時,後端接收到付款完成的通知後,會將網頁導向至 confirmUrl 進行後續確認。

confirm URL 顯示交易編號及訂單編號

後端可以根據交易編號(transactionId)向 LINE Pay 伺服器請求付款授權。

請求的時候,必須確保總額與當初使用者授權的總額相同,才可以完成該筆交易。

body 請求 JSON

{
    "amount": 100,
    "currency": "TWD"
}

呼叫付款授權 API 成功後會收到以下回應內容,其中 payInfo.method 欄位的可能值包括:

  • BALANCE: LINE Pay 餘額
  • CREDIT_CARD: 信用卡(包括簽帳金融卡)
  • POINT: LINE POINTS
{
    "returnCode": "0000",
    "returnMessage": "Success.",
    "info": {
        "transactionId": 2025101002308403110,
        "orderId": "TEST_20251009_0013",
        "payInfo": [
            {
                "method": "CREDIT_CARD",
                "amount": 100,
                "maskedCreditCardNumber": "************1111"
            }
        ],
        "packages": [
            {
                "id": "1",
                "amount": 100,
                "userFeeAmount": 0,
                "products": [
                    {
                        "id": "P001",
                        "name": "鐵人咖啡",
                        "imageUrl": "https://res.cloudinary.com/dseg0uwc9/image/upload/v1759988202/2025%20IT%20%E9%90%B5%E4%BA%BA%E8%B3%BD/Day%2025%EF%BC%9ALINE%20%E9%9B%86%E9%BB%9E%E5%8D%A1%E8%88%87%E5%84%AA%E6%83%A0%E5%8D%B7/%E5%92%96%E5%95%A1%E5%9C%96_qb2gt2.jpg",
                        "quantity": 1,
                        "price": 100,
                        "originalPrice": 200
                    }
                ]
            }
        ]
    }
}

本日結語

今天是第一次接觸 LINE Pay 線上付款整合,實際操作後發現 API 流程設計蠻好理解,從付款請求到付款授權,每個步驟都有明確的參數定義與回應格式。沙盒環境的支援也可以讓開發過程更加順暢,不僅可以讓開發者能安心反覆測試各種付款情境,還能透過管理後台即時查看交易狀態與處理結果,大幅降低了金流整合的門檻。


上一篇
Day 25:優惠券設定與 Coupon Message 實作
系列文
Line Bot × NestJS:30 天開發日記26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言