```js
// ❌
// const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY);

// 🙆‍♂️
const [stripePromise, setStripePromise] = useState(() => loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY))
```

Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it

<pre><code>// ❌
// const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY);

// 🙆‍♂️
const [stripeP...

```js
const subscription = await stripe.subscriptions.retrieve(
  "sub_xxxx", // Userモデルに保存したsubscriptionId
);

const params = {
  items: [
    {
      id: subscription.items.data[0].id,
      plan: "price_xxxx", // 新しいプラン
    },
  ],
};

const updatedSubscription = await stripe.subscriptions.update(
  "sub_xxxx", // Userモデルに保存したsubscriptionId
  params,
);
```

[Stripe API Reference - Update a subscription - cURL](https://stripe.com/docs/api/subscriptions/update?lang=node)

Node.js Stripe Subscription 更新

顧客の更新`customers.update`のオプションで、`invoice_settings.default_payment_method`に`PaymentMethod.id`を渡してあげると、デフォルトのお支払い方法が設定される。

```js
const customer = await stripe.customers.update('cus_xxx', {
  invoice_settings: {
    default_payment_method: 'pm_xxx',
  },
});
```

[支払いの詳細を更新する](https://stripe.com/docs/payments/checkout/subscriptions/update-payment-details#set-default-payment-method)

[Stripe API reference – PaymentMethods](https://stripe.com/docs/api/payment_methods)

Node.js Stripe Default PaymentMethod 保存

## フロントエンド(React.js)

バックエンド（Node.js）にフロントエンドで作成した`paymentMethod`オブジェクトをそのまま送ってあげる。

```js
await axios.post(
  'http://localhost:8080/users/attach-payment-method',
  {
    paymentMethod: paymentMethod,
  },
  {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    },
  }
);
```

## バックエンド(Nest.js)

PaymentMethodをStripeの顧客に追加する。
DBには、Userに紐づくStripeの顧客IDを登録しておく。

```js
// Controllerから呼び出している想定
async attachPaymentMethod(
  paymentMethodId: string,
  stripeCustomerId: string,
): Promise<any> {
  const paymentMethod = await this.stripe.paymentMethods.attach(
    paymentMethodId,　// ⚠️ paymentMethod.id
    { customer: stripeCustomerId }, // 👈 MyApp の User.stripeCustomerId
  );
  return paymentMethod;
}
```

Userモデルに、`paymentMethod.card.brand`と`paymentMethod.card.last4`も保存しておいて、ユーザーが決済手段を確認しやすいようにしておく。

## ドキュメント
[Stripe API Reference - Attach a PaymentMethod to a Customer](https://stripe.com/docs/api/payment_methods/attach)

Node.js Stripe PaymentMethod 保存

```js
import { Injectable } from '@nestjs/common';
import Stripe from 'stripe';
import { ConfigService } from '@nestjs/config';

@Injectable()
export class StripeService {
  private stripe: Stripe;
  constructor(private readonly configService: ConfigService) {
    this.stripe = new Stripe(configService.get('STRIPE_SECRET_KEY'), {
      apiVersion: '2020-08-27',
    });
  }

  async createCustomer(email: string): Promise<string | null> {
    const customer = await this.stripe.customers.create({
      email: email,
    });
    return customer?.id;
  }
}
```

Nest.js Stripe 設定

```js
const card = elements.create('card', {style: style, hidePostalCode: true});
```

React

```js
<CardElement
  options={{
    hidePostalCode: true,
    style: style
  }}
/>
```

JavaScript Stripe 郵便番号 非表示

## 意図

顧客のクレジットカード情報を更新する機能を作りたい。

- クレジットカードの有効期限切れ
- 謝って入力したケース

また、バックエンドはLaravelだが、 サーバレス(node.js)で構築してみたいのでエッセンス的なところを身に付けておきたい。

## 環境

- Laravel: 6.x
- Vue.js
- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

## カードのテスト

テストできるカードは、[Stripe テスト方法](https://stripe.com/docs/testing)に記載されています。めちゃめちゃ親切なドキュメントですね。感動しました。

- VISA: `4242424242424242`
- Master Card: `5555555555554444`

を使いまわそうかなと。
\
エラーのテストや不正請求のテストも実施することができるので、便利です。

## お支払い方法(カード情報)の変更

詳細は、[Updating The Default Payment Method](https://laravel.com/docs/8.x/billing#updating-the-default-payment-method)に書いてあります。

## Lereval側(StripeController)

※`user()`はLaravelのAPIトークンを見て、Userを取得しています。

```php
// 支払いの意図を作成し、支払いを捕捉できるようにします
public function getSetupIntent( Request $request )
{
    return $request->user()->createSetupIntent();
}
```

```php
// 支払い方法の更新
public function updatePaymentMethod(Request $request) {
    $paymentMethod = $request->input('paymentMethod');
    $request->user()->updateDefaultPaymentMethod($paymentMethod); // ココで更新
    return $this->status(); // ステータスを返しています
}
```

## Vue.js側

```js
export default {
  data () {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: YOUR_STRIPE_PUBLIC_KEY, // StripeのPublic Keyを入れる
      intentToken: ''
    }
  },

  mounted () {
    // eslint-disable-next-line no-undef
    this.stripe = Stripe(this.stripeAPIToken)
    const elements = this.stripe.elements()
    this.card = elements.create('card', { options }) // 任意のオプション
    this.card.mount('#card-element')
    this.loadIntent() // ここでgetSetupIntentを呼び出し
  },

  methods: {
    async submit () {
      // 決済情報の登録
      await this.stripe.confirmCardSetup(
        this.intentToken.client_secret, {
          payment_method: {
            card: this.card,
            billing_details: {}
          }
        }
      ).then(result => {
          this.updatePaymentMethod(result.setupIntent.payment_method)
          this.card.clear()
        }
      })
    },

    loadIntent () {
      this.axios.get('/get-setup-intent')
        .then(res => {
          this.intentToken = res.data
        })
    },

    /**
     * カード情報の更新
     * @param {object} paymentMethod 支払い情報
     * @return {void}
     */
    async updatePaymentMethod (paymentMethod) {
      const data = {
        paymentMethod: paymentMethod
      }
      await this.axios.post('/update-payment-method', data)
    }
  }
}
```

※`mounted`で`getSetupIntent`を呼び出しているので、処理を実行したあとは、コンポーネントを破棄してあげる。
\
また、apiのエンドポイントは、スパイナルケース(ケバブケース)が良いとのこと。メソッド名もDBの更新であれば、 changeよりも**update**を使用したい。

- 変更結果が永続化されるならupdate
- 変更結果が一時的なものならchange

## お支払い方法(カード情報)の作成

先ほどは更新だけでしたが、お支払い方法(カード情報)のみをユーザーに登録してもらいたいケースもあると思います。カード情報の登録は、顧客を作る必要があります。
`stripe_id`を確認し、ある場合は支払い方法の更新。ない場合は、顧客を作成した後に支払い方法を更新します。(stripe_idは、Userテーブルのカラムです。)

```php
// お支払い情報(カード情報)の作成/更新
public function savePaymentMethod(Request $request) {
    $user = $request->user();
    $paymentMethod = $request->input('paymentMethod');
    if ($user->stripe_id) {
        $user->updateDefaultPaymentMethod($paymentMethod);
    } else {
        // カード情報作成の場合、顧客を作る
        $user->email = decrypt($user->email);
        $user->createAsStripeCustomer();
        $user->updateDefaultPaymentMethod($paymentMethod);
    }
    return $this->status(); // 独自で作った
}
```

また、サブスクリプションの作成の際に既に支払い情報がある場合は、`add()`を使用します。

```php
$user->newSubscription('default', $planId)->add();
```

## お支払い方法(カード情報)の削除

お支払い情報の削除は、[Deleting Payment Methods](https://laravel.com/docs/8.x/billing#deleting-payment-methods)に書いてあります。

## 資料

- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

Stripe

Stripeで支払い方法(カード情報)の変更 with Laravel

## 意図

- Freeプラン(無料)
- Basicプラン(有料)
- Standardプラン(有料)

があった場合、それらを作成/変更したい。また、Freeプランは、アカウントを作成した段階の状態とする。
\
サブスクリプションを実装する場合、顧客のデータが必要になる。

- メールアドレス
- StripeID
- paymentMethod

が顧客データに最低限必要なデータになる。また、請求先住所、支払い先住所は任意で紐づけることができる。

Stripeの全体的な支払い機能は、[Stripe 支払い](https://stripe.com/docs/payments)
顧客関する情報は、[Stripe 顧客](https://stripe.com/docs/billing/customer)
サブスク作成の概要は、[Subscriptions with Checkout and the customer portal](https://stripe.com/docs/billing/subscriptions/checkout)

## 作成する機能

- 領収書発行
- 次回請求月/キャンセル日の確認
- カード情報の作成/変更
- カード情報の削除(unsubscribedの場合のみ)
- カード番号(下四桁)とカードブランドの確認
- サブスクリプションの作成/変更
- サブスクリプションのキャンセル/次回請求月までサービスの利用
- 決済時にメールアドレスで連絡
- 引き落とし出来ない場合にメールアドレスで連絡

※サブスクリプションのプラン(商品)は直接Stripeから取得し、表示する

## 基本的な機能

- サブスクリプションの作成 -> 顧客の作成/`購読中(subscribed)`にステータスを変更
- サブスクリプションの解約 -> `キャンセル済(cancelled)`に変更
- サブスクリプションの解約の取り消し -> `購読中(subscribed)`にステータスを変更
- サブスクリプションのプランを変更
- 顧客のカード情報の更新 -> 顧客のpaymentMethodの変更
- 顧客のステータスの確認

おそらく、顧客のステータスとプランを確認し、ユーザーにサービスの利用権限を与えるように実装すると思う。また、Stripe Webhookで決済が作成したかなども実行する必要がありそう。([Webhook でイベント通知を受信する](https://stripe.com/docs/webhooks))

## Vue.js側のTIPS

`Subscription.js`というStoreを作り、細かい粒度でデータを分けて`computed`を使いやすくする。また、[Vuex](https://vuex.vuejs.org/ja/)の設計に乗っ取り、「ActionsでAPIを呼び出し、MutationsでStateの変更、gettersをcomputedで取得し、描画する」ことを意識する。グローバルに使用するデータに関するものはActionsに記載し、Mutationsまでつなげる。

### メリット

- Store: `User.js`の肥大化を避ける。([モジュール分割](https://vuex.vuejs.org/ja/guide/modules.html))
- ObjectのSetでcomputedがうまく動いてくれない問題を避ける。

```js
const state = {
  status: null,
  planId: null,
  planName: null,
  cardBrand: null,
  cardLastFour: null,
  endDate: null
}

const getters = {
  status: (state) => {
    return state.status
  },
  planId: (state) => {
    return state.planId
  },
  planName: (state) => {
    return state.planName
  },
  cardBrand: (state) => {
    return state.cardBrand
  },
  cardLastFour: (state) => {
    return state.cardLastFour
  },
  endDate: (state) => {
    return state.endDate
  }
}

const mutations = {
  SET_STATUS (state, status) {
    state.status = status
  },
  SET_PLAN_ID (state, planId) {
    state.planId = planId
  },
  SET_PLAN_NAME (state, planName) {
    state.planName = planName
  },
  SET_CARD_BRAND (state, cardBrand) {
    state.cardBrand = cardBrand
  },
  SET_CARD_LAST_FOUR (state, cardLastFour) {
    state.cardLastFour = cardLastFour
  },
  SET_END_DATE (state, endDate) {
    state.endDate = endDate
  }
}
```

+Actionsに、プロパティを確認し、まとめてMutationsするActionsを作成しておく。

## 環境

- Laravel: 6.x
- Vue.js
- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)

## 資料

- [Laravel Cashier (Stripe)](https://laravel.com/docs/8.x/billing)
- [Stripe 支払い](https://stripe.com/docs/payments)
- [Subscriptions with Checkout and the customer portal](https://stripe.com/docs/billing/subscriptions/checkout)
- [Webhook でイベント通知を受信する](https://stripe.com/docs/webhooks)

Stripeでプラン(サブスクリプション)の変更 with Laravel

Nuxt.jsとNetlify Functionsで構成しています。
\
開発環境(ローカル)は、以下のポートを使っています。

- `localhost:4000`: アプリ(NuxtJS)
- `localhost:9001`: API(Netlify Functions)

## 決済のコンポーネント

`nuxt.config.js`でstripeをCDNで読み込む。

```js
export default {
  head: {
    script: [{ src: "https://js.stripe.com/v3/" },],
  },
}
```

決済のコンポーネントを作る。

```js
<template>
  <div>
    <div id="card-element" />
    <p>{{ `${price}`¥ }}</p>
    <button @click="submit">送る</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      card: null,
      stripe: [],
      stripeAPIToken: process.env.STRIPE_PUBLIC_KEY,
      price: "500",
    }
  },

  mounted() {
    this.stripe = Stripe(this.stripeAPIToken)
    const elements = this.stripe.elements()
    this.card = elements.create("card", {
      hidePostalCode: true,
    })
    this.card.mount("#card-element")
  },

  methods: {
    async submit() {
      try {
        // ここでStripeにカード情報(決済情報)を送り、トークンを受け取る。
        const tokenResult = await this.stripe.createToken(this.card)

        if (
          !tokenResult.token ||
          !tokenResult.token.id ||
          tokenResult.token.id === ""
        ) {
          throw new Error("トークン発行エラー")
        }

        // APIサーバにリクエストを送り、決済を行う。
        const chargeResult = await this.$axios.post("http://localhost:9001/.netlify/functions/support", {
          token: tokenResult.token.id,
          price: Number(this.price),
        })

        if (!chargeResult || chargeResult.data !== "NORMAL") {
          throw new Error("決済エラー")
        }

      } catch (error) {
        this.error = error
      }
    },
  },
}
</script>
```

※Stripe Elementsは、httpsでないといけません。
※本人確認をしないと、入金を引き落とすことはできません。
※開発環境と本番環境をうまく分けれないか思案中

## Netlify Functions

```bash
yarn add stripe
```

`functions/support.js`

```js
require("dotenv").config()

exports.handler = async function (event) {
  const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY)

  let result = false

  try {
    const data = JSON.parse(event.body)
    const res = await stripe.charges.create({
      amount: Number(data.price), // 値段
      currency: "jpy", // 通貨
      source: data.token, // トークン
    })
    if (res && res.status === "succeeded") {
      result = true
    }
  } catch (error) {
    console.log(error.message)
  }

  const headers = {
    "Access-Control-Allow-Origin": "http://localhost:4000", // 適宜変更して下さい。
    "Access-Control-Allow-Headers": "Content-Type",
  }

  return {
    statusCode: 200,
    headers,
    body: result ? "NORMAL" : "ERROR",
  }
}
```

ローカル起動

```bash
yarn run serve --port=9001
```

※Stripeの決済は、サーバサイドでないと実行できません。
※ローカルでテストする場合は、`netlify-cli`をインストールしておいてください。

## 終わり

- サブスクリプション
- 従量課金
- シンプルな購入
- 支払い方法の変更

などStripeの活躍する場は、たくさんありそうです。直近作りたいアプリなどがないのですが、使い方を知っておくとすぐに戦力になりそうなので、全部やってみたいと思います。

Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it

Related

Tags

Share