EC サイトを運営していると、「クレジットカード情報を保存したい」というニーズはよくあると思います。この記事では、KOMOJU を使ってクレジットカード情報を保存し、次回以降の決済をスムーズにする方法を2パターン紹介します。
① Hosted Page を使ってカードを保存する
Hosted Page（KOMOJU が提供する決済ページ）の UI にカード情報を保存できるチェックボックスを表示し、ユーザーの同意のもとに保存ができます。
Step 1. セッションを作成する
まず、external_customer_id を指定してセッションを作成しましょう。Hosted Page にチェックボックスが表示されるようになります。external_customer_id は任意の値を設定することが可能です。
curl --request POST \
--url https://komoju.com/api/v1/sessions \
--header 'accept: application/json' \
--header 'authorization: Basic YOUR_API_KEY' \
--header 'content-type: application/json' \
--data '
{
"payment_data": {
"capture": "auto",
"currency": "JPY",
"intent": "one_time"
},
"return_url": "https://www.yoursite.com",
"amount": 1000,
"currency": "JPY",
"external_customer_id": "your_customer_id_123",
"payment_types": [
"credit_card"
]
}
'
Step 2. ユーザーがチェックをつけて決済
「決済情報を保存する」にチェックを入れて決済すると、そのカード情報が external_customer_id に紐づいて保存されます。
Step 3. 保存済みカードで決済する
次回以降の決済では、同じ external_customer_id を指定してセッションを作成するだけで、保存されたカード情報が自動的に選択されます。
保存されたカード情報を削除したいときは？
カード情報を削除するボタンをクリックすれば、紐づいたカード情報を削除されます。また、保存されたカード情報を削除する API も用意されています。詳しくはこちらのドキュメントをチェックしてください。
② Hosted Page を使わずに保存する（Customer）
「もっとシームレスな UI にしたい」「自社のフォームで情報を集めたい」といった場合は、 Customer オブジェクトを利用する方法もあります。
Step 1. カスタマーを作成する (Session:Create)
まずはクレジットカード情報とともにカスタマーを作成します。
curl --request POST \
--url https://komoju.com/api/v1/sessions \
--header 'accept: application/json' \
--header 'authorization: Basic YOUR_API_KEY' \
--header 'content-type: application/json' \
--data '
{
"mode": "customer",
"currency": "JPY",
"return_url": "https://example.com/order/complete",
"amount": 1000
}
このレスポンスとして、カスタマー ID が返却されます。
"customer_id":"your_customer_id"
上記で作成したセッション内でクレジットカードで決済を行うと、この Customer ID に紐づく形でクレジットカード情報が保存されます。
なお、同様の概念を Customer:Create でも再現することが可能です。ただし、Customer:Create するときに直接クレジットカード番号を入力するのは PCI-DSS 上よろしくありませんので、SecureToken を利用ください。
Step 2. 保存したカードで決済する
取得したカスタマー ID を使って決済します。
curl --request POST \
--url https://komoju.com/api/v1/payments \
--header 'accept: application/json' \
--header 'authorization: Basic YOUR_API_KEY' \
--header 'content-type: application/json' \
--data '
{
"currency": "JPY",
"amount": 1000,
"capture": true,
"customer": "your_customer_id"
}
'
注意点
・いずれの手法をとった場合でも、1 カスタマーにつき保存できるカードは1枚のみとなります。
・1 カスタマーに複数のカードを紐づけたい場合は、自前の DB で複数の KOMOJU カスタマー ID を管理する実装が必要です。
まとめ
保存されたカードを使った決済体験を実現することで、ユーザー体験の向上やコンバージョン率の改善が期待できます。要件に応じて、適切な保存方式を選びましょう！
