WooCommerce LINE Pay 金流串接 – 概念說明

WooCommerce LINE Pay 金流串接 – 概念說明

前言

這篇文章是紀錄 LINE Pay 串接的細節,內容會比較偏向概念性的說明,雖然會有一點技術內容但含量不多,如果你是沒有技術背景的商家管理者,應該還是可以從這篇內容來提升對 LINE Pay 的掌握度。網路上針對 LINE Pay 如何串接其實有不少的教學內容,不過有些內容是針對舊版 v2 所撰寫,所以這篇文章希望將自己串接 LINE Pay v3 版本 API 的心得記錄下來,即使你不是使用 WooCommerce,應該也能從這篇內容了解 LINE Pay 串接的一些細節。

 如果你是希望了解 Pay with LINE Pay (原名稱 LINE Pay Taiwan for WooCommerce)這支外掛的功能,請參考外掛的說明文件

LINE Pay 付款功能

LINE Pay 提供的付款功能包含兩個:一般付款 (General Payment) 和自動付款 (Automatic payment)。一般付款就是平常消費者在網路上購物所會使用的一次性付款。而自動付款則常使用在有定期定額扣款需求的網站,可以在設定的交易期間,不透過使用者來自動扣款。本篇的文章內容將會以一般付款來做說明。

LINE Pay 交易流程

LINE Pay 的 API 文件有提供交易流程的圖示,不過我覺得這個圖有點太複雜了,對於剛進入 LINE Pay 的開發者可能會一頭霧水。這個圖比較偏細節,但其實還是有缺漏,例如一開始的 Request API 在什麼時候呼叫,就沒有說明,所以剛開始看這個圖的時候總覺得少了什麼。倒是舊的 v2 文件中的圖示有標示出 Request API,整體的圖示也比較好理解。

LINE Pay 付款流程 (v3)
LINE Pay 付款流程 (v2)

後來我在網路上搜尋了一些教學資料,許多中文的文章其實對流程並沒有做太多的說明,想說 LINE 是日本公司,應該有很多日文資料,所以搜尋了日文資料後找到一篇日文的教學文章,作者是 LINE 日本公司的開發者傳教士 (Developer Advocate) 中嶋 一樹,他畫了一個圖示,讓我對於暸解 LINE Pay 的交易流程有很大的幫助,老實說這樣的內容才應該放在串接文件中才對。

因為內容是日文的,所以我自己重製了一張,並針對自己的理解做了一點修改。

這個內容包含了整個交易流程的過程以及幾個重要的動作,其中包括了 Request API 和 Confirm API 的執行時機等資訊。在交易流程中主要包含三個角色:

  • User:在網站上結帳的消費者
  • Service Provider (簡稱 SP),就是提供網路購物服務的商店。包含前端頁面和後端程式。
  • LINE Pay:包含 LINE Pay APP 和 LINE Pay 伺服器。

在看這個圖示的時候務必了解,這是比較偏向抽象的一個圖示,隱藏了一些不必要的複雜。例如網站 (SP) 其實包含前端頁面和後端程式,而 LINE Pay 也包含 LINE Pay APP 和 LINE Pay 伺服器。在交易過程中有些動作是在畫面上執行,有些則是透過主機對主機來呼叫。例如使用者和 SP 以及 LINE Pay 的互動都是在畫面上進行,而 SP 和 LINE Pay 的互動,則是是透過網站後端程式和 LINE Pay 伺服器來溝通。

跟原本 LINE Pay 技術文件中的圖比較,雖然省略了一些細節,但是透過這樣較為抽象的圖示,個人覺得可以讓開發者或是店家更了解整個 LINE Pay 的交易流程。以下就針對每個步驟來做說明。

付款請求 ( Request API )

Request API 在 v2 的名稱是 Reserve API,如果你在網路上看到的資料是寫 Reserve API,那都是針對 v2 的版本所作的說明。

