Stripeを利用してWordPressにクレジット決済機能を作ってみよう③【単発決済】
こんにちは、webエンジニアのゾノ( @ozonosho )です。
さて、昨日のブログに続いて今回もStripeを利用してWordPressにクレジット決済機能を実装する方法をご紹介いたします。全５回ぐらいに分けて紹介していきますのでどうぞお付き合いください。
第３回目となる今回は単発決済の実装方法をご紹介します！
Stripeを利用して決済するためには２つの情報が必要
見出しのタイトルそのままですが、Stripeを利用して決済するためには下記２つが必要になります。
- 決済情報を送信するための決済ボタン
- 送信された決済情報を受け取って決済処理を実施するためのコード
どちらもフォーマットが用意されているので実装は簡単です。
さっそく見ていきましょう。
①決済情報を送信するための決済ボタン
まずは決済情報を送信するための決済ボタンを作りましょう。
決済ボタンはユーザーが実際にクレジット決済をおこなう際にクリックするボタンなので、固定ページなど決済ボタンを表示させたい箇所に設置します。
決済ボタンのフォーマットは下記のコードになります。
<form action="テーマまでのパス/checkout.php" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="公開可能キー" data-amount="金額" data-name="サービス提供元名称" data-description="サービス名称" data-image="イメージアイコン画像パス" data-locale="auto" data-currency="jpy" data-zip-code="false" data-allow-remember-me="false" data-label="ボタンに表示させたい文言"> </script> <!-- 必須ではないけど入れておくとメチャ便利です --> </form>
※「公開可能キー」はStripe管理画面に表示されているものをコピーしてください
実際の例として、このサイトで用意したサンプルの決済ボタンのコードを下記に掲載します。
<form action="https://tsukuriba.co.jp/wp-content/themes/base/checkout.php" method="POST"> <script src="https://checkout.stripe.com/checkout.js" class="stripe-button" data-key="pk_test_〇〇〇〇〇〇〇〇〇〇" data-amount="3000" data-name="Cree" data-description="サンプル商品" data-image="https://tsukuriba.co.jp/wp-content/themes/tsukuriba/images/common/logo_stripe.jpg" data-locale="auto" data-currency="jpy" data-zip-code="false" data-allow-remember-me="false" data-label="クレジット購入する"> </script> </form>
このコードをそのまま貼りつけると、下のような決済ボタンが表示されます。
※上記の決済ボタンを押したらそれっぽい動きをしますがこの段階ではまだ決済はできません
決済ボタンの作成はこれだけで完了です！
尚、ボタンのデザインはCSSで変更できるのでCSSをいじれる方は好みのデザインに変更してご利用ください。
②送信された決済情報を受け取って決済処理を実施するためのコード
決済ボタンが完成したので、つづいて決済ボタンから送信された情報をもとに決済処理をおこなうためのコードを用意します。
まずはテーマ直下に『checkout.php』と名付けたファイルを用意してください。ファイルを用意したら、中身に下記のコードを貼りつけます。
<?php
require_once(dirname(__FILE__) . '/stripe/init.php');
\Stripe\Stripe::setApiKey("シークレットキー"); //①
$token = $_POST['stripeToken'];
$email = $_POST['stripeEmail'];
$amount = $_POST['item_amount'];
$description = $_POST['item_description'];
$currency = 'jpy';
//決済処理
try {
$charge = \Stripe\Charge::create(array(
"amount" => $amount,
"currency" => $currency,
"source" => $token,
"description" => $description,
));
}catch (\Stripe\Error\Card $e) {
die('決済が完了しませんでした');
}
//サンキューページへリダイレクト
$thanks_url = 'サンキューページのURL'; //②
header('Location: ' . $thanks_url);
exit;
?>
これが決済処理コードのフォーマットになります。
ご自身で入力していただくのは①②の２カ所のみ！
②は決済後にサンキューページへ飛ばしたい方のみご利用ください。
①の「シークレットキー」はStripe管理画面に表示されているものをコピーしてください。
これで準備は完了です！
実際にテスト決済を実行してみよう
決済ボタンと決済処理のどちらも準備ができたので、実際にテスト決済を実行してみましょう。
下記のクレジット情報でテスト決済を動作させることができるのでぜひお試しください。
- カード番号：4242 4242 4242 4242
MM/YY：11/30（※現在以降の月であれば何でもOK）
CVC：111（※3桁の数字であれば何でもOK）
テスト決済が成功すると、サンキューページに飛ぶのを確認できると思います。
また、Stripe管理画面にも決済が反映されているので確認してみてください。
こんなふうに入金が反映されていれば成功です！
テスト決済が成功したら、上記で紹介した「公開可能キー」「シークレットキー」２つの情報をテスト用から本番用に変更してください。すると、実際のクレジットカードで決済ができるようになります。
- ※おまけ
- 今回は決済を実行する処理のみをお伝えしましたが、本連載最後の５回目のブログでは「決済時に管理者とユーザーにメールを自動送信する機能」などをご紹介いたします。興味ある方はそちらもぜひ参考にしていただけますと幸いです。
おわりに
以上、今回は単発決済の実装方法をご紹介させていただきました。
次回は【定期決済】を解説します！
全５回ぐらいに分けてStripeを利用してWordPressにクレジット決済機能を実装する方法を紹介していくので、ぜひ次回もご覧ください(*´`)
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
