クレジットカード決済(Stripe)かPaypalかで迷っているなら、両方使うのがおすすめ。
両方とも試してみて結局この結論に落ち着いた。
両方とも月々の固定費などはないし、ユーザーが使用した分だけチャージされるから、両方用意しておけば良いだけ。
この記事ではStripeのコードの使用方法も説明していく。
WordPressのプラグインでStripeやPaypalを使うことも可能だが、カスタマイズが難しくなるし、どのプラグインも月々5000円かかるものばかり。
WordPressでもちろん利用できるし、私はContact Form 7というお問い合わせフォームとして有名なプラグインと一緒に利用している。
Contact Form 7のカレンダーや、名前、Eメール入力機能はそのまま使い、最後にボタンを押すとStripeの支払いフォームが飛び出す流れです。
WordPressで簡易なショッピングカート（支払い）を構築できる？
WordPressで簡易なショッピングサイト（支払いサイト）を構築したいと思う人は多いはず。
わざわざ、HP制作会社に依頼まではしたくないし、なるべくなら既存のWordpressなどの基礎知識のみで、手軽に安く構築したい。
このブログでは、
- WordPress
- Paypal や Stripeのような決済サポートシステム
- Contact Form 7
の3つを使ってショピングサイトの構築をする。
WordPressの投稿ページごとに商品を作成し、そこでユーザーが個人情報を入力し、個数などを選択し、サイトが合計金額を算出して、Paypal や Stripeに合計金額を渡し、支払いが完了するようなシンプルなサイトとする。
ショッピングカートがあるよな複雑なサイトは既存のプラグインを利用した方がいいと思う。
プラグインだとどれも月々の費用がかかるため、なるべく単純なシステムを作りたい人向けの記事だと思ってほしい。
Paypalの欠点。なぜStripeをおすすめするか
Paypalの方が手数料が若干安いので売り手としては利益率が高いが、そのかわりpaypalはpaypalアカウントを持っていないと支払いができない場合がある。
クレジットカード支払いも一応対応しているが、そのユーザーの位置情報、IP情報などで安全だと判断された場合のみ可能。
なので、ユーザー側からすると支払いするのに手間がすごいかかる。これがユーザーの離脱につながりやすい。
私もいくつかサイトを運営していて、Paypalだけだと離脱率が高いことに気づいた。
Paypalだとログインを聞かれたり、クレジットカード支払いでも住所を入力しなくてはいけなかったり、セキュリティのためにPaypalの今の支払い方法があるんだろうけど、かなり面倒。
Stripeだと設定によるが、クレジットカード、Email、CVCとクレカ有効期限を入力するだけで簡単に支払いできて、ユーザーが迷わず支払いできる。
クレカ決済はPaypalとStripe両方使えば良い
いろいろ試した結果、両方メリットがある。
オンラインサイトでのクレジットカードでの支払いが怖いと感じる人にはPaypalは人気だし、簡単に支払いたいという人にはStripe。
というわけで、Contact Form 7を使ってPaypalとStripeの支払い両方をサポートするようにした。
仕組みは簡単で、Contact Form 7のラジオボタンでクレジットカードかPaypalをユーザーに選択させる。
[radio payment-type default:1 “クレジットカード” “Paypal”]
あとは、functions.php かfooter.phpなどで,Javascriptを使って、変数にクレカの場合は1を渡す。
なぜStripeとContact Form 7を一緒に使うか
商品が1つや2つしかない場合は、ある程度金額が決まっているので、StripeやPaypalが提供するボタンを利用して支払いを完了させれば良いが、お客さんがまとめ買いしたかったり、時期などによって値段が変わるものはカレンダーの機能や計算する機能が必要になる。
PaypalとStripeのAPIは基本的に金額をPaypalやStripeのAPIに渡して支払いが完了するだけで、このような機能はサポートしていない。
ここで必要になってくるのがContact Form 7。
カレンダー機能や、Eメールなどの入力フィールドがすでに用意されていて、もし入力せずにsubmitボタンを押すと自動的にエラーをユーザーに表示してくれる最も人気の高いお問い合わせプラグインだ。
これをうまく利用することで、より自由度の高い商品販売サイトを作ることができる。
StripeのCheckout使用方法
Contact Form 7で最後のsubmitボタンを押し、メールが送信されるとこのイベントが呼ばれる。
以下のコマンドでStripeのフォームが飛び出す。
credit_card_selectedは、PaypalかStripeか選択するときのためのvariable。
これでPaypalかStripeの両方に対応できる。
詳しくは公式サイトのCheckoutをチェックしてみよう。
document.addEventListener( 'wpcf7mailsent', function( event ) {
// credit card payment (stripe)
if(credit_card_selected == 0){
var your_email = $('.wpcf7-email').val();
calculated_stripe_value = Math.round(final_value * 100);
handler.open({
name: 'test site name',
description: test_description,
currency: 'jpy',
amount: calculated_stripe_value,
email: your_email
});
event.preventDefault();
// paypal payment
}else{
// PAYPAL PAYMENT CODE
}
});
無事にユーザーがクレジットカード情報を入力すると、token: function(token) {が呼ばれる。この段階では支払いは完了していない。
Tokenが生成されただけの状態。
ここからはAjaxを使って生成されたtokenをStripeに送信することですべての支払いが完了する。
本家の公式サイトではajaxの呼び方までは解説されていないので、wordpressでStripeを利用する人にはこのサンプルコードは便利なはず。
stripeCharge.phpをurlに設定することで、支払いするためのコードを呼ぶ。
window.location.replaceはもし支払いが失敗した場合、リダイレクトしユーザーに支払いが完了していないことをお知らせする。
クレジットカードが期限切れだったり、デビットカードで銀行に預金が十分にない場合など、クレジットカードの支払いが拒否されることは結構ある。
var handler = StripeCheckout.configure({
key: 'pk_live_XXXXXXXXXXXXXXXX',
image: 'https://xxxxx.com/icon.png',
locale: 'auto',
token: function(token) {
//console.log(token)
jQuery.ajax({
url: '/stripeCharge.php',
type: 'post',
data: {tokenid: token.id, email: token.email, ttlAmount: calculated_stripe_value, event: event_name_and_user_info},
success: function(data) {
if (data == '') {
console.log("Card successfully charged!");
window.location.replace("https://xxxxxxx.com/thank_you_for_payment");
}else {
console.log("Success Error! - something happened in stripeChange.php");
console.log(data);
window.location.replace("https://xxxxxxx.com/payment_fail");
}
},
error: function(data) {
console.log("Ajax Error!");
console.log(data);
}
});
}
});
StripeでChargeの使用方法
以下がstripeCharge.php。
公式サイトではChargeのページで詳しく解説されている。
さいきほどのページからtokenid, ttlAmount, event情報などが渡されるので、それらをchargeする。
require_once( dirname(__FILE__) . '/stripe/init.php' );
\Stripe\Stripe::setApiKey('sk_live_XXXXXXXXXXXXXX');
if(isset($_POST['tokenid'])) {
$token = $_POST['tokenid'];
$amount = $_POST['ttlAmount'];
$event = $_POST['event'];
try{
$charge = \Stripe\Charge::create(['amount' => $amount, 'currency' => 'aud', 'description' => $event, 'source' => $token]);
}catch(Stripe\Error\Card $e){
//fail
ChromePhp::log('stripeCharge failed');
}
}
コメント