Nuxt.jsでStripeを利用したApplePay決済を実装する

Nuxt.jsで作成したWebアプリにApplePay決済を実装したので、まとめておきます。
GooglePayの実装は[こちら](https://qiita.com/itouuuuuuuuu/items/f43c97ebb31c75750ae3)にまとめています。

# Merchant IDの作成
AppleDeveloperの `Certificates, Identifiers & Profiles` ページで、 `Merchant ID` を作成します。

![apple_dev_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/ff2e9c8e-0128-c42f-cbc1-583cb2099fab.png)

`Marchant IDs` が選択されていることを確認して、「Continue」を押下します。

![apple_dev_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/5a4384a1-1d65-a290-83b0-55aded751721.png)

`Description` と `Identifier` に任意の値を設定し、「Continue」を押下します。

![apple_dev_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/21179a19-0eda-a969-a00e-07c66bea3d3e.png)

設定内容を確認して、「Continue」を押下します。

![apple_dev_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/c844dd3c-f76a-b5b0-3d50-851198570b5f.png)

「Register」を押下します。

![apple_dev_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/ff8bd37d-255b-f0ad-185b-bddc5a8819f9.png)

`Merchant ID` が作成されていることを確認します。

![apple_dev_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/d1b1f5ab-34a2-9178-7b2c-f7f9b58947da.png)

# ドメイン登録（AppleDeveloper側）

WebでApplePayを使用するには、使用するWebページのドメインを事前に登録する必要があります。

先程作成した `Merchant ID` を選択し、「Add Domain」を押下します。

![apple_dev_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/27c04636-0abd-81b2-85cd-219f1129988d.png)

ApplePayを使用するWebページのドメインを記入して、「Save」を押下します。
httpは指定できないので、注意してください。

![apple_dev_8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/224ecf34-0b70-1f92-1ef8-052da45076b9.png)

ドメイン登録後、 `apple-developer-merchantid-domain-association.txt` というファイルをダウンロード出来るようになります。

![apple_dev_9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/5e1617b8-c9a8-0e24-a184-d3d3e3ed0798.png)

ApplePayを使用するWebページのルートに `.well-known` というディレクトリを作成し、このディレクトリにダウンロードしたファイルを入れてください。
今回の例では、 `https://sample/itouuuuuuuuu.com/.well-known/apple-developer-merchantid-domain-association.txt` に配置します。

その後、「Verify」を押下します。

![apple_dev_9_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/4a9d4124-4db2-f8c7-348a-221ce5a97528.png)

問題なければ、ステータスが `Verified` となっているかと思います。

![apple_dev_10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/0eaa7b99-42fc-96b1-9199-50366a2b208d.png)

# ドメイン登録（Stripe側）

Stripeの管理画面でも、ApplePayを使用するWebページのドメインを登録する必要があります。

Stripeの管理画面から、「設定 -> 支払い方法」を選択します。

![stripe_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/4496cb81-c7d1-9cd2-5635-b11477713515.png)

ApplePayの「設定」を押下します。

![stripe_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/f2153b33-d543-ebc5-6f9f-e3bc47e3c002.png)

「新しいドメインを追加」を押下します。

![stripe_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/2885bcde-7d1c-4321-b440-14a34e53a6de.png)

ApplePayを使用するWebページのドメインを指定し、「確認ファイルをダウンロード」を押下します。
`apple-developer-merchantid-domain-association` というファイルをダウンロード出来るので、このファイルを先程Webページのルートに作成した `.well-known` ディレクトリに入れてください。
AppleDeveloperでダウンロードした `apple-developer-merchantid-domain-association.txt` とは別のファイルなので、注意してください。

完了後、「追加」ボタンを押下してください。

![stripe_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/3a5924e7-dc82-4427-ae68-a2c04537fdf8.png)

正しくドメインが登録されていれば完了です。

![stripe_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/279032/5029b5fd-7051-d45f-2ea6-e0af88415a40.png)

# Nuxt.jsでWebアプリを作成

上記までの設定が終われば、Nuxt.js側の設定は [GooglePay決済時](https://qiita.com/itouuuuuuuuu/items/f43c97ebb31c75750ae3)と同じです。

ただし、AppleDeveloperとStripeに登録したドメインでしかApplePayの支払いボタンは表示されないので、ローカル環境で開発する際は注意してください。