# メール型Amazon Pay で何ができますか。導入方法を教えてください。

## メール型Amazon Payとは
リターゲティングメールから、ECサイト上のAmazon Payボタンへワンクリックで遷移させる機能です。

**「ショッピングカートページ（以下、カートページ）にAmazon Payボタンがある」** という前提のもと、
メール内に **「対象の商品が入った状態でカートに遷移するボタン＋[Amazon Payキャンペーンバナー](https://pay.amazon.co.jp/how-it-works/web-mobile/gcbp)」** を設置いただくことで
**メール開封からサイトへ遷移するためのクリック率改善** に加えて、 **メールからのコンバージョン向上** が期待できます。

## 購入者の操作の流れ

1. ECサイト顧客に届いたリターゲティングメールを開封
2. リターゲティングメール内のAmazon Payリンクをクリック
3. ECサイトのカートページに遷移し、Amazon Payボタンまでスクロール
4. クリックするとAmazonログインページに遷移

**イメージ**
![image](https://d2squ3eekfa1zc.cloudfront.net/image/QA-674-1.png)


## ユースケース例

活用例については以下FAQをご参照ください。
[メール型Amazon Pay はどのような場合に利用できますか？](QA-676)

## ご利用の注意点

### ご利用条件
* Amazonが提供する決済サービス「Amazon Pay」を導入していること。
* カートページに「Amazon Pay」決済ボタンが実装されていること。

### キャンペーンバナーについて

* カートページなどECサイト上にキャンペーンバナーを設置いただくようお願いします。
* 設置されていない場合、キャンペーンの対象から除外される恐れがあります。

### Amazon Payボタン位置までスクロールするソリューションについて

ユーザから同意を得る、目を通す必要があるテキストが存在する場合は、スクロール後のページ内にテキストが表示されるよう修正してください。

## 導入方法

### 1.メール上の設定

* 設置例を参考に、メールにボタンを設置します。
* ボタンをクリックすると、カートページへ遷移するようにします。

![image](https://d2squ3eekfa1zc.cloudfront.net/image/QA-674-2.png)

##### 設置例
以下の **###カートページURL###** と **###出品者ID###** を修正してください。

* **###カートページURL###** ：ECサイトのカートページのURLを設定してください。
* **###出品者ID###** ：[出品者ID](https://www.amazonpay-faq.jp/faq/QA-7)を設定してください。

```
<!--ボタン -->
<a href="###カートページURL###?amazonpayRedirected=true" class="XXX">Amazon Payでかんたん注文</a>

<!-- Amazon Payキャンペーンバナー -->
<!--※メールテンプレートに合わせてキャンペーンバナーをお選びください。-->
<a href="https://d3kgdxn2e6m290.cloudfront.net?merchantId=###出品者ID###" target="_blank"><img src="https://dr29ns64eselm.cloudfront.net/08_Amazon_Pay_BBP_320x100.png?merchantId=###出品者ID###"></a> 

```

### 2.ECサイトのカートページ上の設定

設置例を参考に、Amazon Pay キャンペーンバナーを設置します。
（Amazon Payボタンはすでにカートページにあるという前提です）

![image](https://d2squ3eekfa1zc.cloudfront.net/image/QA-674-3.png)


##### 設置例
この例では、amazonpayRedirected=trueのGETパラメータが存在した場合、Amazon Payが表示されている箇所へスクロールした状態でカートページへ遷移します。

* [Amazon Payキャンペーンバナー](https://pay.amazon.co.jp/how-it-works/web-mobile/gcbp)に従い、キャンペーンバナーを選び、サイト上に設置してください。
* すでにjavascriptで設置済みにAmazon Payボタンにあるplacementを以下の★の箇所の通り修正してください。

```
<!-- Amazon Payキャンペーンバナー -->
<!--※カートに合わせてキャンペーンバナーをお選びください。-->
<a href="https://d3kgdxn2e6m290.cloudfront.net?merchantId=###出品者ID###" target="_blank"><img src="https://dr29ns64eselm.cloudfront.net/08_Amazon_Pay_BBP_320x100.png?merchantId=###出品者ID###"></a> 


<!-- Amazon Payボタンへスクロールするscript -->
<script type="text/javascript" charset="utf-8">
    // Amazon Payボタンが表示されている箇所へスクロールするスクリプト
    var url = new URL(window.location.href);
    var amazonpayRedirected = url.searchParams.get('amazonpayRedirected');
    Boolean(amazonpayRedirected) ? document.querySelector('#AmazonPayButton').scrollIntoView(false) : null; 
</script>

// amazonpayRedirected=trueのGETパラメータが存在している場合は、Amazon Payボタンscriptのplacementを'Other'へ変更
<script type="text/javascript" charset="utf-8">
    amazon.Pay.renderButton('#AmazonPayButton', {
        // set checkout environment
        merchantId: 'merchant_id',
        ledgerCurrency: 'JPY',
        sandbox: true,               
        // customize the buyer experience
        checkoutLanguage: 'ja_JP',
        productType: 'PayAndShip',
        placement: amazonpayRedirected ? 'Other' : 'Cart' ★amazonpayRedirectedがtrueの場合は、Otherを選択
        buttonColor: 'Gold',
        // configure Create Checkout Session request
        createCheckoutSessionConfig: {                     
            payloadJSON: 'payload', // string generated in step 2
            signature: 'xxxx', // signature generated in step 3
            publicKeyId: 'XXXXXXXXXXXXXXXX' ,
            algorithm : 'AMZN-PAY-RSASSA-PSS-V2'
        }   
    });
</script>
```

## 本ソリューションの利用規約

* 当社から画面設計のテンプレートを提示するにあたっては、あくまで参考であり、最終的な画面設計は各社がその責任においてご判断いただくようお願いいたします。
* 本ソリューションの使用に起因または関連する直接的、間接的、結果的、特別、付随的、懲罰的損害賠償（営業権の喪失、事業の中断、利益もしくはデータの逸失、補償費用、コンピュータの障害もしくは故障を含みます。）を含むがこれらに限定されることなく、原因の如何を問わずおよび責任の法理にかかわらず、 Amazonが当該損害の可能性につき通知を受けていた場合であっても、Amazonは、いかなる損害に対しても、責任を負いません。