ショートコードで表示できるPayPal手数料計算器をWordPressプラグインで作りました

個人でも導入可能なクレジット決済のPayPalは手数料も安いのでゆうそうとでも今後いろいろな決済に使っていきたいと思っています。導入するときに「この料金だと手数料はいくらになるのだろうか？」と計算したくなります。簡単な計算でもそのたびごとにやるのは面倒なので、jQueryを使ってWebで計算ができるようにしてみました。ついでにWordPressのプラグインにしてショートコードで表示出来るようにしたのでそのあたりの再学習にもなりました！

PayPalの手数料計算器

このサイトにも作ってみました。

PayPal手数料計算器

こんな感じになります。商品およびサービスの代金に金額を入力すると

PayPal手数料、手数料を引いた金額が表示されます。

メニューにもこっそり追加しておきました。

プラグインにする前にHTMLファイルで作成してみる

プラグインにする前にまず、HTMLファイルを作ってこの計算部分を作ってみました。

usort-paypal-calc.html というファイルを作って

<script
  src="https://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>
<!-- ここからはjQuery,javascript -->
<script type="text/javascript">
jQuery(function($) {
    var per_charge = 40;
    var per_percent_init = 3.6;
    $(document).ready(function(){
        $('#upc_description').css('display', 'none');
        $('#calc_result_block').css('display', 'none');
    });
    // 代金変更
    $('#upc_price').keyup(function() {
        var num = removeComma($(this).val());
        if (num == ''){
            $('#calc_result_block').css('display', 'none');
        } else {
            if (isNaN(num) == false){
                $(this).val(separate(num));
                calcCost();
            } else {
                $('#calc_result_block').css('display', 'none');
            }
        }
    });

    // 代金フォーカス
    $("#upc_price").on("focus", function(){
        var num = $(this).val();
        $(this).val(removeComma(num));
    });
    function calcCost()
    {
        // 手数料計算
        price = parseInt(removeComma($('#upc_price').val()));
        cost_percent = Math.round((price * (per_percent_init * 10)) / 1000);
        cost = cost_percent + per_charge;
        $('#upc_disp_price').text(separate(price));
        $('#upc_disp_cost').text(separate(cost));
        $('#upc_disp_sale').text(separate(price - cost));
        $('#upc_disp_cost_detail').text("(手数料[" + per_percent_init + "%]" + separate(cost_percent) + "円 + " + separate(per_charge) + "円/件)");
        if ($('#calc_result_block').css('display') == 'none') {
            $('#calc_result_block').css('display', 'block');
        }
    }

    $("#upc_description_link").click(function(){
        $("#upc_description").toggle();
        if ($('#upc_description').css('display') == 'block') {
            $("#upc_description_link").text("説明を閉じる");
        } else {
            $("#upc_description_link").text("説明を見る");
        }
    });
});

// 正規表現でセパレート
function separate(num){
    return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
// カンマを除去
function removeComma(str){
  return str.replace(/,/g, '');
}
</script>

<!-- ここからはcss -->
<style type="text/css">
<!--
#calc_result_block {
    display:none;
}
#upc_description_link, #upc_disp_cost_detail {
    font-size:12px;
}
.upc_block {
  margin-top:10px;
}
#upc_description {
    border: 1px dotted #333;
    padding: 10px;
}
#upc_price {
    text-align:right;
}
#calc_result_block_table td {
    text-align:right;
    padding-left:10px;
}
#calc_result_block_table td,#calc_result_block_table th {
    border:0px;
}
#calc_result_block_table th {
    text-align:left;
    background-color: transparent;
}
#upc_price {
    max-width:60%;
}
 --!>
</style>

<!-- ここからはHTML -->
<div>
    <form>
        <div>
            <div>商品およびサービスの代金</div>
            <div><input type="text" name="price" id="upc_price">円</div>
        </div>
        <div class="upc_block">
            <span id="upc_description_link">説明を見る</span>
        </div>
        <div id="upc_description" class="upc_block">
<p>
<strong>PayPal手数料計算</strong>では商品およびサービスの代金支払いを受取るための手数料を「標準レート」の<strong>3.6% + ¥40 JPY</strong>で計算しています。
</p>
<p>
毎月¥300,000 JPYを超える金額を受け取る場合は、<strong>PayPalマーチャントレート</strong>を申請することができます。このレートを適用すると、売上が高くなるほど手数料が安くなります。手数料は、前月の売上高に基づき、<strong>2.9% + ¥40 JPY</strong>になる可能性があります。
</p>
<p>
銀行口座への引き出しは5万円を超える場合は無料、49,999円以下の場合は手数料が250円かかります。3～6営業日で口座への入金が行われます。
</p>
        </div>
    </form>
</div>
<div id="calc_result_block">
<h3>計算結果</h3>
<table id="calc_result_block_table">
    <tr><th>商品およびサービスの代金</th><td><span id="upc_disp_price"></span> 円</td></tr>
    <tr><th>PayPal手数料<br /><span id="upc_disp_cost_detail"></span></th><td><span id="upc_disp_cost"></span> 円</td></tr>
    <tr><th>手数料を引いた金額</th><td><span id="upc_disp_sale"></span> 円</td></tr>
</table>
</div>

このようなソースを作りました。部分的に解説をします。

jQueryライブラリの読み込み

<script
  src="https://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>

この部分はjQueryを使うためにライブラリを読み込んでいます。後でWordPressのプラグインにしたかったのでバージョンを合わせてjquery-1.12.4.jsをCDNで読み込んでいます。この形だとファイルが必要ないので便利です。この部分は後でプラグインにするときは削除します。

jQuery,JavaScript部分

    var per_charge = 40;
    var per_percent_init = 3.6;

