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

2017.08.23
この記事は約16分で読めます。

Photo by Volkan Olmez on Unsplash

個人でも導入可能なクレジット決済の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/
*/

/* 使い方　ショートコードで　








	

		

			
商品およびサービスの代金

			
円

		

		

			説明を見る
		

		



PayPal手数料計算では商品およびサービスの代金支払いを受取るための手数料を「標準レート」の4.0% + ¥40 JPYで計算しています。2019-9-23から4.0％になりました。




毎月¥300,000 JPYを超える金額を受け取る場合は、PayPalマーチャントレートを申請することができます。このレートを適用すると、売上が高くなるほど手数料が安くなります。手数料は、前月の売上高に基づき、2.9% + ¥40 JPYになる可能性があります。




銀行口座への引き出しは5万円を超える場合は無料、49,999円以下の場合は手数料が250円かかります。3～6営業日で口座への入金が行われます。


		

	






計算結果



	
商品およびサービスの代金 円

	
PayPal手数料
 円

	
手数料を引いた金額 円




 */
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/
*/

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

/* 使い方　ショートコードで　








	

		

			
商品およびサービスの代金

			
円

		

		

			説明を見る
		

		



PayPal手数料計算では商品およびサービスの代金支払いを受取るための手数料を「標準レート」の4.0% + ¥40 JPYで計算しています。2019-9-23から4.0％になりました。




毎月¥300,000 JPYを超える金額を受け取る場合は、PayPalマーチャントレートを申請することができます。このレートを適用すると、売上が高くなるほど手数料が安くなります。手数料は、前月の売上高に基づき、2.9% + ¥40 JPYになる可能性があります。




銀行口座への引き出しは5万円を超える場合は無料、49,999円以下の場合は手数料が250円かかります。3～6営業日で口座への入金が行われます。


		

	






計算結果



	
商品およびサービスの代金 円

	
PayPal手数料
 円

	
手数料を引いた金額 円




 */
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

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

固定ページや投稿では

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

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

商品およびサービスの代金
円
説明を見る

PayPal手数料計算では商品およびサービスの代金支払いを受取るための手数料を「標準レート」の4.0% + ¥40 JPYで計算しています。2019-9-23から4.0％になりました。

毎月¥300,000 JPYを超える金額を受け取る場合は、PayPalマーチャントレートを申請することができます。このレートを適用すると、売上が高くなるほど手数料が安くなります。手数料は、前月の売上高に基づき、2.9% + ¥40 JPYになる可能性があります。

銀行口座への引き出しは5万円を超える場合は無料、49,999円以下の場合は手数料が250円かかります。3～6営業日で口座への入金が行われます。

計算結果

商品およびサービスの代金 円
PayPal手数料
 円
手数料を引いた金額 円

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

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

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

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

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

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

add_filter('widget_text', 'do_shortcode' );

この行を追加すると、

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

注意点

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

PayPalについて

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

クレジット決済ができるPayPalビジネスアカウントの申込時に何が必要か？
個人的に商品を購入するときにPayPalを使っていましたが、知り合いの方のベターライフスクエアさんで相談料金をPayPalで支払うというボタンをつけているのを見て、自分でPayPalボタンをつけられる！？ということに興味をおぼえてブログ...
usortblog.com
2017.08.10
PayPalを使ってWebサイトに「今すぐ購入」「定期的な課金」ボタンを付ける方法
WordPress勉強会である方のWebサイトを見ていたら「○○相談」という面談での相談を受け付けるというところにPayPalの支払ボタンが付いていました。個人でもPayPalを利用して収益を受け取る方法があるとは知らなかったので、すご...
usortblog.com
2015.10.13
Webでクレジット決済で料金を受け取れるPayPalで個人事業者がビジネスアカウントを取得する方法ー即日編
以前このブログで、法人としてPayPalのビジネスアカウントを取得して、個別の決済や定期的な課金ができる方法についてブログ記事を書きました。そのときは既にPayPalのビジネスアカウントを取得する途中まで行っていたため、ビジネスアカウ...
usortblog.com
2016.09.01
Webでクレジット決済で料金を受け取れるPayPalで個人事業者がビジネスアカウントを取得する方法ー後日編
前回「Webでクレジット決済で料金を受け取れるPayPalで個人事業者がビジネスアカウントを取得する方法ー即日編」で、PayPalを使って個人事業者がビジネスアカウントを取得する方法でその日のうちに行えることについて書きました。ビジネス...
usortblog.com
2016.09.02
兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます！
スポンサー広告

WordPress css プラグイン javascript JQuery 決済サービス
PayPal
スポンサーリンク
シェアする
ゆうそうとITブログの更新通知が受け取れます！
兎本美佳
ゆうそうとITブログ

コメント

  1. グルトレ計算機のプラグインを作成する より:
    2019年2月9日 3:54 PM

    […]  ゆうそうとITブログショートコードで表示できるPayPal手数料計算器をWordPressプラグインで作りましたhttps://usortblog.com/usort-paypal-calc/個人でも導入可能なクレジット決済のPayPalは手数料 […]

    返信
トップへ戻る

ゆうそうとについての説明

ゆうそうと　とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては３０年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。