新しいGoogleサイトにPaypalを導入する方法

GoogleサイトはGoogleの提供するウェブサイトの作成・公開サービスです。無料で使用できるため、特に学術団体や地域住民のサークルなど、小規模の団体やグループで使用されることが多いと思います。この度、所属する学会（数百人規模の小規模学術団体）で使用しているGoogleサイトを新しくする必要があり、Paypalを新規に設置しなおす機会がありました。そこで本稿では、備忘録代わりに、仕様が変わり新しくなったGoogleサイト（新しいGoogleサイト）に、Paypalのボタンを設置する方法を記載します。このサイトは、Googleサイトの管理者向けの内容です。

旧来のGoogleサイトは2021年にサービスを終了するそうです。ウェブサイトの管理者は、新しいGoogleサイトへの移行を勧められますが、内部仕様が大幅に変更となり、ウェブサイトで使用している各種機能を再編する必要ができました。Paypalでの会費の支払いもその一つです。

旧GoogleサイトではFormを使用してPaypalの支払いを行っていましたが、新しいGoogleサイトではForm経由のPaypalの使用ができず、Javascript経由でPaypal APIを利用する方法でPaypalを使用することとなりました。具体的な手順は以下の通りになります。

１．Paypalサイト（ビジネスアカウント）で購入ボタンを作成し、ソースコードをコピーする。
２．ソースコードにClient IDを埋め込む。
３．ソースコードを新しいGoogleサイトに埋め込む。

Paypal購入ボタンを作成するアフィリエイトサイトがいくつかありますが、ここでは、アフィリエイトを使用せず、Paypalのサービスを直接利用する方法を取っています。

主に以下のリンクを参考にしています。
a.新しいGoogleサイトにPaypalボタンを挿入する方法
b.Client IDの入手
c.ソースコードの各種設定
d.Paypalサイト

以下、順に手順を見ていきます。

１．Paypalサイト（ビジネスアカウント）で購入ボタンを作成し、ソースコードをコピーする。

上記リンクを参考に、Paypalサイトで購入ボタンを作成して、ソースコードをコピーしてください。Paypalアカウントはビジネスアカウントである必要があります。ソースコードは以下のような感じになるかと思います（セキュリティ上、途中まで記載）。

<div id="smart-button-container">
    <div style="text-align: center;">
      <div id="paypal-button-container"></div>
    </div>
  </div>
<script src="https://www.paypal.com/sdk/js?client-id=sb&enable-funding=card&currency=JPY " data-sdk-integration-source="button-factory"></script>
<script>
  function initPayPalButton() {
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 
  

２．ソースコードにClient IDを埋め込む。

ソースコードの中で、client-id=...という箇所があります。この部分が、sbとなっていたら、ご自身（ウェブサイト管理者、作成者、ウェブサイトを提供する団体など）のPaypalアカウントのClient IDに置き換えてください。Client IDは、こちらなどを参考に、Paypalサイトからコピーまたは作成してください。Client IDは、80文字くらいの英数字記号の羅列になっているかと思います。

なおclient-id=sbとなっている場合、テストモードですので、表示の確認のみで、購入はできません。

また必要に応じて、こちらを参考に、ソースコードを書き替えてください。特に、currencyやcurrency_codeをJPYに、valueを必要な値段に書き換えましょう。

３．ソースコードを新しいGoogleサイトに埋め込む。

できあがったソースコードを、Googleサイトのページに埋め込みます。編集モードにして、右上のスクリーンから、「埋め込む」ボタンを押すと、ソースコードを埋め込むことができます。

このとき、何も表示されない場合は、ソースコード（スクリプト）に何らかのエラーがありますので、見直してください。

無事埋め込みができたら、公開設定し、動作確認をしてください。

※支払い確認をプログラムを組んで、自動で行っている場合、commitの値をjavascriptとAPIの呼び出しで同じにすることと、支払者、個数、金額を必ず確認する処理を入れましょう。手動で行う場合は、支払者、個数、金額を目視で確認してください。

以上で、新しいGoogleサイトにPaypalボタンを埋め込む作業は終了です。