付款請求是當使用者在網站結帳,按下確認使用 LINE Pay 付款時,商店會發出 Request API 給 LINE Pay。當 LINE Pay 收到這個付款請求,就會做一些前置的檢查,來判斷是否能進行交易,例如付款金額是否正確,以及店家是否能透過 LINE Pay 進行交易等判斷,如果都正常,就會將這些資訊保留 (Reserve) 起來,並回傳付款網址 (paymentUrl) 和交易編號 (Transaction ID) 給網站,由網站將使用者導向付款網址。如果你在這時候使用 Check Payment Status API 來查詢付款狀態,會得到 reserved transaction 的訊息 (return code 0000)。關於付款狀態會在後面章節做說明。

要注意的是,雖然在執行 Request API 後就會產生交易編號,但在 LINE Pay 後台是還看不到這筆交易的,透過 API 查詢也查詢不到。實際上必須要到執行 Confirm API 成功後才會在 LINE Pay 後台看到這筆交易。

使用者確認付款

當網站收到 LINE Pay 回傳的付款網址後,會將使用者導向付款頁面,如果你是透過電腦來瀏覽會顯示以下畫面,你可以登入你的 LINE 帳號或是使用 QR Code 來掃描,請注意在完成付款認證前不要關閉這個畫面。

如果你是透過手機在網站上結帳,則會開啟 LINE Pay。

若你是在電腦結帳,手機掃描 QR Code 後會在手機開啟 LINE Pay,如果是測試環境就會被導向至模擬的付款畫面,如果是正式環境就會顯示 LINE Pay 的結帳畫面。

在付款畫面中會顯示商店名稱、商品圖片、名稱和金額,不過因為 API 的限制,如果購物車中包含多個商品無法全部顯示,而只會顯示一張圖片和一個名稱,這邊我們使用第一個商品的圖片和名稱來做代表。你可以根據需求來帶入你要顯示給消費者看到的商品名稱和圖片。

如果確認商品內容和金額無誤,即可確認付款,這個動作只是代表使用者完成付款認證 (Authentication),並不是真的完成交易。若要真正完成交易,必須要到第三個步驟-網站付款確認。

測試環境-模擬付款畫面
正式環境 – LINE Pay 付款畫面
正式環境 – 多個商品的商品名稱顯示

網站付款確認 ( Confirm API )

當使用者在 LINE Pay 確認付款完成,並不代表整個交易完成了,只是代表使用者完成付款認證同意支付款項。在目前這個階段,透過 LINE Pay 後台查詢是查不到這筆訂單交易記錄的。當使用者在 LINE Pay 完成付款認證,此時 LINE Pay 會呼叫在第一步驟執行 Request API 時所帶的 confirmUrl 參數,這是一個 SP 網站中存在的網址,用來接收 LINE Pay 回傳的通知 (callback)。

SP 網站在收到 LINE Pay 的通知後,要執行 Confirm API 來進行付款確認,代表這個使用者的確有在網站上下單。當 Confirm API 執行成功,這筆交易會進入授權狀態 (Authorization),若在執行 Request API 時所帶入的 capture 參數為 true,這時候就會自動同步請款 (Capture)。若 capture 參數值為 false,代表授權和請款分開,則必須要再執行 Capture API 來完成請款。目前外掛的設定預設是自動請款 ( capture = true )。

若是設定授權同步請款,當 Confirm API 執行成功,代表整個交易流程結束,使用者的 LINE Pay 付款畫面就會被導向網站的訂單感謝頁面。此時若商店管理者進入 LINE Pay 後台就可以查詢到這筆訂單的交易資料。

 針對授權和請款分開的說明,請參考 LINE Pay API 文件中的 Confirm APICapture API

付款狀態說明

關於 LINE Pay 付款流程中每個階段的付款狀態在 v2 版本的英文文件中其實有詳細的說明,不過在 v3 的文件就沒看到了。

LINE Pay 付款狀態 (v2)

