はじめに
※ この文章はベータ版です。
「PAY.JP Checkout 用の React.js コンポーネントをつくって
みた」にある PAY.JP Checkout 用のReact コンポーネントを
今風？にしてVue.js 3.x や Svelte 5 へ移植してみました。
PAY.JP とは？
決済代行サービスの1つで、カード決済のみを扱っています。
WEB API 及び WEB APIをラップした(いくつかのプログラミング言語の)SDKを
提供しています。
PAY.JP Checkout とは？
ポップアップさせたPAY.JPの提供するページで
カード情報を入力すると、JavaScript経由で、
入力したカード情報と一意のワンタイム・トークンを
返してくれる仕組みです。
PAY.JP Checkout を利用すれば、WEBアプリで
カード情報を管理する必要はなく、カード情報と一意の
ワンタイム・トークンを管理するだけで済むので、
開発者は利用者にとってセキュアで利用しやすい決済機能
付きのアプリを開発することが可能になります。
ワンタイム・トークンは、PAY.JPの提供する WEB API or
SDK で 使用します。
(Stripe etc の他の決済代行サービスにも、同等の機能が
あります。)
Vue.js 3.x Ver.
TS
呼出コード (Nuxt3)
動作サンプル (Nuxt3)
Svelte5 Ver.
TS
呼出コード (SvelteKit2)
動作サンプル (SvelteKit2)
React Ver.
関数コンポーネント
TS
呼出コード(Next.js)
呼出コード(Remix)
JS
クラス・コンポーネント
TS
呼出コード(Next.js)
呼出コード(Remix)
JS
動作サンプル (Next.js)
動作サンプル (Remix)
元記事からの変更点
-
PAY.JP Checkout の変更により、window.alert まわり
の処理が要らなくなっている、ので、コメントアウト or 削除。 -
変数名etcの変更
-
DOMまわりのコードを今風？に変更
-
Vue.js 版(TS)を追加
-
React版に関数コンポーネントを追加
-
Reactのクラス・コンポーネントのライフサイクルメソッド
まわりの変更に伴う変更 -
etc
注意点
-
TypeScript (TS)版の型まわりは適当な感じになってます。
-
コンポーネントのアンマウント時の処理にある下記のコードは、
一見必要ないようにみえますが、必要なコードですので、削除しては
いけません。必要な理由は、もと記事に書かれています。
window.PayjpCheckout = null