概要

WebサイトにStripeを使った決済を導入することになりました。
Nuxt.jsをクライアント側で使っているため、良さそうなライブラリがないか調査したところ
WilliamDASILVA/nuxt-stripe-moduleのライブラリが良さそうだったので、導入してみました。

Note

クライアント側のみの実装です。実際はサーバーサイドの実装も並行して実施しています。

実装内容

install

% yarn add nuxt-stripe-module

config

• .env に STRIPE_PUBLISHABLE_KEYという変数名で公開可能なAPIキーを定義しておきます
• nuxt.config.js

  modules: [
    ...
    // Doc: https://github.com/WilliamDASILVA/nuxt-stripe-module
    'nuxt-stripe-module' // この行を追加
  ],

  // stripeのpropertyを追加
  /*
   ** stripe module configuration
   ** See https://github.com/WilliamDASILVA/nuxt-stripe-module#usage
   */
  stripe: {
    version: '2020-08-27',  // versionは固定にしておいた方が無難です。
    publishableKey: process.env.STRIPE_PUBLISHABLE_KEY,
    locale: 'ja',
  },

画面側

• card-element というtagにstripeのクレジットカード情報入力コントロールを表示させています。
• クレジットカード情報の入力があるたびに、チェックをしてエラーがあればエラー内容を表示させています

<form>
  <div>{{ cardErrorMessage }}</div>
  <div id="card-element"></div>
  <button @click="submit">SUBMIT</button>
</form>
<script>
export default {
  data() {
    return {
      cardErrorMessage: '',
      cardElement: null,
    }
  },
  mounted() {
    const elements = this.$stripe.elements()
    const card = elements.create('card')
    card.mount('#card-element')
    card.on('change', this.showCardError)
    this.cardElement = card
  },
  methods: {
    showCardError(event) {
      if (event.error) {
        this.cardErrorMessage = event.error.message
      } else {
        this.cardErrorMessage = ''
      }
    },
    submit() {
      // TODO 以下を参考にしつつ、paymentの実行をします
      // https://stripe.com/docs/billing/subscriptions/fixed-price
      this.$nuxt.$loading.start()
      try {
        // 支払い方法を作成
        const paymentMethod = await this.$stripe.createPaymentMethod({
          type: 'card',
          card: this.cardElement,
        })
        if (paymentMethod.error) {
          this.cardErrMessage =
            paymentMethod.error.message || 'カード番号が無効です。'
          return false
        } else {
          this.cardErrMessage = ''
        }
        // 支払い方法が作成されたので、その支払い方法のIDを使って支払い処理をおこないます。
        // ...以下略
      } finally {
        this.$nuxt.$loading.finish()
      }
    },
  },
}
</script>

以上になります。