LINE Pay 在 v3 的 API 提供了一個 Check Payment Status API 讓你可以在每個階段來確認目前的付款狀態。目前在外掛中有實作這個功能,不過預設是關閉的。如果你想要了解比較詳細的付款狀態,你可以在佈景主題的 functions.php 中加入以下的程式碼:

add_filter( 'linepay_tw_enable_detail_note', '__return_true' );

當執行 LINE Pay 的 API 時,就會再另外呼叫 Check Payment Status API,並在訂單備註中留下記錄。

LINE Pay 付款狀態詳細記錄

備註中你可以看到幾個比較重要的時間點

  1. Request API 成功:return code: 0000, return message: reserved transaction
  2. 使用者在 LINE Pay 完成付款認證但是網站未確認 (confirm):return code: 0110, return message: authentication is done
  3. 網站執行 Confirm API 成功:return code: 0123, return message: completed transaction
  4. 網站執行退款成功(若有執行退款):return code: 0123, return message: completed transaction

這邊可以看到實際上並沒有顯示在 v2 英文文件中描述的那些 Pay Status,或許也是為什麼在 v3 的文件中看不到的原因吧,但從 Check Payment Status API 你可以更了解整個 LINE Pay 付款的狀態和交易流程。

例外處理

前面提到當使用者在 LINE Pay 確認付款後,LINE Pay 會呼叫網站的 confirmUrl,但很可能有某些原因造成呼叫失敗,例如網路問題,或是網站在執行 Confirm API 時出現錯誤,這時候使用者的這筆交易,就會停留在已認證 (Authentication is done) 的狀態 (請參考前面的內容)。為了解決這個狀況,在我們開發的 LINE Pay 外掛中提供了一個手動進行付款確認的功能,讓管理者可以針對這筆訂單做付款確認 (Confirm)

若是付款確認失敗,在消費者的訂單感謝頁面會顯相關提示

付款未確認訊息

在後台的訂單編輯頁面,你可以在 LINE Pay 付款資訊中看到目前訂單的付款狀態為 authed,代表使用者已在 LINE Pay 付款,但是網站尚未進行付款確認 (Confirm),這時候就可以透過執行付款確認來完成。

付款未確認

若是訂單完成付款確認,這時候訂單的 LINE Pay 付款狀態會顯示為 confirmed,代表付款已確認,這筆交易已完成。

另外若使用者未在 LINE Pay 完成付款認證,例如超過付款的時間限制 (20 分鐘),此時 LINE Pay 會顯示無效的訂單。

付款逾期

如果你是透過電腦進行下單,原本電腦瀏覽器中 LINE Pay 頁面也會顯示逾期的資訊,不過這顯示看起來怪怪的,好像沒有正確讀取到文字的內容。

付款逾期畫面

此時若使用者回到網站查看訂單資料,會顯示未付款的提示訊息,提醒使用者完成付款。

結論

本篇文章針對 LINE Pay 的交易流程做一個概念性的說明,希望對有興趣進行 LINE Pay 整合的開發者有幫助,也希望讓使用 LINE Pay 作為付款方式的商家對於 LINE Pay 交易流程有近一步的認識。如果你想更了解 LINE Pay API,可以參考官方的 API 文件,或是適時地參考舊版文件的內容,有時候不同版本的文件說明內容反而會對串接有點幫助。

若你對 LINE Pay 串接有任何的問題,都歡迎透過網站的聯絡方式與我們聯繫。

參考資料

在〈WooCommerce LINE Pay 金流串接 – 概念說明〉中有 4 則留言

  1. 您好,我在使用上有遇到問題,有在客服區域留言麻煩請在收信一下 感謝

    • 您好, 已於客服區域回覆您,再麻煩提供相關資料,方便我們協助喔! 謝謝~

  2. 你好
    下載了你們的LINE Pay Taiwan for WooCommerce plugin,也在設定裡輸入channel ID & secret key
    但是並沒有在結帳頁面上看到line pay 選項
    請問如何解決,謝謝

留言功能已關閉。

Item added to cart.
0 items - NT$0