💡

Nuxt に Payjp.js を導入する

2021/08/24に公開

はじめに

副業の開発で、決済システムに PAY.JP を導入することになり、クライアント向けのライブラリとして、カスタマイズがしやすい Payjp.js を使うことになった。
しかし、副業の開発では Nuxt を使っており、良い感じに連携するドキュメントがなかったため、メモ代わりに残しておく。

使っている技術

  • Nuxt 2.15.3
    • universal(ssr) モードを使用

Payjp.js を読み込む

Payjp.js は script タグで読み込ませるので nuxt.config.js に設定を追加する必要がある。
下記の設定を追加して、<head> タグ内で Payjp.js を読み込む <script> タグを生成するようにする。

nuxt.config.js
export default {
  mode: 'universal',
  head: {
    // 省略
    script: [
      {
        src: 'https://js.pay.jp/v2/pay.js',
        defer: true,
      },
    ],
  },
  // 省略

ポイントは defer: true を入れることで、CORS のエラーを回避するようにしている。

コンポーネントに Pay.jp を実装する

土台が出来上がったので、後は pages 内で適当にコンポーネントを作成して、Pay.jp を実装する。
今回は、カード番号入力した後に、トークンを生成するところまで実装する。

pages/pay-jp.vue
<template>
  <div class="wrap">
    <div id="payjp-form"></div>
    <span class="error">{{ error }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      token: '',
    }
  },
  mounted() {
    const payjp = window.Payjp(process.env.PAYJP_PUBLIC_KEY) // ここに PAY.JP の公開鍵を追加する
    const elements = payjp.elements()
    const cardElement = elements.create('card')
    cardElement.mount('#payjp-form')
    cardElement.on('change', async (event) => {
      if (event.complete) {
        const res = await payjp.createToken(cardElement) // トークン生成
        this.token = res.id
        console.log(this.token)
        if (this.error) {
          this.error = ''
        }
      }
      if (event.error) {
        this.error = event.error.message
      }
    })
  },
}
</script>

これで、実装は完了する。後は、生成されたトークンを API 側の決済処理に渡せば、決済システムが完成する。

Discussion