在開始寫程式之前我們需要準備兩個錢包地址用於模擬收發代幣,這邊我用的是phantom wallet。接下來的模擬會在Solana devnet(測試網路)上進行,可以前往wallet中的 設定>開發人員設定>測試網模式
開啟選項。
要匯入模擬用的Solana代幣可以在網路上尋找 Solana faucet
Solana Pay API 都是基於 js/ts。我們先下載需要用到的套件:
npm install @solana/pay bignumber.js @solana/web3.js
預計使用到的import:
import { PublicKey, Keypair, Connection, clusterApiUrl } from "@solana/web3.js";
import { encodeURL, createQR, findReference } from '@solana/pay';
import BigNumber from 'bignumber.js';
這個是用手機錢包在網站上進行交易的流程圖,其他的交易模式可以參考官方文檔內容。整個交易過程中商家不會知道他在跟誰交易,所以最後會需要一個搜尋並確認有收到款項的動作,透過的方法就是在transfer request url中的reference field留下一個public key,細節可以參考下一段的request url介紹。
基本上一筆Solana Pay的交易內容可以被encode成一個Solana Pay transfer request URL, 格式如下:
solana:<recipient>
?amount=<amount>
&spl-token=<spl-token>
&reference=<reference>
&label=<label>
&message=<message>
&memo=<memo>
這個url可以被包成一個qrcode或是nfc tag,且不需要靠任何的server運作,只要用錢包掃了qrcode交易就可以直接進行。以下針對幾個特別的fields做介紹:
透過@solana/pay 提供的api可以容易的將上述種種資訊包裝成request url再包成qrcode。(p.s.如果amount留空則會讓使用者自行輸入支付金額
在成功進行交易後,如上面所述商家需確認有收到款項。這邊我實作了一個簡易的polling,每五秒透過前面reference生成的public key和@solana/web3.js所提供的 findReference()
API來檢查等待中的transaction是否成功被放到區塊鏈上(交易成功)。在第二張截圖中可以看到
我也可以用這個signature直接在solscan的devnet上找到這筆交易
下面影片是將Solana Pay 整合到亞馬遜網路商店購物結帳流程的demo。由於phantom錢包沒有提供USDC測試,後面實際轉帳的流程我改為在devnet上轉0.1SOL代替。
不用在結帳的時候到處翻找你的信用卡,不再需要麻煩的信用卡資訊填寫,敏感資料因商家保管不當/被駭而外流的機率直接消失,跟LINE Pay一樣方便更無須擔心海外消費不支援,實際感受一次是不是覺得超級方便的呢?
以上就是本次介紹,其他實作如空投、Solana Pay tx request、Handle Transfer Request as Wallet Provider等等,礙於篇幅不再贅述。希望這篇文章能讓你對Solana Pay有初步的認識~
API文件參考:
文中範例程式碼: