AWSのRoute53でStripe Checkoutにカスタムドメインを設定する

Stripeが提供するリダイレクト型の決済APIがStripe Checkoutです。

通常リダイレクト先の決済ページは、`https://checkout.stripe.com`を含むURLです。

もし表示されるURLを、独自のストア・サービスのドメインに変更したい場合は、Stripe Dashboardから設定を行う必要があります。

この記事では、Stripe DashboardとAWSのDNS管理サービスRoute53を利用して、カスタムドメインを設定する方法を紹介します。

## 作業前の注意点

- カスタムドメインは**月10USD**の有料オプションです。
- Route53管理画面にアクセスし、DNSの設定が行える状態であることをご確認ください。
- **Step3**の接続チェックに**３時間半以上**かかります。  
ワークショップなどで紹介する場合には、Step2までを早い段階で済ませる構成にしましょう。

## Step1: Stripe Dashboardから、設定したいドメイン名を登録する

カスタムドメインの設定は、[Stripe Dashboardの設定ページ](https://dashboard.stripe.com/settings)から行えます。

[ビジネス設定]の[カスタムドメイン]を選択しましょう。

![スクリーンショット 2022-04-01 16.00.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/bc9a3d7a-89dc-d2ef-e9a9-2c2bf042c306.png)

[カスタムドメイン]ページでは、現在(2022/04)Checkoutのドメイン設定画面が表示されています。

![スクリーンショット 2022-04-01 16.03.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/8eb05ece-8417-8d4b-aa7e-c2abc9ca9a90.png)
直接URL: https://dashboard.stripe.com/settings/custom-domains

[独自のものを追加]を選択すると、ドメイン名を入力するフォームが表示されます。
`checkout.example.com`のような、独自のサブドメインを入力しましょう。

![スクリーンショット 2022-04-01 16.06.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/b7b094c1-2385-626a-70a0-b95c212ef5b5.png)

なお、サブドメインではないドメイン(`example.com`や`www.example.com`)の入力はできませんのでご注意ください。

![スクリーンショット 2022-04-01 16.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d1004f4c-2396-d461-97d7-4efc47e40068.png)

[接続する]をクリックすると、DNSに設定するための情報がモーダル表示されます。

![スクリーンショット 2022-04-01 16.10.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/589300bd-e3ac-71fc-4ecd-66564cf2f99b.png)


## Step2: Route53でCNAME / TXTレコードを設定する

ここからはAWSのコンソールに移動します。
先ほどのモーダルに表示されている情報を利用しますので、新しいタブまたはウィンドウで[AWSのマネジメントコンソール](https://console.aws.amazon.com/console/home)を開きましょう。

![スクリーンショット 2022-04-01 16.14.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d77f83cb-76a3-663c-2c13-edcd88b4a805.png)

[Route53]を検索バーに入力し、Route53の管理ページに移動します。

![スクリーンショット 2022-04-01 16.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/7b71ce6f-3052-cec6-0a16-0004f4863539.png)

設定したいドメインのホステッドゾーンに移動し、[レコードを作成]をクリックしましょう。

![スクリーンショット 2022-04-01 16.16.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/c53178e2-b309-b2ea-3ece-071fd75edbec.png)

Step1で表示されたCNAME / TXTレコード情報を入力します。

![スクリーンショット 2022-04-01 16.12.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/b3558286-a4fa-6132-0c57-da60197b5669.png)

## Step3: Stripeがドメインへの接続に成功するまで待つ

レコードの登録に成功すると、Stripe Dashboard側の表示が以下のように切り替わります。

![スクリーンショット 2022-04-01 16.17.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/737f7650-80d0-b5d2-2b7c-2c6430be7bc1.png)

ドメインの確認ができ次第、Stripe側への接続が行われます。

![スクリーンショット 2022-04-01 16.37.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/8d5cc6c2-c315-93ed-f8a0-16adddcf0581.png)

ただし、接続されたドメインの確認に、３時間以上の時間がかかります。
メールでの通知が行われますので、ここで作業を一区切りしましょう。

## Step4: Stripe Dashboardで、利用するドメインを切り替える

設定したドメインが利用できるようになると、アカウントに登録しているメールアドレスに対して通知メールが届きます。

![スクリーンショット 2022-04-02 16.48.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/d3c6688e-709e-c44c-fde3-eece8591a23d.png)
 
Stripe Dashboardに移動すると、登録したドメインが選択できるようにUIが変わっています。

![スクリーンショット 2022-04-02 16.44.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/5dec79f4-a5c7-0c96-96d1-3e365ecb617c.png)

ドメインの切り替えは、テスト環境・本番環境それぞれで行うことができます。
Dashboard右上ので設定している環境側でのみ変更が適用されるため、テストと本番を間違えて操作しないように注意しましょう。

![スクリーンショット 2022-04-02 16.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/437e90c1-1dfc-82ba-4b33-7735af3f3bc7.png)

切り替えが完了すると、カスタムドメイン側に`有効`ラベルが表示されます。

![スクリーンショット 2022-04-02 16.46.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/1aae9f24-9eb6-b01d-2382-5c4f90e7eb5e.png)

## Step5: Checkoutセッションを作成し、動作を確認する

変更したドメインに切り替わっているかを、実際にCheckoutのセッションを作成して試してみましょう。

Stripe CLIでは、以下のコマンドの`price_xxx`を利用中のアカウントのものに変更することで、セッションを作成できます。

```bash
$ stripe checkout sessions create \
 --success-url="https://example.com/success"  \
 --cancel-url="https://example.com/cancel" \
 -d "line_items[0][price]"=price_xxx \
 -d "line_items[0][quantity]"=2 \
 --mode=payment
```

CLIの実行結果の`url`を見ると、設定したドメインに切り替わっていることが確認できます。

```json
{
  "id": "cs_test_xxxxx",
  ...
  "url": "https://checkout-demo.example.com/pay/cs_test_xxxxxxxx"
}
```

実際の組み込みでは、このURLを利用してサーバー側またはクライアント側でリダイレクト処理を行いましょう。

```js
app.post('/create-checkout-session', async (req, res) => {
  const session = await stripe.checkout.sessions.create({
    line_items: [
      {
        // Provide the exact Price ID (for example, pr_1234) of the product you want to sell
        price: '{{PRICE_ID}}',
        quantity: 1,
      },
    ],
    mode: 'payment',
    success_url: `${YOUR_DOMAIN}/success.html`,
    cancel_url: `${YOUR_DOMAIN}/cancel.html`,
    automatic_tax: {enabled: true},
  });

  res.redirect(303, session.url);
});
```

### `redirectToCheckout`を利用している場合

https://qiita.com/hideokamoto/items/3838577d51d44fdddee1

# おわりに

リダイレクト型の決済フォームを提供するCheckoutで、独自ドメインを設定する方法を紹介しました。

有償オプションではありますが、提供しているサービス・ブランドのドメインで決済ページを提供できるようになります。

「テスト環境で切り替えテストをしてから本番でも適用する」などの操作も可能ですので、ぜひご検討ください。


# [PR] Stripe開発者向け情報をQiitaにて配信中！

- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)

など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。

-> [Stripe Organizationsをフォローして最新情報をQiitaで受け取る](https://qiita.com/organizations/stripe)