前回の記事まででクラスの設計が完了し、設定画面で入力した実行環境（sandobox or production）とclient IDをデータベースのwp_optionsテーブルに格納するところまでできました。今回の記事では、PayPalが公開しているcheckout.jsを使って、決済ボタンを表示するところまでをご説明します。
今回の記事はすべてプラグインの本体ファイルである、echizenya-paypal-express-checkout.phpを編集します。
checkout.jsの読み込み
[php]
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’ );
[/php]
その1の記事で定義したインスタンス変数の下にアクションフック（wp_enqueue_scripts）を記述して、PayPalが公開しているcheckout.jsの読み込みをします。
ショートコード用フックの追加
実行環境とclient IDについてはプラグインの設定画面で一元的に管理しますが、PayPalボタンの固有番号(id)、色、決済金額、通貨の種類については、ショートコードを用います。
[php]
// ショートコード用のフック
function epec_paypaldiv_func( $atts ){
}
add_shortcode( ‘paypaldiv’, ‘epec_paypaldiv_func’ );
[/php]
具体的には独自関数のepec_paypaldiv_funcと、WordPress関数のadd_shortcodeを使って、ショートコード用のフックを追加します。
変数の定義
[php]
$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 );
[/php]
WordPress関数のget_optionでwp_otionsテーブルのoption_valueを、変数$optionに代入します。また同じくWordPress関数のshortcode_attsを使って、ショートコードで使うタグの属性と属性の初期値を予約しておきます。
ショートコードのチェック
[php]
// ショートコードで属性値の上書きができない場合はプログラム終了
if ( ! $config[‘id’] ||
$config[‘total’] === ‘0’ ||
! $config[‘currency’] ||
! $config[‘env’] ||
! $config[‘client’]
) return;
[/php]
ショートコードの属性値は初期値で、空文字列もしくは”0″になっています。属性値のいずれかが欠けている場合は、”return”を使ってプログラムを終了させます。
divタグとscriptタグの追加
[php]
$paypaldiv = ‘<div id="’ . $config[‘id’] . ‘"></div>’;
$paypaldiv .= "<script></script>";
// スクリプトの記述が表示される
return $paypaldiv;
[/php]
divタグのid属性でショートコードで設定した、ボタンのidを出力します。そのあとにscriptタグから、決済をするために必要なPayPalのオブジェクトモデルを呼び出します。最後にdivタグに追加した$paypaldivを出力します。
scriptタグの内容
下記のは”$paypaldiv .= ““;”としたscriptタグの内容です。PayPal developerのPayPal Checkout Integration Guideを参考にしています
[php]
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]’);
[/php]
