Stripeはクレジットカード決済を代行するウェブサービスです。今回はこのサービスを利用して非常にシンプルな高んひゅうボタンをワードプレスに実装する方法を解説いたします。
プラグインでショートコードからStripe課金ボタンを表示する仕組みを構築
まず簡単なプラグインのひな型を準備して、ショートコードを定義します。
<?php
/*
Plugin Name: Stripeのボタン表示サンプル
Plugin URI: http://xxxxxx.com/
Description: Stripeボタンを表示します
Version: 1.0
Author: WP Doctor
Author URI: https://wp-doctor.jp/
*/
add_shortcode('stripe', function() {
?>
Stripeのコードをここに実装していきます
<?php
});
?>
このコードは[stripe]というショートコードで任意のコードを出力するためのものです。ここにStripeのボタンを実装すればストライプのボタンが表示されるようになります。
Stripeの支払ボタンを実装する
次に上記の「Stripeのコードをここに実装していきます」の部分を書き換えてStripeの支払ボタンを実装していきましょう。
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="registerbtn">コンテンツを購入する</button>
<script>
jQuery("#registerbtn").on("click", function(event) {
event.preventDefault();
var handler = stripe_checkout();
handler.open({
name: "購入する",
description: "",
amount: '2000',
currency:"jpy",
panelLabel:"購入"
});
jQuery(window).on("popstate", function() {
handler.close();
});
});
function stripe_checkout(paycontents_id) {
var handler = StripeCheckout.configure({
key: "pk_test_XXXXXXXXXXXXXX",
locale: "auto",
token: function(token) {
var ajaxurl = "<?php echo admin_url('admin-ajax.php');?>";
jQuery.post(ajaxurl,
"token="+token.id+"&action=stripebuy").done(function(data) {
data = JSON.parse(data);
if (data["succeed"] == "OK") {
alert("購入成功しました！");
} else {
alert(data["succeed"]);
}
}).fail(function() {
alert( "購入に失敗しました！" );
});
}
});
return handler;
}
</script>
※pk_test_XXXXXXXXXXXXXXの部分はお使いのストライプアカウントでの公開キーを入力してください。
※name:のところにポップアップのタイトル、amountのところに料金を追加します。ただこちらはポップアップに表示するためだけの設定ですのでこの料金が実際に課金されるわけではありません。
これで、先ほどのプラグインを有効にされて、ショートコード[stripe]をお好きな箇所に挿入されると、サイト上ではStripeの支払いポップアップが表示されるはずです！
このコードは、ユーザーにクレジットカード情報を入力してもらい、Stripeに送信後そのクレジットカードが正しく課金できるかを調べてもらいトークンと呼ばれる課金処理に入るためのカギのようなものをもらうためのコードです。
Stripeから受け取ったトークンで実際にクレジットカードに課金してみましょう
WordPressのAjaxを利用してStripeの課金を実際に行います。
まず、Stripeの課金を行うためのライブラリをダウンロードして先ほど制作したプラグインと同じディレクトリに配置します。
そのライブラリをワードプレスのAJAXフックに追加してみましょう。
全体のコードは現在このようになっています。
<?php
/*
Plugin Name: Stripeのボタン表示サンプル
Plugin URI: http://xxxxxx.com/
Description: Stripeボタンを表示します
Version: 1.0
Author: WP Doctor
Author URI: https://wp-doctor.jp/
*/
add_shortcode('stripe', function() {
?>
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="registerbtn">コンテンツを購入する</button>
<script>
jQuery("#registerbtn").on("click", function(event) {
event.preventDefault();
var handler = stripe_checkout();
handler.open({
name: "購入する",
description: "",
amount: '2000',
currency:"jpy",
panelLabel:"購入"
});
jQuery(window).on("popstate", function() {
handler.close();
});
});
function stripe_checkout(paycontents_id) {
var handler = StripeCheckout.configure({
key: "pk_test_XXXXXXXXXXXXXXX",
locale: "auto",
token: function(token) {
var ajaxurl = "<?php echo admin_url('admin-ajax.php');?>";
jQuery.post(ajaxurl,
"token="+token.id+"&action=stripebuy").done(function(data) {
data = JSON.parse(data);
if (data["succeed"] == "OK") {
alert("購入成功しました！");
} else {
alert(data["succeed"]);
}
}).fail(function() {
alert( "購入に失敗しました！" );
});
}
});
return handler;
}
</script>
<?php
});
function stripebuy(){
require_once(dirname(__FILE__).'/stripe-php-7.14.2/init.php');
//ここにStripeによる課金のコードを記載します。
}
add_action( 'wp_ajax_stripebuy', 'stripebuy' );
add_action( 'wp_ajax_nopriv_stripebuy', 'stripebuy' );
?>
Stripeで受け取ったトークンを利用してクレジットカードに課金します
最後にStripeで実際に課金するコードをワードプレスのバックエンドで処理するプログラムを創っていきましょう。
「ここにStripeによる課金のコードを記載します」のところに下記のコードを挿入します。
$token=$_POST['token'];
\Stripe\Stripe::setApiKey("sk_test_XXXXXXXXXXXXXX");
try{
$charge = \Stripe\Charge::create([
'description' => '商品名',
'amount' => 2000,
'currency' => 'JPY',
"card" => $token
]);
} catch (Stripe_ApiConnectionError $e) {
echo json_encode(array("succeed"=>"ネットワークの問題で決済できませんでした。後でもう一度お試しください"));
wp_die();
} catch (Stripe_InvalidRequestError $e) {
echo json_encode(array("succeed"=>"プログラムのエラーにより決済できませんでした"));
wp_die();
} catch (Stripe_ApiError $e) {
echo json_encode(array("succeed"=>"Stripeのサーバーがダウンしています。後でもう一度お試しください"));
wp_die();
} catch (Stripe_CardError $e) {
echo json_encode(array("succeed"=>"カード会社が決済を停止しました"));
wp_die();
}
if($charge["paid"]){
echo json_encode(array("succeed"=>"OK"));
wp_die();
}else{
echo json_encode(array("succeed"=>"不明な理由で決済に失敗しました。"));
wp_die();
}
※sk_test_XXXXXXXXXXXXXXのところにはStripeのシークレットキーを管理画面の開発APIメニューより取得して記載してください。
‘amount’ => 2000, のところは実際に課金する料金を指定します。
“card” => $token のところでStripeが発行した課金用のトークンを指定しています。
catch (Stripe_ApiError $e) 等のところでStripe側のエラーを取得してもしエラーが出た場合はそのエラーを返しています。
うまくいったら、echo json_encode(array(“succeed”=>”OK”));を返してワードプレス側で課金成功のアラートを表示しています。
このワードプレス側のコードに様々な処理を追加することでユーザーが課金した後に何らかの記録をしたり、サービスを提供するなどの仕組みの構築も可能ですね。
お試しくださいませ。
