PAY.JP Platformを使ってC2Cサービスの決済機能を試してみる

Pay.jpにはシンプルに決済を行う機能だけではなくて、[PAY.JP Platform](https://pay.jp/docs/platform-introduction)というECモールのような決済プラットフォームを作る機能を提供しています。  
本記事ではPay.JP Platformを実際に使ってサービス構築を行った経験を元に機能の紹介します。

### 対象読者
- プラットフォーム型のECサービスの提供を検討中の方
- サクッとマッチングサービスを作ってみたい方

### TL;DR
- Pay.JP Platformで店舗管理や売上入金業務などの運用が簡略化
- 各種APIでシンプルに実装可能

## C2Cサービス構築時の課題
自分の商品を販売するECサイトと異なり、ECモールを運営する場合には考慮すべきことが発生します。
例えば、構築時に以下を検討する必要があります。  

1. テナント情報(手数料率、入金口座)の管理
1. テナントごとの入金処理

仮にシンプルな決済機能だけで実現しようとした場合には、自社でテナント用のデータベースを構築してテナント様の銀行口座情報や手数料率を管理して、売上発生時には指定のサイクルで入金を行わなくてはいけません。  
ECモールはテナントからの手数料によってマネタイズしており、一定数のユーザー数が増えなければ利益を上げることができません。
サービス立ち上げ当初は集客のための開発に投資するべきで、上記のようなテナント管理機能を堅牢に構築するのは優先度が上げられるのか疑問です。

## PAY.JP Platformを使ってみる
  
私自身、C2Cのサービスを構築した際には以下の悩みがありました。
- 入金作業とかは自動化したい
- 銀行口座情報を自社データベースに保持したくない

これらの課題を一括で解消してくれたのがPAY.JP Platformでした。
テナント情報の管理はもちろん、売上からの各種手数料の振り分けからの入金まで一括でやってくれます。
![スクリーンショット 2024-12-22 11.40.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297148/38bc640e-7624-4598-0d6f-151de078597d.png)
[Pay.JPより引用](https://pay.jp/docs/platform-introduction)

### 作ってみる
決済時にテナントIDを指定するだけで最低限の機能を実現できます。
実際のサービス運用の際にはテナントユーザー側の管理画面等が必要ですがPay.jpで管理画面が用意されているため今回は省略します。  

:::note info
Pay.jpを使うために[アカウント登録](https://pay.jp/d/signup)が必要です。
本番利用前には審査がありますが、テスト環境ではすぐ試すことが出来ます。
:::

#### テナントの登録
最初にPay.jpのアカウントにログインしてテナントを追加します。
テナントIDは`test`、プラットフォーム利用率は10%にします。
[Platform API](https://pay.jp/docs/api/?javascript#tenant-%E3%83%86%E3%83%8A%E3%83%B3%E3%83%88)を使うこともできますが簡単のため提供機能を使います。

![スクリーンショット 2024-12-23 9.00.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297148/c2cbdbe7-fc95-28a0-3c97-187b7b7a3a14.png)

#### カード情報トークンの取得
[payjp.js v2](https://pay.jp/docs/payjs-guidance#demo)を使うと簡単にカード情報を登録機能を作ることができます。

:::note warn
カード情報の非通過を実現するためクライアントサイドでカード情報->トークンに変換します
:::

<details><summary>登録画面サンプルHTML</summary>

```html
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Pay.jp Platform サンプル</title>
  </head>
  <script src="https://js.pay.jp/v2/pay.js"></script>
  <body>
    <div>
      <h1>Pay.jp Platform サンプル</h1>
      <input type="text" id="amount" />
      <h3>カード番号</h3>
      <div id="card-form" class="payjs-outer">
        <!-- ここにフォームが生成されます -->
      </div>
      <button onclick="charge(event)">カード情報登録</button>
      <h3>トークン</h3>
      <input type="text" id="token" />
    </div>
  </body>
  <script>
    var payjp = Payjp("{テスト用公開鍵}");

    var payjpeElements = payjp.elements();
    var cardElemtent = payjpeElements.create("card");

    cardElemtent.mount("#card-form");

    function charge(event) {
      payjp.createToken(cardElemtent).then(function (r) {
        var token = r.id;
        document.getElementById("token").value = token;
      });
    }
  </script>
</html>
```
</details>

#### 決済してみる
本来ならサーバーサイドを構築して支払処理を行いますが、簡単のため手元でcurlしてみます。
```bash
curl https://api.pay.jp/v1/charges \
-u {テスト用秘密鍵}: \
-d "amount=500" \
-d "currency=jpy" \
-d "card={取得したトークン}" \
-d "tenant=test"
```

管理画面でテナントに売上が追加されていれば決済成功です🎉
売上金の500円からプラットフォーム利用率、Pay.jpの手数料率が振り分けられています。

![スクリーンショット 2024-12-23 10.07.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/297148/f97381c5-0975-bd00-fd31-56f015ee2d71.png)


## おわりに
最後まで読んでいただきありがとうございました！

PAY.JP Platformを利用したことでプラットフォームサービスを個人レベルで構築、リリースすることができました。
この記事を見て「自分もマッチングサービス作ってみたいなあ」と思ってもらえたらうれしいです。

## 参考資料
公式ドキュメントがすごくわかりやすかったです。 

https://pay.jp/docs/

Pay.JP Platformを使って構築した占いマッチングサイト

https://nattenatte.com/