決済機能のクライアントサイド実装（クレジットカード情報のトークン化）
クレジットカード情報のトークン化手順3~5
1. クライアントサイドでPAY.JPのAPIを使用するために必要なJavaScriptを読み込む
2. 実際にトークン化を行うJavaScriptファイルを作成する
3. PAY.JPのテスト公開鍵を取得し設定する
4. フォームにクレジットカード情報の入力欄を追加する
5. トークン化の処理を行う
PAY.JPアカウントを作成
PAY.JPのテスト公開鍵を取得し設定
公開鍵の情報は、PAY.JPにログイン後、ページの左側の「API」をクリックすると確認できる
公開鍵を設定
app/javascript/card.js
const pay = () => {
const payjp = Payjp('pk_test_***********************')// PAY.JPテスト公開鍵
const form = document.getElementById('charge-form')
form.addEventListener("submit", (e) => {
console.log("フォーム送信時にイベント発火")
e.preventDefault();
});
};
window.addEventListener("load", pay);
※鍵情報はGitHubにPushするなどして公開してはいけない
鍵の情報は後で環境変数に設定する
フォームにクレジットカード情報の入力欄を追加
フォームのもととなるHTML要素を用意
app/views/orders/index.html.erb
<div class='form-wrap'>
<p>カード番号</p>
<div id="number-form" class="input-default"></div>
</div>
<div class='form-wrap'>
<p>期限</p>
<div id="expiry-form" class="input-default"></div>
</div>
<div class='form-wrap'>
<p>カード背面4桁もしくは3桁の番号</p>
<div id="cvc-form" class="input-default"></div>
</div>
PAY.JPのライブラリを使い、1で用意したHTML要素をフォームと置き換え
elementsインスタンスのメソッドで入力フォームを作成
const hogeElement = elements.create('指定したいフォームのtype')
mountメソッドでsampleというid属性の要素とフォームを置き換える
hogeElement.mount('#sample')
card.jsを編集
app/javascript/card.js
const pay = () => {
const payjp = Payjp('pk_test_***********************')// PAY.JPテスト公開鍵
const elements = payjp.elements();
const numberElement = elements.create('cardNumber');
const expiryElement = elements.create('cardExpiry');
const cvcElement = elements.create('cardCvc');
numberElement.mount('#number-form');
expiryElement.mount('#expiry-form');
cvcElement.mount('#cvc-form');
const form = document.getElementById('charge-form')
form.addEventListener("submit", (e) => {
console.log("フォーム送信時にイベント発火")
e.preventDefault();
});
};
window.addEventListener("load", pay);
フォームに入力されたカードの情報を、JavaScriptで取得してトークン化する作業
createToken(element: Element, options?: object)メソッド
このメソッドを使うと、戻り値としてカード情報のトークンを取得できる
app/javascript/card.js form.addEventListener("submit", (e) => {}内に追記
form.addEventListener("submit", (e) => {
payjp.createToken(numberElement).then(function (response) {
if (response.error) {
} else {
const token = response.id;
console.log(token)
}
});
e.preventDefault();
});
createTokenメソッドの第一引数には、カード番号入力フォームとなっているelementインスタンスであるnumberElementが入る
then以降に、レスポンスを受け取ったあとの処理を記述
変数responseには、PAY.JP側からのレスポンスとステータスコードが含まれる
response.idとすることでトークンの値を取得
クレジットカード情報を送信してトークンが生成されるか確かめる
今回はPAY.JPのテストモードなので、テストカードを使う
console.log(token)の記述通り
コンソール上にトークンの値が表示されるか確かめる
