PayPal 銀行口座決済のベストプラクティス

PayPalの銀行口座決済は、買い手を決済フローから離脱させることなく、ペイパルアカウント作成・銀行口座登録・支払いをシームレスに完了することができます。

その銀行口座決済をより効果的に訴求するためのベストプラクティスを説明します。

# 1.「かんたん銀行決済」の選択肢を追加し、銀行支払いをPayPal支払いから分ける（推奨）
## 支払い方法の見せ方
PayPal支払いと銀行支払いを別の選択肢として表示することで、銀行口座で支払いたい買い手が迷うことなく決済を進められます。
下記は選択肢を分けた画面の一例です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/210396/a7937937-d2fb-4b83-7eb9-720b93b4fa6f.png)

- ロゴは[こちら](https://www.paypal.com/jp/webapps/mpp/developer/logos-buttons/download)からダウンロードしてください。
- 「かんたん銀行決済」の画像は以下を保存しサイズ調整を行って使ってください。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210396/fb204609-408a-dbc1-2847-8f9cea1fd9d4.png)
- 1行表示用の横長画像は以下を保存しサイズ調整を行って使ってください。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210396/a28f4644-3180-1d5f-31cc-b2d67adc0fee.png)

## 訴求メッセージ
PayPal支払いと銀行支払いそれぞれに以下のような訴求メッセージを設定します。

|支払い方法|長い説明文（PC向け）|短い説明文（モバイル向け）|挿入リンク（別ウィンドウ）|
|:--------------------|:---------------------|:-----------------------------|:---------------|
|PayPalで支払い（または画像）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|カードでも銀行口座からでも、IDとパスワードでかんたん・安全にお支払い。新規登録は無料です。|カードでも銀行口座からでも 、かんたん・安全にお支払い。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|[ペイパルについて](https://www.paypal.com/jp/webapps/mpp/lp/about-paypal)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|
|かんたん銀行決済（または画像）|銀行口座からのお支払いでも、一度設定すれば素早くかんたん。新規登録・振込手数料も無料です。※ご利用可能な銀行は、みずほ銀行、三井住友銀行、三菱UFJ銀行、ゆうちょ銀行、りそな銀行・埼玉りそな銀行です。|銀行口座からでも、一度設定すればかんたんにお支払い。振込手数料も無料。|[銀行口座のご利用について](https://www.paypal.com/jp/webapps/mpp/lp/set-up-bank)|

## 決済ボタンのカスタマイズ
### 最新実装
[API決済](https://qiita.com/PPJP/items/db5c57991c2c3fe80ac7)に記載されている最新実装（Smart Payment Buttons）を使う場合、PayPal支払いと銀行支払いでボタンのデザインが変わるようし、買い手が迷わないようにします。

#### PayPal支払い選択時
デフォルトのデザインを踏襲します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/210396/6f90528f-2a4f-8f06-011d-80ccdcb0022a.png) 

- カード決済ボタンを非表示にしたい場合は[こちら](https://developer.paypal.com/docs/checkout/reference/customize-sdk/#disable-funding)を参照してください。

#### 銀行支払い選択時
ボタンの色をシルバーにし、カード決済ボタンを非表示にします。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/210396/553d19ef-5021-6a93-6991-f9968f3e7436.png)

- ボタンをシルバーにする方法は[こちら](https://developer.paypal.com/docs/checkout/integration-features/customize-button/#color)を参照してください。

- カード決済ボタンを非表示にする方法は[こちら](https://developer.paypal.com/docs/checkout/reference/customize-sdk/#disable-funding)を参照してください。

### 古い実装
上記のSmart Payment Buttonsを使わず、独自ボタンからPayPalに全画面遷移する実装を使う場合は、PayPal支払いと銀行支払いで適宜ボタンのデザインや文言を変えて、買い手が迷わないようにします。

## 決済画面
銀行口座の登録はPayPalの新規登録画面から行うため、銀行支払いを選択した買い手にはその画面を表示するようにします。

### PayPal支払い
#### ログイン画面
特別な実装は必要ありません。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/210396/86de7bb5-ce98-e5d6-d36f-20b2b433a71a.png)

### 銀行支払い
#### 新規登録画面
下記の実装を追加して表示します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/210396/fbd8bde9-07f9-7304-a531-cb113c4b8bc6.png)

##### Smart Payment ButtonsのJavaScript実装やREST APIを使って新規登録画面を出す方法
`Order V2`または`Payments V1`の`application_context.landing_page`に`BILLING`（V2の場合）、`Billing`（V1の場合）を指定します。
https://developer.paypal.com/docs/api/orders/v2/#definition-application_context
https://developer.paypal.com/docs/api/payments/v1/#definition-application_context

##### 古いAPI（NVPまたはSOAP API)を使って新規登録画面を出す方法
`SetExpressCheckout`の`LANDINGPAGE`（NVPの場合）または`LandingPage`（SOAPの場合）に`Billing`を指定します。
https://developer.paypal.com/docs/classic/api/merchant/SetExpressCheckout_API_Operation_NVP/
https://developer.paypal.com/docs/classic/api/merchant/SetExpressCheckout_API_Operation_SOAP/

*--- PayPal支払いと銀行支払いを分ける方法は以上となります。 ---*

# 2. PayPal１つでクレジットカードと銀行口座の支払いに対応していることを説明する
## 支払い方法の見せ方
上記1.の対応が難しい場合は、PayPal支払いの中で銀行口座に対応していることを明示的に訴求します。
下記はその一例です。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/210396/a1475eba-3336-d44f-350e-fbfc6a6bc00b.png)

- ロゴは[こちら](https://www.paypal.com/jp/webapps/mpp/developer/logos-buttons/download)からダウンロードしてください。
- 1行表示用の横長画像は以下を保存しサイズ調整を行って使ってください。![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/210396/a28f4644-3180-1d5f-31cc-b2d67adc0fee.png)

## 訴求メッセージ
PayPal支払いに以下のような訴求メッセージを設定します。

|支払い方法|長い説明文（PC向け）|短い説明文（モバイル向け）|挿入リンク（別ウィンドウ）|
|:--------------------|:---------------------|:-----------------------------|:---------------|
|PayPalで支払い（または画像）&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|カードでも銀行口座からでも、一度設定すれば IDとパスワードでかんたん・安全にお支払い。新規登録は無料。銀行口座からのお支払いでも、振込手数料は無料です。※ご利用可能な銀行は、みずほ銀行、三井住友銀行、三菱UFJ銀行、ゆうちょ銀行、りそな銀行・埼玉りそな銀行です。|カードでも銀行口座からでも、かんたん・安全にお支払い。新規登録・振込手数料も無料。&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|[ペイパルについて](https://www.paypal.com/jp/webapps/mpp/lp/about-paypal)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[銀行口座のご利用について](https://www.paypal.com/jp/webapps/mpp/lp/set-up-bank)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|

## 決済ボタンのカスタマイズ
特に必要ありません。

## 決済画面
銀行支払い者に適したフローにするには、前述1.と同じ実装で新規登録画面を常に表示するようにします。

*--- PayPal支払い１つで銀行支払いを訴求する方法は以上となります。 ---*

# 関連ページ
- [PayPal API決済の実装方法](https://qiita.com/PPJP/items/db5c57991c2c3fe80ac7)
- [ECサイトにおけるPayPalの３つのコンバージョンアップ機能](https://qiita.com/PPJP/items/c1092dbd7e2f4626a384)