【簡単・オシャレ】PHPでstripeの決済を導入する手順【決済システム導入】

2015年から日本円での決済が可能になった「stripe」の決済代行システムをPHPで実装する手順を纏めてみました。
KICK STARTERやSlackなどのイケてる急成長サービスから、Facebookやtwitterなどの有名サービスにも使われています。

■導入事例

そんな人気サービスのstripe、今回はCheckoutを使った１回限りの決済の実装を対象に解説していきます。

ドキュメントがまだ全部英語なんですが、

• 見た目の良さ抜群
• 初期費用・月額費などはかからず、料金は決済ごとにかかる3.6%のみ
• 決済時にスマホの番号を登録しておくとメアドと紐づけて次回からワンタップ支払いが可能
• なのにやることはほぼないくらい手軽に実装できる

という素晴らしさ！！
これから決済システムの導入を考えておられる方・実装に悩むエンジニアには超オススメです！！

僕の語彙力では良さが伝えきれないので詳しくはこちらw
Checkout ウェブとモバイルに最適な決済のフロー
シンプルな料金体系 手数料の見える化
ちなみにstripeは定期購読や募金、マーケットプレイス型の決済などにも対応してます(^ω^)

#■必要なもの

• PHP（僕は7.0を使いました）
• stripeのアカウント
• composer

オプション
-　Laravel（5.3）
（フレームワークはLaravelを利用しましたが、利用しなくてもいけます。）

#①stripeのアカウント開設
こちらからアカウント登録できます。

ものの2~3分で開設できて、すぐテストアカウントの利用が可能です。

#②お試し
アカウントが開設できたら、まずはチュートリアルから、どれだけstripeがお手軽か試してみてください！！
クレジット決済のみの導入なら、stripeが機能的にも見た目的にも一番だと思います。
「Pay with Card」ボタンからテストカード番号を入力して決済してみましょう。

#③APIライブラリのインストール
stripeの便利さを体感できたところで、いよいよ実装開始です。
stripeのAPIライブラリをインストールします。
各言語ごとにインストール手順がこのページに纏まってます。zip形式で直接ダウンロードも可能です。

composer.jsonに以下を追加し,composer updateしてください。
2016年11月現在、最新バージョンは4.1.1です。

composer.json

{
  "require": {
    "stripe/stripe-php": "4.*"
  }
}

※Laravelにはキャッシャーというstripeと連携する機能が元々備わっていますが、
定期購読向けの機能ですし、今回は汎用的な紹介なので、本記事では利用しません。

#④課金ロジックの実装
それではCreating Chargeのページを参考に、課金ロジックを実装していきましょう。
わかり易くするため、ルートに直接ロジックを書き込んでいます。

/app/routes/web.php

Route::post('/welcome', function () {

	//ここにstripeアカウントのAPIキーをコピペ
　　　　　　　\Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXXXXXXXXXXXXXX");

	/* 以下「Creating Charges」からのコピペ */

	// Get the credit card details submitted by the form
	$token = $_POST['stripeToken'];

	// Create a charge: this will charge the user's card
	try {
	  $charge = \Stripe\Charge::create(array(
	    "amount" => 1000, // 課金額はココで調整
	    "currency" => "jpy",
	    "source" => $token,
	    "description" => "Example charge"
	    ));
	} catch(\Stripe\Error\Card $e) {
	  // The card has been declined
	}

	// サンクスメール送る...

	return view('home');
});

http://XXX~/welcomeにデータがポストされると、1000円課金されるように設定しました。
これで半分以上終了！

ちなみに自分のAPIキーはマイページの右上「Account settings」の中に書いてあります。

#⑤課金ボタンを作る
仕上げに課金ボタンを作りましょう。Checkoutのリファレンスを参考に、課金ボタンを置きたいページにコードを追加してください。

例)

<!-- ポスト先を"/welcome"に変更 -->
<form action="/welcome" method="POST">
<script
  src="https://checkout.stripe.com/checkout.js" class="stripe-button"
  data-key="pk_test_XXXXXXXXXXXXXXXX"　<!--ここにAPIキーをコピペ-->
  data-amount="1000"　<!-- 表示する課金額を記入 -->
  data-name="TEST"
  data-description="TESTTEST"
  data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
  data-locale="ja"<!-- autoでも日本語表示になりましたが、念のためjaに変更 -->
  data-currency="jpy">
        <!-- LaravelユーザーはCSRFトークン忘れずに。 -->
        //$.ajaxSetup({
        //    headers: {
        //        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        //    }
        //})
</script>
</form>

これでブラウザから確認してみると「Pay with Card」のボタンが出てくるはずです！
押してみると...

モーダル付きの洗練された決済画面が表示されましたね！
このままテストカードで決済してみて、stripeのマイページ画面に決済金額が反映されたら無事に実装完了です！

ちなみに「決済情報を保存する」から電話番号を登録しておくと、次回同じメールアドレスを入力すると
自動でSMSで６桁のコードが届くようになるので、それを入力してワンタップ支払いで終了です。
手軽すぎる。。。

SMSで届くコードの入力画面

ワンタップ決済画面

#⑥まとめ

いかがでしたか？ 本当に感動したので気持ちが入りすぎた気もしますが（笑）、stripeの良さが少しでも伝われば光栄です！
そのうち定期購読やプラットフォーム型決済についても記事書きたいと思います〜。
ありがとうございました。

おまけ

• Checkoutのカスタム（Ajax使うとか）がしたい場合はこちらから。

• 入力項目のカスタマイズもしたい場合はStripe.jsリファレンスを参考に。これもめちゃくちゃ簡単です。