PAY.JPアドベントカレンダー4日目です!
PAY.JP PlatformのPayouts型を使えばCtoC(フリマサイトのような)サービスも作れるようです(※ベータ版)
テナント(出品者の情報)を登録し、支払時にテナントIDを指定すればいいようです
トップページ ( / )
商品一覧
特に何もしていません
モックです
出品者の情報登録 ( /mypage/registration )
登録ボタンを押すとテナントを作成します
・登録APIの処理
const config = useRuntimeConfig()
const payjp = Payjp(config.payjpSecretKey);
await payjp.tenants.create(
{
name: "テナントA",
// テストのため固定していますが、未指定の場合自動生成してくれます
id: 'test',
platform_fee_rate: 10.15,
// これもとりあえずの固定
bank_code: "0038",
bank_branch_code: "100",
bank_account_type: body.accountType,
bank_account_number: body.accountNumber,
bank_account_holder_name: body.name,
}
)
・実行しているAPI
・ソース
登録後は管理画面のテナント一覧にデータが作成されています
商品ページ ( /products/[id] )
カード登録と、購入処理をします
テストのため、価格は自由に変更できます
カード情報を事前に登録して(トークンを作成)、購入ボタンを押せば購入できます
テストモードでは、テストカードが利用できます
・フロントの処理
PAY.JPのカード情報入力フォームを使います
フロントで利用するのに、適当にd.tsをおいたのですがこれで良かったんでしょうか？
declare namespace Payjp {
interface Elements {
create(type: string, options?: Record<string, unknown>): {
mount: (selector: string) => void
}
}
interface PayjpInstance {
elements(): Elements
createToken(cardElement: any): Promise<{ id: string; error?: { message: string } }>
}
}
declare const Payjp: {
(publicKey: string): Payjp.PayjpInstance
}
他に方法あれば教えてください 
・購入APIの処理
トークン作成前、テナント作成前だとエラーになります
const config = useRuntimeConfig()
const payjp = Payjp(config.payjpSecretKey);
await payjp.charges.create(
{
amount: body.price,
currency: "jpy",
card: body.token,
capture: true,
tenant: "test",
}
);
・実行しているAPI
・ソース
購入後はテナントの管理画面に支払い履歴が追加されています
売上詳細に手数料等も出ています
pay.jpの手数料はオプションによってプラットフォーム利用料に含められます(テナント作成時のみ設定できる)
履歴みてみる ( /mypage/history )
履歴はプラットフォームでデータを持つと思いますが支払履歴のAPIも実行してみました
const config = useRuntimeConfig()
const payjp = Payjp(config.payjpSecretKey);
const res = await payjp.charges.list({
tenant: "test"
})
return {data: res.data.map(data => ({amount:data.amount, created_at:data.created}))}
・実行しているAPI
・ソース
https://github.com/babu-ch/payjp_test/blob/main/server/api/history.ts
試すには
(1️) PAY.JPのアカウント作成する
(2) PAY.JP Platformの利用申請する
現時点では利用申請が必要
今回は申請してから翌日には使えるようになっていました
(3) ソースをclone
(4) 初期設定し、実行
# .envにPAY.JPの秘密鍵、公開鍵を記載してください
cp .env.example .env
npm i && npm run dev
おわり
ドキュメントがわかりやすいので思ったより簡単に試せました！
APIリファレンスは各言語ごとのコードサンプルがすぐコピペできるのでいいですね
(願わくばドキュメントにダークモードがほしい)
明日は https://qiita.com/Yoosuke さん！