PAY.JP + Nuxtでフリマサイトを作ってみよう

PAY.JPアドベントカレンダー4日目です!

https://qiita.com/advent-calendar/2024/payjp-01

---

[PAY.JP Platform](https://pay.jp/docs/platform-introduction
)のPayouts型を使えばCtoC(フリマサイトのような)サービスも作れるようです(※ベータ版)


テナント(出品者の情報)を登録し、支払時にテナントIDを指定すればいいようです



# トップページ ( / )

商品一覧

![スクリーンショット 2024-11-26 16.17.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/d412d8e3-fa3e-f0b8-aed6-d5b43b89370b.png)

特に何もしていません
モックです

# 出品者の情報登録 ( /mypage/registration )

![スクリーンショット 2024-11-26 16.19.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/728e2712-9bc3-71bc-3f26-d20b1a323ee7.png)



登録ボタンを押すとテナントを作成します

・登録APIの処理



```js
    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

[テナント作成](https://pay.jp/docs/api/#%E3%83%86%E3%83%8A%E3%83%B3%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90
)


・ソース

https://github.com/babu-ch/payjp_test/blob/main/server/api/registration.ts



登録後は管理画面のテナント一覧にデータが作成されています

![スクリーンショット 2024-11-26 16.11.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/4adc304d-5b6f-4976-19e1-c868ae4117e6.png)

# 商品ページ ( /products/[id] )

カード登録と、購入処理をします

テストのため、価格は自由に変更できます

カード情報を事前に登録して(トークンを作成)、購入ボタンを押せば購入できます

![スクリーンショット 2024-11-26 20.04.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/ff1f16c1-0e42-f53f-ff94-15f3f666091e.png)

テストモードでは、[テストカード](https://pay.jp/docs/testcard)が利用できます


・フロントの処理

PAY.JPの[カード情報入力フォーム](https://pay.jp/docs/payjs-guidance#demo
)を使います


フロントで利用するのに、適当にd.tsをおいたのですがこれで良かったんでしょうか？

```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
}
```

https://github.com/babu-ch/payjp_test/blob/main/types/payjp.d.ts

他に方法あれば教えてください :pray: 


・購入APIの処理

トークン作成前、テナント作成前だとエラーになります

```js
    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

[支払いを作成](https://pay.jp/docs/api/#%E6%94%AF%E6%89%95%E3%81%84%E3%82%92%E4%BD%9C%E6%88%90)


・ソース

https://github.com/babu-ch/payjp_test/blob/main/server/api/buy.ts

購入後はテナントの管理画面に支払い履歴が追加されています

![スクリーンショット 2024-11-26 16.26.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/a551a122-4b42-7d56-e282-2214c63d295f.png)

売上詳細に手数料等も出ています

![スクリーンショット 2024-11-26 17.29.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/d1e8a7eb-f671-5e0c-a668-9df2ab7b26eb.png)


pay.jpの手数料はオプションによってプラットフォーム利用料に含められます(テナント作成時のみ設定できる)

https://help.pay.jp/ja/articles/4429892-pay-jp-platform-payjp_fee_included%E3%82%92%E6%9C%89%E5%8A%B9%E3%81%AB%E3%81%99%E3%82%8B%E3%81%A8%E3%81%A9%E3%81%86%E3%81%AA%E3%82%8A%E3%81%BE%E3%81%99%E3%81%8B

# 履歴みてみる ( /mypage/history )

履歴はプラットフォームでデータを持つと思いますが支払履歴のAPIも実行してみました

![スクリーンショット 2024-11-26 16.30.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/329559/cb1086cd-07f0-e5fd-008e-5c0aa838561f.png)

```js
    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://pay.jp/docs/api/#%E6%94%AF%E6%89%95%E3%81%84%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E5%8F%96%E5%BE%97)

・ソース
https://github.com/babu-ch/payjp_test/blob/main/server/api/history.ts


# 試すには

(1️) PAY.JPのアカウント作成する

(2) PAY.JP Platformの利用申請する 

現時点では利用申請が必要

今回は申請してから翌日には使えるようになっていました

https://pay.jp/docs/platform-preparation

(3) ソースをclone

https://github.com/babu-ch/payjp_test/

(4) 初期設定し、実行

```sh
# .envにPAY.JPの秘密鍵、公開鍵を記載してください
cp .env.example .env

npm i && npm run dev
```



# おわり

ドキュメントがわかりやすいので思ったより簡単に試せました！

APIリファレンスは各言語ごとのコードサンプルがすぐコピペできるのでいいですね

(願わくばドキュメントにダークモードがほしい)

明日は https://qiita.com/Yoosuke さん！