Solana Pay 101 - Part 2

Gentle Introduction to Solana Pay API

在開始寫程式之前我們需要準備兩個錢包地址用於模擬收發代幣，這邊我用的是phantom wallet。接下來的模擬會在Solana devnet（測試網路）上進行，可以前往wallet中的 設定>開發人員設定>測試網模式 開啟選項。

要匯入模擬用的Solana代幣可以在網路上尋找 Solana faucet

Dependencies

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 Flow

web app to mobile app transfer flow

這個是用手機錢包在網站上進行交易的流程圖，其他的交易模式可以參考官方文檔內容。整個交易過程中商家不會知道他在跟誰交易，所以最後會需要一個搜尋並確認有收到款項的動作，透過的方法就是在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做介紹:

• recipient: required, 要收錢的錢包地址
• spl-token: optional, 如果想要以SOL以外的代幣交易(如USDC)，需填入spl-token的base58 pulbic key
• reference: optional, 需為base58 encoding，可以用來當作交易識別來確認交易成功。

實作

透過@solana/pay 提供的api可以容易的將上述種種資訊包裝成request url再包成qrcode。(p.s.如果amount留空則會讓使用者自行輸入支付金額

確認交易成功

在成功進行交易後，如上面所述商家需確認有收到款項。這邊我實作了一個簡易的polling，每五秒透過前面reference生成的public key和@solana/web3.js所提供的 findReference()API來檢查等待中的transaction是否成功被放到區塊鏈上(交易成功)。在第二張截圖中可以看到

我也可以用這個signature直接在solscan的devnet上找到這筆交易

Solscan上的交易細節

下面影片是將Solana Pay 整合到亞馬遜網路商店購物結帳流程的demo。由於phantom錢包沒有提供USDC測試，後面實際轉帳的流程我改為在devnet上轉0.1SOL代替。

不用在結帳的時候到處翻找你的信用卡，不再需要麻煩的信用卡資訊填寫，敏感資料因商家保管不當/被駭而外流的機率直接消失，跟LINE Pay一樣方便更無須擔心海外消費不支援，實際感受一次是不是覺得超級方便的呢?

以上就是本次介紹，其他實作如空投、Solana Pay tx request、Handle Transfer Request as Wallet Provider等等，礙於篇幅不再贅述。希望這篇文章能讓你對Solana Pay有初步的認識～

API文件參考:

• https://docs.solanapay.com/api/core
• https://docs.solanapay.com

文中範例程式碼:

• example-repo
• amazon clone integration