WordPress上で決済システムを作る。PaypalとStripeを比較

スポンサーリンク

クレジットカード決済(Stripe)かPaypalかで迷っているなら、両方使うのがいいと思う

両方とも試してみて結局この結論に落ち着いた

両方とも月々の固定費などはなく、ユーザーが使用した分だけチャージされるので、両方用意しておけばユーザーが好きな方を選択する

WordPressのプラグインでStripeやPaypalを使うことが可能だが、どのプラグインも月々5000円ほどかかったりして案外高価

なので、私はContact Form 7というお問い合わせフォームとして有名な無料プラグインと一緒に利用することで無料でWordpress上に決済システムを構築した

Contact Form 7のカレンダーや、名前、Eメール入力機能はそのまま使い、最後にボタンを押すとStripeの支払いフォームが飛び出す流れ

ワードプレスで簡易な支払いシステムを作る

WordPressで簡易なショッピングサイト（支払いサイト）を構築したい

わざわざ、HP制作会社に依頼したくないし、なるべくなら既存のWordpressなどの基礎知識のみで、安く構築したい

このブログでは、

WordPress
Paypal や Stripeのような決済サポートシステム
Contact Form 7

の3つを使ってショピングサイトの構築をする。

WordPressの投稿ページごとに商品を作成し、ユーザーが個人情報を入力し、個数などを選択し、サイトが合計金額を算出して、Paypal や Stripeに合計金額を渡し、支払いが完了するようなシンプルなサイトとする

ユーザーログイン機能はないので、ユーザーが何度も購入するようなサイトではないので要注意

ユーザー情報を管理したい場合や、複雑なサイトは既存のプラグインを利用した方がいいと思う

プラグインだとどれも月々の費用がかかるため、なるべく単純なシステムを作りたい人向けの記事だと思ってほしい

PaypalとStripeの比較

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を渡す

商品が1つや2つしかない場合は、ある程度金額が決まっているので、StripeやPaypalが提供するボタンを利用して支払いを完了させれば良いが、

複数の商品の購入だったり、時期などによって値段が変わるものはカレンダーや計算する機能が必要になる

PaypalとStripeのAPIは金額をPaypalやStripeのAPIに渡して支払いが完了するだけで、このような機能はサポートしていない。

ここで必要になってくるのがContact Form 7

カレンダーや、Eメールなどの入力フィールドがすでに用意されていて、もし入力せずにsubmitボタンを押すと自動的にエラーをユーザーに表示してくれる人気の高いお問い合わせプラグイン

これをうまく利用することで、比較的自由度の高い商品販売サイトを作ることができる

Stripeのの支払いシステム実装方法

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) {
      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 == '') {
                window.location.replace("https://xxxxxxx.com/thank_you_for_payment");
            }else {
                window.location.replace("https://xxxxxxx.com/payment_fail");
            }
          },
          error: function(data) {
            console.log("Ajax Error!");
          }
        });
    }
});

以下が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' => 'jpy', 'description' => $event, 'source' => $token]);
    }catch(Stripe\Error\Card $e){
        //fail
        ChromePhp::log('stripeCharge failed');
    }
}
スポンサーリンク

コメント