背景
同窓会のウェブサイトを運営しています。その年会費の支払いをオンライン決済でやることになり、決済フォームの自作を始めました。後述しますが、決済オンラインサービスはStripe を採用。そして、決済という性格上、それなりの見栄えとユーザビリティが必要、それならばCSS フレームワークのBootstrap。ということで、BootStrap とStripe で決済フォームを作ることにしました。
BootStrap は言うまでもなくたくさんの記事、サンプル、稼働例があります。また、Stripe は、カード決済のサービスに加え、決済フォームをつくるためのサービスも提供しており、立派なサンプルがありました。
が、Bootstrap でStripeを、という例が、スニペットはたくさんあったのですが、これ、といったものが少なかったので、開発の過程でつくったシンプルなものを公開することにしました。どうぞご自由にお使いください。
シンプルに作ることを目指したので、使用可能なカードブランドの説明等は一切省き、必要最低限の機能に絞ったものです。
ソースコードとデモ
HTML とJavascript のフロントエンドのみです。カード情報を入力しsubnmit すると、Stripe の決済のためのトークン取得を行うものです。本番の決済では、そのトークンを指定して実際の支払いのAPI を実行するのですが、そちらの実装はありません。
index.html にcssとscript をすべて記載し1ファイルで納めたものと、css/js を分離したものと2種類を用意しています。もちろん動作は同一になります。
決済サービス「Stripe」について
他の決済サービスとの比較と合わせて、以下の記事が大変参考になります。
カード決済システム【Stripe】が超便利だったので比較＆レビューしてみた！
たくさんある決済サービスの中で、Stripe を選んだ理由は、以下になります。
- 実は世界ではメジャーなサービスであること
- 手数料は一律3.6%、それ以外はすべてフリーで利用できること
- SDK が充実しており、ウェブサイトへの導入がカンタンなこと
- 利用可能カードが豊富なこと(JCBも2018年後半から対応されました)
- ユーザの支払いから指定口座への振り込みまでの期間が比較的短いこと
- サポートが充実していること
実際に使ってみての所感
「背景」に触れた年会費支払いサイトでの運用を開始しました。そのうえでの所感です。基本、とても使い勝手がよい優れたサービスという所感です。
ユーザの支払から銀行振り込みまで期間が短い
ドキュメントには「一か月以内」と記載がありましたが、一週間くらいでした。支払い時期や銀行の営業日の都合にも左右されるので、ドキュメント通り一か月かかることもあるかもしれませんが、通常は一週間くらいです。もうひとつ、銀行振り込みの曜日を指定できるのも、他の都合との同期ができるということで、重宝します。
注）JCBはこの期間は1ヶ月でした。
サポートはとても丁寧
振込先の銀行の口座指定を間違う、という大変なことをやらかしたのですが、丁寧なメールが到着しました。「振込できません」だけでなく、「どうやら口座名義人が違うようです」といった詳細の記載がある案内、それと、その名義人変更に時間がかかっていたら、「いかがですか、更新次第、振込を再開しますよ」と親切な案内も。サポート、大事ですね。
本番環境への移行もカンタン
他のサービスだと、審査が面倒だったりするようですが、必要事項をきちんと記載すれば、すぐに本番環境が有効になります。テスト環境との切り替えは、それぞれに割り当てられたキーを変えるだけ。
支払いキャンセル手数料の負担者に注意！
キャンセルごとに108円かかります。ドキュメントに記載がちゃんとあったのですが、キャンセル料の負担は、「支払者」ではなく、「受け取り側」です。つまり、キャンセルしたら、支払者には支払い額がそのまま返却されますが、受け取り側は、他の受取から108円が天引きされます。
本人確認が必要
必須ではないみたいですが。身分証明書の提出が必要。免許証でよい。
JCB対応
対応しているカードブランドは、標準ではVISAとMaster。JCBは、2018年後半あたりから対応されましたが、サポートにメールで「JCB対応希望」と連絡して申し込み、その後審査を経て使えるようになります。
参考文献
Stripe 公式サイト
https://stripe.com/jp
Stripe API Reference
https://stripe.com/docs/api