💡
Nuxt に Payjp.js を導入する
はじめに
副業の開発で、決済システムに 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