PayPalボタンwebサイトへの埋め込み

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

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

## 簡単な方法は２通りある
### 1.ビジネスアカウントを取得して、以下の記事のとおりにやる
https://www.paypal.com/jp/smarthelp/article/faq1021
HTMLをwebサイトにぺちっと貼り付けるだけ

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

### 2.PayPalのSDKを読み込んで、jsをちょっと書くだけ
こちらは通常のアカウントでもテストだけならできますので、まだビジネスアカウントがない人は試してみるだけでもOK

[PayPal公式説明ページ](https://developer.paypal.com/docs/checkout/integrate/)と同じっちゃ同じ

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

## 手順
１） [PayPalのディベロッパー用サイト](https://developer.paypal.com/developer/applications)にログイン
（自分の正式なアカウントでログインします）

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

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

``` html
<!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');`を盛ります

``` html
<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のディベロッパー用画面](https://developer.paypal.com/developer/applications)を開いて、`SANDBOX > Accounts`へ

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

お支払いを済ませて完了

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

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


## 本番用にClientIDを切り替えるぞい
[PayPalのディベロッパー用画面](https://developer.paypal.com/developer/applications)を開いて、
`DASHBOARD > My Apps & Credentials`に`Sandbox`と`Live`の切り替えのスイッチボタンがありますので、`Live`に切り替えて。

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

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


## styleについての詳細
[公式のこちら](https://developer.paypal.com/docs/archive/checkout/how-to/customize-button/#button-styles)に書いてあるので、自分で読んでください

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

以下、公式より引用

``` html
<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の残高が不足している...
1. [PayPalのディベロッパー用画面](https://developer.paypal.com/developer/applications)の`SANDBOX > Accounts`にて、パーソナルアカウントの詳細を表示

2. `Funding`のタブを開いて、`Edit`ボタンをクリック

3. `PayPal > Balance`をお好きな金額に設定

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


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

最後はなぜか[この記事](https://fans.ne.jp/qa/article_000464.php)で解決した。ありがとう。

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

うん。

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