Vue.js(Nuxt)でPAY.JPのcheckout（支払い処理）を行う

はじめに

PAY.JPはウェブアプリやモバイルアプリにクレジットカードの決済機能を付与するサービスです。JS向けとなるcheckout(支払い処理）のSDKは、remoteのjsファイル(https://checkout.pay.jp）として提供されており、scriptタグのstaticなrenderingが不可能なnuxt(vue.js)から利用するには、他の環境（Rails, android, iosなど）とは異なり、少しばかり手間が掛かります。

実装

Nuxtのcomponentとして、PAY.JPのフォームを呼び出す機能一式をコンポーネント化します。https://checkout.pay.jpの呼び出しには、componentの$elに対するappendChildを利用することで、scriptタグのrenderingを動的に行います。

決済UIの呼び出しや、コールバック関数の定義箇所など、色々と制限があるようなので、扱いには注意が必要です。PAY.JPはSDKをローカル環境に配置不可能なので、API仕様の変更には常に注意しておく必要がありそうです。（参考：https://qiita.com/mori-dev@github/items/476a51eb8d76019fb647）