決済の設定方法
必ずClick Payの本番用申請が完了してから、設定してください。
『Click Pay』エレメント
| Connect Click Pay | Click Payと接続するためのものです。 |
| 支払い金額 | 支払う金額を数値で入力します。 |
| タイトル Card Name | 支払う利用者が入力する「カード名義人」です。 |
| タイトル Card Number | 支払う利用者が入力する「カード番号」です。 |
| 送信ボタン | 購入を行うボタンの表示です。 |
| 次回以降のカード入力省略 | 次回以降のカード入力の省略をするトグルの表示です。 |
| レスポンス表示内容 | 決済処理が行われた後に表示する内容を設定します。 |
都度決済の設定方法
目次
決済ページの作成
（１）配置してあるClick Payエレメントのタイプを「支払い」と設定してください。
（２）テスト用に、支払金額を入力してください。
テスト終了後に、支払金額をサービスに合わせて設定してください。
（３）決済成功時のClick Flowを設定します。
ClickFlow>ClickFlowの追加>ページ移動>新規ページ
新規ページをモーダルで作成してください。
決済成功のフローが完成しました。
（４）決済失敗時のClick Flowを設定してください。（３）の決済成功時と同様に設定してください。
次回以降のクレジットカードの入力省略に関して
（１）次回以降のカード入力を省略するトグルの設定をします。
Click Payエレメントの中の「次回以降のカード入力を省略」のボタンをON(アクティブ)にしてください。
（２）クレジットカード情報の登録ページの作成をします。
①支払いページに、「クレジットカード情報を登録」ボタンを設置します。
②「カードを登録する」ボタンから遷移するページを作成し、ヘッダーエレメントとClickエレメントを配置します。
③Click Payエレメントのタイプを「カード情報登録」に設定してください。
送信ボタン内にあります、テキストは、「クレジットカード登録の機能をもつボタン」、Removeテキストは、「クレジットカード情報削除機能を持つボタン」となりますので、設定してください。
これで、設定が終わりました。
動作確認について
- 動作確認は、テスト環境で行ってください。
- テストモードのトグルにチェックを入れてください。
画像
- カード決済 : テストカード テスト環境において、これらのテストカードの番号を用いることで本物のカード番号を入力することなくカード決済をテストすることができます。本物のカード番号はテスト環境では利用できません。セキュリティコードや有効期限は任意の値を利用できます。
テストカードは以下のURLから。
（１）Click側での動作確認
①テストカードからカード番号を取得しを記入し、
名義人や、有効期限を記入してください。
②「画面上に、決済が成功しました。」と表示されたらテスト決済成功です。
③Clickの管理画面を確認してみましょう。テストモードをオンにすると、テスト決済を確認することができます。Click Payでの管理画面上でのレコードは、Clickご利用のレコード数に加算されません。
（２）fincodeテスト環境での動作確認
fincodeテスト環境にログインしていただき、ダッシュボードからご確認頂けます。
本番環境の設定
- ご利用の際は、必ずテストモードのチェックを外してからご利用ください。
- fincodeの本番申請が完了してから、決済システムをご利用いただけます。
※決済後のデータはClickの管理画面側で見ることができます。
注意事項
本カード決済システムを用いた場合、顧客による注文確定の直前段階で、契約事項を確認できる「最終確認画面」を設ける必要があります。カード決済システムを導入する場合には、下記リンクを参考に、最終確認画面の設定を必ずしていただくよう、お願いいたします。
参照：通販事業者の皆さんへ 最終確認画面や申込書面の表示方法の参考となる資料（消費者庁）