[PAYJP-NODEJS] 支払い機能の実装 

## [PAY.JP](https://pay.jp/)

![Ảnh chụp Màn hình 2021-05-22 lúc 22.39.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/f6066911-e153-6f77-9ddd-21bd662974da.png)

- 導入簡単
- 決済手数料 2.59%～
- 定期課金、Apple Pay対応
- シンプルなAPI

### Pay.jpの管理画面
![Ảnh chụp Màn hình 2021-05-22 lúc 22.45.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/a32a9642-191c-7147-6ac4-4444a9272e6f.png)

## 実装
### 1. API Key取得
テストと本番のAPIキーがあります。
![Ảnh chụp Màn hình 2021-05-22 lúc 22.50.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/ce81203d-8d32-02de-c9ab-58d68d38e133.png)


### 2. UI作成
#### デザインされた決済フォームを使う（この記事使う方法）

```<script>``` タグを1行で、 デザインされた決済フォーム、カード情報のバリデーション、カード情報のトークン化を行うフォームを生成することができます。

```js
<script
  type="text/javascript"
  src="https://checkout.pay.jp/"
  class="payjp-button"
  data-key=PUBLIC_KEY
  data-submit-text="トークンを作成する"
  data-on-created="onCreated"
  data-partial="true">
</script>
```
以下のボタンが作成されます。
※onCreatedはカードトークン作成したあと、実行されるアクションです。（`window.onCreated = funtion() {}`）

![Ảnh chụp Màn hình 2021-05-22 lúc 22.57.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/e535e2d8-65d4-f5b7-55dd-e93de8e91cae.png)
クリックすると、カード情報の入力フォームがモーダルで開きます。

![Ảnh chụp Màn hình 2021-05-22 lúc 22.57.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/1ff8f19c-115d-59ac-f4ab-6f2062ee628d.png)

カード情報のバリデーションは問題なければ、カードトークン（`tok_ec73...`）が作成されます。

![Ảnh chụp Màn hình 2021-05-23 lúc 00.01.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/d3f55056-2648-3e10-be87-7fa7257883c7.png)



#### デザインされた決済フォームを使う[参考](https://pay.jp/docs/checkout)

![Ảnh chụp Màn hình 2021-05-22 lúc 23.13.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/10476864-0aae-f091-284d-5aba94d3ff9b.png)

### 3. 裏側実装
#### SDKインストール[API Doc](https://pay.jp/docs/api/?javascript)

```
npm install --save payjp
```

利用の時

```js
import pay from 'payjp'
const payjp = pay(PRIVATE_KEY);
```

#### 決済

```js
const pay = await payjp.charges.create({
  amount: 1000,
  currency: 'jpy',
  card: 'tok_ec73...' // カードトークン
})
```
![Ảnh chụp Màn hình 2021-05-22 lúc 23.53.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/e99c2099-f735-74b5-5a95-cf3628acc424.png)


#### カード登録
顧客作成することが必要です。[API](https://pay.jp/docs/api/?javascript#customer-%E9%A1%A7%E5%AE%A2)

```js
const customer = await payjp.customers.create({
  description: 'テスト',
  email: "test@gmail.com"
})

// カード情報を取得する時、このユーザーの情報が必要ですので、Userモデルなどにcustomer.idを保存することが必要です。
```

カードを登録

```js
const card = await payjp.customers.cards.create(customer.id, {
  dcard: 'tok_ec73...', // カードトークン
  default: true,
})

```

#### 登録済カードの情報取得
顧客からカードの情報を取得します。

```js
const cards = await payjp.customers.cards.list(customer.id)
```
![Ảnh chụp Màn hình 2021-05-22 lúc 23.51.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/9700fbad-24d2-01d8-9e46-d6ec4e1df36a.png)
*※ CardUIはreact-credit-cardsを使って作成します。*


#### 定期課金
プラン作成が必要です

```js
const plan = await payjp.plans.create({
  amount: 1000,
  currency: 'jpy',
  interval: 'month',
  trial_days: 30
});
```

![Ảnh chụp Màn hình 2021-05-22 lúc 23.49.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/ded4f649-2fd5-ec83-878a-e817e3ad3976.png)

```js
const subscription = await payjp.subscriptions.create({
  plan: plan.id,
  customer: customer.id
});
```

![Ảnh chụp Màn hình 2021-05-22 lúc 23.55.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/114590/e6b91f69-b17a-0fe7-5728-1c4578b59eda.png)