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

Photo by Volkan Olmez on Unsplash

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

スポンサーリンク

PayPalの手数料計算器

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

PayPal手数料計算器

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

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

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

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

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

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

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

jQueryライブラリの読み込み

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

jQuery,JavaScript部分

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

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

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

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

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

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

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

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

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

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

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

このようにします。

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

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

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

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

usort-paypal-calc

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

固定ページや投稿では

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

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

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

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

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

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

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

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

この行を追加すると、

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

注意点

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

PayPalについて

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

個人的に商品を購入するときにPayPalを使っていましたが、知り合いの方のベターライフスクエアさんで相談料金をPayPalで支払うという...
WordPress勉強会である方のWebサイトを見ていたら「○○相談」という面談での相談を受け付けるというところにPayPalの支払ボタ...
以前このブログで、法人としてPayPalのビジネスアカウントを取得して、個別の決済や定期的な課金ができる方法についてブログ記事を書きまし...
前回「Webでクレジット決済で料金を受け取れるPayPalで個人事業者がビジネスアカウントを取得する方法ー即日編」で、PayPalを使っ...
兎本美佳

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

シェアする

フォローする

スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

スポンサーリンク
スポンサーリンク
トップへ戻る