前回の記事(新しいタブで開く)まででクラスの設計が完了し、設定画面で入力した実行環境（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(新しいタブで開く)に続きます。