PayPal計算時に使う定数を指定しています。1件ごとの手数料が40円、パーセンテージは3.6%です。

    $(document).ready(function(){
        $('#upc_description').css('display', 'none');
        $('#calc_result_block').css('display', 'none');
    });

読み込み終了時に、説明部分と、計算結果部分を非表示にしています。

    // 代金変更
    $('#upc_price').keyup(function() {
        var num = removeComma($(this).val());
        if (num == ''){
            $('#calc_result_block').css('display', 'none');
        } else {
            if (isNaN(num) == false){
                $(this).val(separate(num));
                calcCost();
            } else {
                $('#calc_result_block').css('display', 'none');
            }
        }
    });

    // 代金フォーカス
    $("#upc_price").on("focus", function(){
        var num = $(this).val();
        $(this).val(removeComma(num));
    });

代金変更はkeyupで金額が入力されたときに実行する処理が書いてあります。空白だったときや、数字でなかったときは計算結果を非表示にして、それ以外の数字が入ったときにカンマ区切りにして、手数料の計算をします。

代金フォーカスのところでは、今から入力しようとしたときにカンマを除去するようにしています。

    function calcCost()
    {
        // 手数料計算
        price = parseInt(removeComma($('#upc_price').val()));
        cost_percent = Math.round((price * (per_percent_init * 10)) / 1000);
        cost = cost_percent + per_charge;
        $('#upc_disp_price').text(separate(price));
        $('#upc_disp_cost').text(separate(cost));
        $('#upc_disp_sale').text(separate(price - cost));
        $('#upc_disp_cost_detail').text("(手数料[" + per_percent_init + "%]" + separate(cost_percent) + "円 + " + separate(per_charge) + "円/件)");
        if ($('#calc_result_block').css('display') == 'none') {
            $('#calc_result_block').css('display', 'block');
        }
    }

ここで手数料を計算しています。

cost_percent = Math.round((price * (per_percent_init * 10)) / 1000);

この部分が若干工夫したところでした。JavaScriptでは小数点が入った計算をすると誤差が生じるという仕様になっているためいったん10倍にしてから1000で割るという計算になっています。小数点以下は四捨五入しています。

// 正規表現でセパレート
function separate(num){
    return String(num).replace( /(\d)(?=(\d\d\d)+(?!\d))/g, '$1,');
}
// カンマを除去
function removeComma(str){
  return str.replace(/,/g, '');
}

数字をカンマ区切りにしたり、カンマを除去したりしています。

WordPressのショートコードで表示できるプラグインにする

ここまででのソースでローカルPCのブラウザで確認ができたので、WordPressのプラグインにしてみようと思います。簡単に使えるようにショートコードにしてみました。

usort-paypal-calc というフォルダを作り、その中に先ほど作成したusort-paypal-calc.html を入れます。このときjQueryを使うためにライブラリを読み込んでいる部分は削除しておきます。

新しくusort-paypal-calc.phpというファイルを作って内容を

<?php
/*
 Plugin Name: usort PayPal Calc
 Plugin URI: http://usort.jp/usort-paypal-calc
 Description: PayPalビジネスアカウントで料金を受け取るときの手数料計算
 Author: Usort Umoto
 Version: 1.0
 Author URI: http://usort.jp/
*/

/* 使い方　ショートコードで　[usort_paypal_calc] */
function usort_paypal_calc() {
    $html = plugins_url()."/usort-paypal-calc/usort-paypal-calc.html";
    $val = file_get_contents($html);
    return $val;
}
/* ショートコードを登録する add_shortcode('ショートコード名','実行される関数名') */
add_shortcode('usort_paypal_calc', 'usort_paypal_calc');

このようにします。

/*
 Plugin Name: usort PayPal Calc
 Plugin URI: http://usort.jp/usort-paypal-calc
 Description: PayPalビジネスアカウントで料金を受け取るときの手数料計算
 Author: Usort Umoto
 Version: 1.0
 Author URI: http://usort.jp/
*/

この部分はプラグインの頭に書く決まり事の部分です。

/* 使い方　ショートコードで　[usort_paypal_calc] */
function usort_paypal_calc() {
    $html = plugins_url()."/usort-paypal-calc/usort-paypal-calc.html";
    $val = file_get_contents($html);
    return $val;
}

ここではusort-paypal-calc.htmlを読み込んで、返す　という簡単なコードが書いてあります。今回のようにHTMLだけで完結しているものなら、今後もこの書き方で簡単なプラグインが書けそうです。

/* ショートコードを登録する add_shortcode('ショートコード名','実行される関数名') */
add_shortcode('usort_paypal_calc', 'usort_paypal_calc');

add_shortcodeでショートコードで使えるように指定しています。

実際のプラグインファイルをおいておきますので、よろしければ内容を見たり使ってみたりしてください（ご利用は自己責任でお願いします）。

usort-paypal-calc

投稿、固定ページ、ウィジェットで使う

固定ページや投稿では

このように書くだけで表示することができます。ショートコードなので実際に

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
[usort_paypal_calc]
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

このように何かの途中に入れることもできます。

ウィジェットでの表示はテーマによっては追加が必要

ウィジェットでショートコードが使えるかどうかはテーマによって異なります。このブログで利用しているテーマSimplicityではテキストウィジェットにショートコードを書けば

このように表示できました。これをSaitamaに変更すると

このように動作しませんでした。こういった場合は、（子テーマだと良いのですが）functions.phpに

add_filter('widget_text', 'do_shortcode' );

この行を追加すると、

表示できるようになります。

注意点

この計算をするにはIDを多数使っているので1ページ中に2つ（固定ページとウィジェットとか）表示するとちゃんと動かないのでご注意ください。

PayPalについて

今までこのブログで何回かPayPalについて書いてきましたのでよろしければご覧ください。