WordPressで書いたブログ記事をマネタイズする（その3） ~ Twenty Seventeenのfunction.phpでPayPalのサーバーレス決済（Client-side REST）

2018年5月9日

サーバーレス決済のスクリプトコード

まずはサーバーレス決済のボタンを表示させるためのJavaScriptコードをPayPal developerの公式ドキュメントで確認しておきましょう。

PayPal Checkout Integration Patterns

このページにおいて、右半分の箇所にスクリプトコードが記載されています。ペラいちのホームページに貼り付ける場合、.htmlファイルにこの内容をコピぺするだけでボタンが表示されます。

WordPressサイトへの落とし込み

次にWordPressのブログサイトにおいて、PayPalの決済ボタンを表示させるcheckout.jsを読み込むための手順をご紹介します。

JavaScriptライブラリのコピペ

PayPalの決済画面を表示するために必要なオブジェクト・プロパティ・メソッドが定義されている、checkout.jsというライブラリがWeb上で公開されています。このライブラリをheadタグ内で読み取って、JavaScriptのコードに反映できるようにします。

[php]
<script src="https://www.paypalobjects.com/api/checkout.js"></script>
[/php]

このscriptタグをWordPressの公式テーマであるTwenty Seventeenにコピペする場合、header.phpに記述されている”“の直前で21行目にコピペしましょう。

functions.phpに関数を記述

[php]
// PayPal Express Checkout
function paypal_scripts() {
wp_enqueue_script( ‘paypal_scripts’, get_template_directory_uri().’/js/expresscheckout.js’ , array(), date(‘U’));
}

add_action( ‘wp_enqueue_scripts’, ‘paypal_scripts’ );
[/php]

WordPressで独自関数を使う場合、functions.phpのを使ってTwenty Seventeenの590行目から594行目にかけて定義します。今回は、paypal_scripts()という独自関数を作成します。独自関数で定義する内容は、wp_enqueue_scriptは指定したスクリプトファイルを「適切なタイミング」で実行するという意味です。

またその「適切なタイミング」とは、wp_enqueue_scriptsでpaypal_scripts関数をフックすることを指します。

divタグのコピペ

実際のスクリプトコードをコピペする直前に、”paypal-button-container”というid名を持つdivタグをコピペします

[php]
<div id="paypal-button-container"></div>
[/php]

このid名のdivタグがない場合、PayPalのボタンは表示されない仕様になっています。Twenty Seventeenにコピペする場合、”/template-parts/post/content.php”の74行目にコピペします。

独自関数と条件分岐タグの記述

divタグの直下にcontent.phpの75行目にスクリプトタグを記述します。

[php]
<?php if(is_single()): ?>
<div id="paypal-button-container"></div>
<?php paypal_scripts(); ?>
<?php endif; ?>
[/php]

またTwenty Seventeenに特有の記述として、条件分岐関数のis_single()でdivタグと独自関数を制御します。

スクリプトコードの記述

最後に定義した独自関数のpaypal_scripts()の実行内容を定義します。WordPressにおいて独自のJavaScriptファイルを読み込む場合、テーマディレクトリの中にJavaScript専用のディレクトリ（JSディレクトリ）を設けて、その中でjsファイルを作成します。

[php]
<script>
paypal.Button.render({
…
});
</script>
[/php]

“paypal.Button.render({ });”で始まるメソッドでボタンの色や決済する金額などを決めます。このスクリプトコードをあえて日本語に訳すると、「PayPalのButtonオブジェクトを読み取ります。その中身は…」となります。その中で多数のプロパティ（プロパティとプロパティ値）が使われていますが、詳細はPayPal　developerの公式ドキュメントで確認することができます。