PayPalボタンwebサイトへの埋め込み #初心者

この記事でできること

PayPalボタンをクリックすると支払いできるボタンをwebサイトに設置できます。
テスト方法も併せて説明します。
（クリックするとPayPalのちっさい画面が現れて、そこで支払いなどができる）

はじめに

なぜこの記事を書こうと思ったかというと、簡単にできるやろ...と思っていたら、わりと工数がかかってしまったので。
記事が多すぎてどれを見ればいいか分からないのと、結局英語の記事が公式なので読むのに時間がかかりました。
というわけで、この記事を読めば、この記事を読む時間含めて１時間でwebサイトに設置できると思うよ。（言い過ぎ？）

簡単な方法は２通りある

1.ビジネスアカウントを取得して、以下の記事のとおりにやる

https://www.paypal.com/jp/smarthelp/article/faq1021
HTMLをwebサイトにぺちっと貼り付けるだけ

※これはプレミアアカウントおよびビジネスアカウントでしかできません
（そして私はやったことない）

2.PayPalのSDKを読み込んで、jsをちょっと書くだけ

こちらは通常のアカウントでもテストだけならできますので、まだビジネスアカウントがない人は試してみるだけでもOK

PayPal公式説明ページと同じっちゃ同じ

この記事では「2.PayPalのSDKを読み込んで、jsをちょっと書くだけ」について解説します

手順

１） PayPalのディベロッパー用サイトにログイン
（自分の正式なアカウントでログインします）

２） REST API appsに「Default Application」がありますので、そちらをclick

３） Client IDをコピーして、以下のようにPayPalのSDKを読み込んだりなんなり
（公式からほぼそのまま持ってきた）

<!DOCTYPE html>
<head>
    <!-- 以下のmetaタグは推奨されているよ -->
    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Ensures optimal rendering on mobile devices. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- Optimal Internet Explorer compatibility -->
</head>

<body>
    <!-- 実際にボタンを表示するところ -->
    <div id="paypal-button-container"></div>

    <!-- PayPalのSDKの読み込み -->
    <script src="https://www.paypal.com/sdk/js?client-id=ここにClientID"></script>

    <script>
        paypal.Buttons().render('#paypal-button-container');
        // This function displays Smart Payment Buttons on your web page.
    </script>
</body>

ちなみに通貨を指定したい場合は、SDKを読み込む末尾に&currency=currency=JPYを追加します。
他の通貨も指定できます。

４）ではそのHTMLを表示してみてくれ
もうPayPalのボタン出てますね。クリックするとPayPalのログイン画面でますね。

５）このままじゃ意味がないので、料金など設定します
paypal.Buttons().render('#paypal-button-container');を盛ります

<script>
paypal.Buttons({
    //styleも結構設定できます（後で書くよ）
    style: {
        layout: 'horizontal',
        shape: 'pill',
        size: 'responsive',
        tagline: false,
    },

    //メイン
    createOrder: function(data, actions) {
        return actions.order.create({
          purchase_units: [{
            amount: {
              //料金（50円）
              value: 50
            },
            //明細に表示される説明
            description: 'チロルチョコ5個（消費税サービス）',
          }]
        });
    },
    onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
            //ここに支払い完了後の処理を書きます
            alert('買ってくれてありがとう')
            //購入完了画面に飛ぶかー
        });
    }
}).render('#paypal-button-container')
</script>

６）もっかいPayPalボタンをクリック
さぁ、ログインしよう!!!
PayPalのディベロッパー用画面を開いて、SANDBOX > Accountsへ

TypeがPERSONALのアカウントがあると思いますので、Manage Accounts > View Edit Accountにログイン用のメールアドレスとパスワードありますので、そちらでログイン

お支払いを済ませて完了

７）お支払状況の確認
ディベロッパー用画面のSANDBOX > Notificationsでもよい

実際の画面と同じ画面で確認したい場合は、テスト用ダッシュボードからログイン
このときログインで使うAccountは、SANDBOX > AccountsのBUSINESSアカウントでございます
（本物のアカウントじゃ一生ログインできないからな。。）

本番用にClientIDを切り替えるぞい

PayPalのディベロッパー用画面を開いて、
DASHBOARD > My Apps & CredentialsにSandboxとLiveの切り替えのスイッチボタンがありますので、Liveに切り替えて。

ここでビジネスアカウントでログインしていれば、本番用のREST API appsが作成できますので、そちらのClientIDをお使いください。
※パーソナルアカウントの場合は本番用のREST API appsは作成できません。

で、本番用のClientIDでちゃんと動作しているか確認するときは、サイト上のPayPalボタンをクリックして、正式なアカウントでログインできればOKです。
間違って支払うと、自分のアカウントから引き落とされますので注意...

styleについての詳細

公式のこちらに書いてあるので、自分で読んでください

あっしは、style.size.responsiveで少々つまづいた
PayPal用のレスポンシブのcssも書いてね
いつもドキュメント最後まで読まずにすみません

以下、公式より引用

<style>
@media screen and (max-width: 400px) {
 #paypal-button-container {
 width: 100%;
 }
}

@media screen and (min-width: 400px) {
 #paypal-button-container {
 width: 250px;
 }
}
</style>

<div id="paypal-button-container"></div>

<script>
paypal.Button.render({
 style: {
 size: 'responsive'
 }
}, '#paypal-button-container');
</script>

PayPalの残高が不足している...

PayPalのディベロッパー用画面のSANDBOX > Accountsにて、パーソナルアカウントの詳細を表示
Fundingのタブを開いて、Editボタンをクリック
PayPal > Balanceをお好きな金額に設定

まぁテスト用アカウントだとPayPalの残高が不足していても、VISAカードでお支払いができるリッチな感じになっております。
どどんと10万くらいの買い物ができます。架空で。

最後に

記事はたくさんあるけど、どの記事から読んだらいいかわかんないし、最初サンドボックスの意味わかんなかったし、最後は本番用アカウントのClientIDをどこから仕入れるかわからんかったので、結構つまづいたなぁ...

最後はなぜかこの記事で解決した。ありがとう。

サンドボックスとは？

Paypalが作ってるテストのためのネットワークの名前をSANDBOXと言います。テスト用なので、実際の課金には使えません。

うん。

分かってしまえばなんてことないですが、解読するまでがね...まぁこれも楽しみの一つか。
サーバーサイドの処理は書いてないので不明です！