
Stripeの日本での正式サービスがスタートしてます。が、まだまだ日本語での情報が少ないです。開発者向けドキュメントに目を通していたのですが、全部英語だし、文量も結構あるしで、ちょっと心が折れかけました。
本当に簡単にクレジットカード決済できるのか? とりあえずデジタルコンテンツをダウンロード販売できる最小限の仕組みを実験的に作ってみたところ…なんとかなりました。ある程度プログラムの知識のある方であれば、頑張ればなんとかなるレベルだと思います。
実際にやってみた手順をざっくりと紹介してみます。検証が不十分かもしれないので、コードをコピペする場合はご注意下さい。
Stripe+phpでコンテンツ販売の仕組みを作る
今回の目標
クレジットカード決済後に有料コンテンツをダウンロードできるようにすることが目標です。上の画像のように商品の販売ページの申し込みボタンをクリックすると、フォームが表示され支払いに進みます。
事前準備
- phpが動作する環境
- Composerがインストール済みであること(php用のライブラリをインストールするために必要)
本当はSSLで接続できるようにしないといけないのですが、今回は実験用ということで省略してローカル環境で試しています。
構成
できるだけ簡単になるように、次の3つのファイルで構成しました。
- index.html …商品の販売ページ
- charge.php …決済処理を行うスクリプト
- thanks.html …決済完了後に表示するページ
ちなみに、ダウンロード商品の受け渡しはメールで送ることを想定しています。そのために、決済完了後にメルマガに自動登録してステップメールが送られるようにしておきます。
Stripe決済の超基礎知識
カード情報のトークン化
まず理解しないといけないのが、カード情報のトークン化。クレジットカードの番号という超重要な個人情報を自分のサーバーに保存しなくていいように、暗号化されたトークンを事前に作成します。そのトークンを使って決済処理を行います。
Checkout or Stripe.js
で、そのトークン化するために用意されているのがCheckout、もしくはStripe.jsというJavascriptのライブラリです。
Checkoutは簡単に埋め込めこむことができるのですが、フォームの細かいカスタマイズができません。一方、Stripe.jsは思い通りに作り込むことができますが、入力値のバリデーションなどは自分でやらないといけません。
今回は、手っ取り早く済ませるためにCheckoutを使うことにしました。
ステップ1:StripeのAPI Keyを取得
Stripeのアカウント登録をして、API Keyを取得しておきます。実際に課金できるようにするためには本人確認の手続があるのですが、とりあえずテストをするだけならすぐにはじめられます。
API Keyが「Account Setting」の「API Keys」にあります。今回はテスト用のSecret KeyとPublishable Keyを使います。
ステップ2:申し込みフォームを作る
Stripe.jsではなくてCheckoutを使います。販売ページに埋め込むコードはこんな感じです。ここでパラメーターとして入力するのはPublishable Keyの方なのでお間違いなく。
<form action="./charge.php" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_**************" data-amount="100" data-name="ここにブランド名" data-description="ここに商品名" data-image="https://stripe.com/img/documentation/checkout/marketplace.png" data-locale="ja" data-zip-code="true" data-label="今すぐ申し込む"> </script> </form>
これで、ボタンをクリックすると申し込みフォームのモーダルが表示されます。入力した内容はcharge.phpにPOSTされます。
ボタンが小さかったので、とりあえずCSSでいじっておきます。
.stripe-button-el { width: 400px; } .stripe-button-el span { font-size: 30px; padding: 20px; min-height: 70px!important; }
ステップ3:PHP用のStripeライブラリをインストール
決済処理を行うコードを書く前に、ライブラリをインストールしておきましょう。phpの場合はcomposerを使います。
composer.jsonに以下の通りに記述します。
{ "require": { "stripe/stripe-php": "3.*" } }
あとは、composerのコマンドを叩きます。
composer install
これで、vendorフォルダ以下にライブラリが配置されます。
ちなみに、言語ごとのライブラリはこちらにまとめられています。
ステップ4:決済処理のコードを書く
いよいよ決済処理を行うコードを書きます。こうなりました。
<?php // ライブラリを読み込む require_once 'vendor/autoload.php'; // Secret Keyをセット $secret_key = 'sk_test_************'; \Stripe\Stripe::setApiKey($secret_key); // POSTされたデータが存在するなら if (isset($_POST['stripeToken']) && isset($_POST['stripeEmail'])) { // POSTされたデータを受け取る $token = $_POST['stripeToken']; $email = $_POST['stripeEmail']; // 決済処理 try { $charge = \Stripe\Charge::create(array( 'source' => $token, 'amount' => 100, 'currency' => 'jpy', )); } catch (\Stripe\Error\Card $e) { // 決済できなかったときの処理 die('決済が完了しませんでした'); } // 決済完了後にメルマガへ自動登録 $post_url = 'https://*********/'; $param = array( 'Publisher_Id' => '****', 'Magazine_No' => '**', 'Mail' => $email, ); $options = array('https' => array( 'method' => 'POST', 'content' => http_build_query($param), )); file_get_contents($url, false, stream_context_create($options)); // サンクスページへリダイレクト header('Location: http://vccw.dev/test/thanks.html'); exit; }
ライブラリを読み込む
composerでインストールしたautoload.phpを読み込むだけでOKです。
Secret Keyをセット
今度はPublishable KeyではなくてSecret Keyです。
POSTされたデータを受け取る
Checkoutが作成したトークンとメールアドレスを受け取ります。POSTされたデータがない場合は、処理をしないようにしています。
決済処理
いちばん重要な部分ですね。受け取ったトークンを使って決済を実行します。try文で囲んでいるので、クレジットカードが有効ではなかった場合の処理もできている…はず(ここは未検証)
決済完了後にメルマガへ自動登録
ここでメルマガに登録しておきます、エキスパなどのメール配信ASPの登録フォームのコードがあれば、それをphpからPOSTしてあげれば、自動登録ができます。登録用のAPIがあればもっといいんだけど…。
サンクスページへリダイレクト
最後にサンクスページにリダイレクトして完了です。
動作チェック
きちんと決済できるかテスト環境で試してみます。
テスト用のクレジットカード番号は「4242 4242 4242 4242」です。有効期限は今より未来であればOKで、CVCは適当な数字で。
このようにきちんと課金されてることがダッシュボードで分かります。やったー!
最後に
いかがだったでしょうか? Stripeでの決済を試してみたいと思ってた方には、参考になったかもしれません。
僕自身も実際に試してみて、商品販売をする仕組みが比較的簡単に作れることが分かりました。ただ、継続課金とかユーザー管理をするとなるともっと大変そうですね。
この記事へのコメント