WordPress/PayPalで「投げ銭プラグイン」を作成する(クラス構文編 その6)~ ショートコードの設定とJavaScriptによる決済ボタンの作成

前回の記事(新しいタブで開く)まででクラスの設計が完了し、設定画面で入力した実行環境(sandobox or production)とclient IDをデータベースのwp_optionsテーブルに格納するところまでできました。今回の記事では、PayPalが公開しているcheckout.jsを使って、決済ボタンを表示するところまでをご説明します。
今回の記事はすべてプラグインの本体ファイルである、echizenya-paypal-express-checkout.phpを編集します。
checkout.jsの読み込み
if( is_admin() ) { $pypl_expr = new Echizenya_PayPal_Express_Checkout(); } // checkout.jsの読み込みの追記 function epec_paypal_scripts() { wp_enqueue_script( 'paypal-checkout', 'https://www.paypalobjects.com/api/checkout.js' ); } add_action( 'wp_enqueue_scripts', 'epec_paypal_scripts' );
その1の記事で定義したインスタンス変数の下にアクションフック(wp_enqueue_scripts)を記述して、PayPalが公開しているcheckout.jsの読み込みをします。
ショートコード用フックの追加
実行環境とclient IDについてはプラグインの設定画面で一元的に管理しますが、PayPalボタンの固有番号(id)、色、決済金額、通貨の種類については、ショートコードを用います。
// ショートコード用のフック function epec_paypaldiv_func( $atts ){ } add_shortcode( 'paypaldiv', 'epec_paypaldiv_func' );
具体的には独自関数のepec_paypaldiv_funcと、WordPress関数のadd_shortcodeを使って、ショートコード用のフックを追加します。
変数の定義
$option = get_option( 'echizenya_paypal_express_checkout' ); $config = shortcode_atts( array( 'id' => '', // ユーザーが任意番号でつけるid 'total' => '0', // 決済金額 'currency' => '', //決済通貨(JPY, USD) 'color' => '', // ボタンの色(gold, blue, gray, black) 'size' => '', // ボタンのサイズ(large, medium, small, responsive) 'env' => $option['env'], // 実行環境 'client' => $option['client'], // client ID ), $atts );
WordPress関数のget_optionでwp_otionsテーブルのoption_valueを、変数$optionに代入します。また同じくWordPress関数のshortcode_attsを使って、ショートコードで使うタグの属性と属性の初期値を予約しておきます。
ショートコードのチェック
// ショートコードで属性値の上書きができない場合はプログラム終了 if ( ! $config['id'] || $config['total'] === '0' || ! $config['currency'] || ! $config['env'] || ! $config['client'] ) return;
ショートコードの属性値は初期値で、空文字列もしくは”0″になっています。属性値のいずれかが欠けている場合は、”return”を使ってプログラムを終了させます。
divタグとscriptタグの追加
$paypaldiv = '<div id="' . $config['id'] . '"></div>'; $paypaldiv .= "<script></script>"; // スクリプトの記述が表示される return $paypaldiv;
divタグのid属性でショートコードで設定した、ボタンのidを出力します。そのあとにscriptタグから、決済をするために必要なPayPalのオブジェクトモデルを呼び出します。最後にdivタグに追加した$paypaldivを出力します。
scriptタグの内容
下記のは”$paypaldiv .= ““;”としたscriptタグの内容です。PayPal developerのPayPal Checkout Integration Guide(新しいタブで開く)を参考にしています
paypal.Button.render({ env: '$config[env]', client: { $config[env]: '$config[client]', }, style: { color: '$config[color]', size: '$config[size]', }, commit: true, payment: function(data, actions) { return actions.payment.create({ payment: { transactions: [{ amount: { total: '$config[total]', currency: '$config[currency]' } }] } }); }, onAuthorize: function(data, actions) { return actions.payment.execute().then(function() { window.alert('Payment Complete!'); }) } }, '#$config[id]');
今回紹介したコードはGitHubで公開しています。ご興味のある方は、ぜひ参考にしてください。その7(新しいタブで開く)に続きます。