iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 23
0
Software Development

LINE bot 好好玩 30 天玩轉 LINE API系列 第 23

[30 天教你如何玩弄 Line bot API] 第 23 天:來購物啊!- LINE Pay API

本文同步刊載於 Clarence 部落格:[LINE bot 好好玩 30 天玩轉 LINE API] 第 23 天:LINE Pay API 介紹

前言

最近幾個月有感覺 LINE 開始努力推 LINE pay 的服務了,所以就想了解怎麼用網頁串接 LINE Pay 呢?
今天就來跟著我了解怎麼申請 LINE Pay 的 sandbox 吧 ~

申請 LINE Pay sandbox 帳號

尋找 建立Sandbox 網址

首先我們先到 LINE Pay 官網,滑到下面可以看到有一個 申請LINE Pay Sandbox帳戶

https://ithelp.ithome.com.tw/upload/images/20191008/201177014J5YZeW24t.png

建立 Sandbox

輸入自己的 email 信箱

https://ithelp.ithome.com.tw/upload/images/20191008/20117701q6G8ajG5BH.png

收信

填完資料後會收到 Email
會寄送一封有帳號密碼的信件過來

https://ithelp.ithome.com.tw/upload/images/20191008/20117701gUM3BPRTeg.png

登入後台

收到 Mail 之後我們就可以收測試流程的頁面裡面找到後台登入的位子後按下登入了,這時候要注意一下這個地方不是登入自己的 LINE 帳號,是要輸入剛剛 Mail 給的帳號,不然會登不進去!

https://ithelp.ithome.com.tw/upload/images/20191008/20117701K1ZwsixrsD.png

登入後介面

其實是一個滿陽春的介面,不過算是夠用了
https://ithelp.ithome.com.tw/upload/images/20191008/20117701lxGgGDFVNE.png

管理付款伺服器 IP

因為是金流系統所以白名單 IP 很重要,要使用 LINE Pay 之前要先把目前的 IP 位址加入才可以使用!
https://ithelp.ithome.com.tw/upload/images/20191008/201177012kjJQNdJmT.png

管理連結金鑰

這邊需要再輸入一次密碼才可以進去
https://ithelp.ithome.com.tw/upload/images/20191008/20117701u9zfVUS39B.png

輸入完密碼就可以看到我們的

  • Channel ID
  • Channel Secret Key
    https://ithelp.ithome.com.tw/upload/images/20191008/20117701Q41CQ2pr4H.png

這兩把 Key 很重要先記下來後面使用 API 需要用到它!

使用 Postman 做 LINE Pay 測試

製作 paymet 網址

一樣開啟我們的 Postman 輸入網址

https://ithelp.ithome.com.tw/upload/images/20191008/20117701YlejJ6JWi6.png

  • Headers:
    • Content-Type:application/json
    • X-LINE-ChannelId:16215
    • X-LINE-ChannelSecret:d542267bbd72a805

這邊要注意一下 X-LINE-ChannelIdX-LINE-ChannelSecret 要改成自己網站上的 ~

  • Body:
{
	"amount": 100,
	"productName": "ithome",
	"productImageUrl": "https://ithelp.ithome.com.tw/images/ironman/11th/event/kv_event/kv-bg-addfly.png",
	"confirmUrl": "http://127.0.0.1:3000",
	"orderId": "B858CB282617FB0956D960215C8E84D1CCF909C6",
	"currency": "TWD"
}
  • amount: 價錢
  • productName: 是產品名稱
  • productImageUrl: 產品圖片
  • confirmUrl: 確認網頁網址
  • orderId: 自己自訂的購買 ID,要注意每次都要不一樣,這個是不可以重複的呦 ~
  • currency: 幣值

輸入完之後按下 send 會得到兩個網址,一個是給 web 使用的,一個是給 app 使用的
https://ithelp.ithome.com.tw/upload/images/20191008/20117701bqwrxvxwfJ.png

這邊說明 web 的

使用者使用 Web 的 Payment

這時候可用者可以決定要直接登入或掃描 QR Code,這邊以 LINE Log in 為例子

https://ithelp.ithome.com.tw/upload/images/20191008/201177017T0IRecrtg.png

登入完出現付款 UI

因為是 Sandbox 所以上面很清楚的說明 這個測試內的動作都是模擬

https://ithelp.ithome.com.tw/upload/images/20191008/20117701cZDpcgms88.png

登入完出現付款 UI

使用者按下付款後會出現 Progress..

https://ithelp.ithome.com.tw/upload/images/20191008/201177010N2EMLBOnE.png

按下付款出現完成的 UI

這時候系統處理完就會出現付款完成

https://ithelp.ithome.com.tw/upload/images/20191008/201177015A8k1QdTtV.png

同時這時候會看到我們的網頁有一個跳轉
https://ithelp.ithome.com.tw/upload/images/20191008/2011770198Xny7dcKh.png

因為沒有開 Server 所以會出現無法連結伺服器,不過沒有關係這次的重點是那個 URL 的 transactionId

通常這個動作是要讓我們的 Server 收到後去做 confirm,這邊就用 Postman 替代這個動作

Payment confirm

Payments confirm

  • Headers:

    • Content-Type:application/json
    • X-LINE-ChannelId:16215
    • X-LINE-ChannelSecret:d542267bbd72a805
  • Body:

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

https://ithelp.ithome.com.tw/upload/images/20191008/2011770108xr1PEHai.png

按下 Send

我們就可以看到使用者的付款資訊了
https://ithelp.ithome.com.tw/upload/images/20191008/20117701vHJtDqu12H.png

付款流程總結

基本上這樣的使用情境就可以應付大部分的情況了,主要就是兩個步驟

  • 製作使用者付款的網址
  • 同意使用者付款

上一篇
[30 天教你如何玩弄 Line bot API] 第 22 天:LINE Notify 實作課!
下一篇
[30 天教你如何玩弄 Line bot API] 第 24 天:LINE Pay 實作
系列文
LINE bot 好好玩 30 天玩轉 LINE API30

1 則留言

0
King Tzeng
iT邦新手 4 級 ‧ 2019-10-08 22:23:19

好酷喔!!◉‿◉

Clarence iT邦新手 5 級 ‧ 2019-10-08 22:44:06 檢舉

下一篇會有實作 ~ (ノ>ω<)ノ

monkianer iT邦新手 5 級 ‧ 2020-10-17 00:52:25 檢舉

謝謝教學,很棒!!

我要留言

立即登入留言