Amazon Cognito User Poolsに登録するユーザーの住所情報を、StripeのAddress Elementで収集する [React編]

この記事は、AWS Advent Calendar 2022 8日目の記事です。

Webサービスやアプリケーションをリリースする際、ユーザー管理機能としてCognito User Poolsは欠かすことができません。

AWS Amplifyでも、Auth機能を利用するとこのサービスがセットアップされるなど、さまざまな場面で登場します。

この記事では、Cognito User Poolsで管理しているユーザー情報のうち、住所情報を入力するフォームを、Stripeが用意するAddress Elementsで実装する方法を紹介します。

Address Elementsで住所入力フォームを作成する

Stripeの埋め込み型住所入力フォームは、@stripe/react-stripe-jsライブラリを利用します。

$ npm i @stripe/stripe-js @stripe/react-stripe-js

また、AWS AmplifyのSDKもインストールしましょう。

$ npm i aws-amplify

フォームを表示させるために、Provider要素のElementsと一緒にAddressElementを配置しましょう。

import { loadStripe } from '@stripe/stripe-js'
import { AddressElement, Elements } from '@stripe/react-stripe-js'

export default function Root() {
  return (
    <Elements
      stripe={loadStripe('pk_test_から始まるStripeのテスト用公開可能APIキーを配置')}
      options={{
        appearance: {
          theme:  'stripe',
        },
      }}
    >
      <form>
          <AddressElement
            options={{
              mode: 'billing',
              allowedCountries: ['JP'],
              fields: {
                phone: 'always'
              }
            }}
          />
          <button type='submit'>保存する</button>
      </form>
    </Elements>
  )
}

このコンポーネントを読み込むと、住所フォームが表示されます。

郵便番号をセットすると、残りのフォームが表示されます。

日本以外の住所を受け付ける方法

AddressElementのallowedCoutriesを削除、またはサポートしたい国を追加してください。

          <AddressElement
            options={{
              mode: 'billing',
-              allowedCountries: ['JP'],
              fields: {
                phone: 'always'
              }
            }}
          />

入力フォームが変わり、指定した国によってフォームが変わるようになります。

[optional] オートコンプリートをサポートする

Google Map APIを利用したり、決済フォームと併せて配置することで、オートコンプリートを有効できます。

それぞれの方法は、以下の記事をご覧ください。

Amplify SDKで入力した情報をCognito User Poolsに反映する

まずは入力された情報を、useStateでハンドルしましょう。

import { loadStripe } from '@stripe/stripe-js'
import { AddressElement, Elements } from '@stripe/react-stripe-js'
+import { useState } from 'react'

export default function Root() {
+  const [userProfile, setUserProfile] = useState<{
+    address?: string;
+    phone_number?: string;
+    locale?: string;
+    name?: string;
+  }>({})
  return (
    <Elements
      stripe={loadStripe('pk_test_から始まるStripeのテスト用公開可能APIキーを配置')}
      options={{
        appearance: {
          theme:  'stripe',
        },
      }}
    >
      <form>
          <AddressElement
            options={{
              mode: 'billing',
              allowedCountries: ['JP'],
              fields: {
                phone: 'always'
              }
            }}
+            onChange={e => {
+              const {
+                address,
+                phone,
+                name,
+              } = e.value
+              setUserProfile({
+                address: address.state,
+                locale: address.country,
+                phone_number: phone,
+                name,
+              })
            }}
          />
          <button type='submit'>保存する</button>
      </form>
    </Elements>
  )
}

もしCognito User Poolsに、State以外の情報も保存したい場合は、次のようなコードを追加しましょう。

              const {
                address,
                phone,
                name,
              } = e.value
+              const supportKeys = ['state', 'city', 'line1', 'line2'] as const
+              const userAddress = supportKeys.map(key => {
+                if (!address[key]) return
+                const value = address[key]
+                return value
+              }).filter(Boolean).join(' ')
              setUserProfile({
-                address: address.state,
+                address: userAddress,
                locale: address.country,
                phone_number: phone,
                name,
              })

あとはAmplify SDKを利用して、保存するだけです。

import { loadStripe } from '@stripe/stripe-js'
import { AddressElement, Elements } from '@stripe/react-stripe-js'
import { useState } from 'react'
+import { Auth } from 'aws-amplify'

export default function Root() {
  const [userProfile, setUserProfile] = useState<{
    address?: string;
    phone_number?: string;
    locale?: string;
    name?: string;
  }>({})
  return (
    <Elements
      stripe={loadStripe('pk_test_から始まるStripeのテスト用公開可能APIキーを配置')}
      options={{
        appearance: {
          theme:  'stripe',
        },
      }}
    >
      <form
        onSubmit={async e => {
          e.preventDefault()
+          const user = Auth.currentAuthenticatedUser()
+          Auth.updateUserAttributes(user, userProfile)
        }}
      >
          <AddressElement
            options={{
              mode: 'billing',
              allowedCountries: ['JP'],
              fields: {
                phone: 'always'
              }
            }}
            onChange={e => {
              const {
                address,
                phone,
                name,
              } = e.value
              setUserProfile({
                address: address.state,
                locale: address.country,
                phone_number: phone,
                name,
              })
            }}
          />
          <button type='submit'>保存する</button>
      </form>
    </Elements>
  )
}

入力済みのデータを表示させる方法

AddressElementは、defaultValueを利用して保存済みのデータを表示できます。

  <AddressElement
    options={{
      mode: 'billing',
      defaultValues: {
        name: "John due",
        address: {
          line1: '千代田区千代田',
          line2: '11',
          city: '千代田区',
          country: 'JP',
          postal_code: '100-0001',
          state: '東京都'
        }
      }
    }}
 />

Authクラスを利用してデータを取得して、defaultValuesに値を設定しましょう。

AddressElementを利用するメリット

グローバルにサービスを提供する場合、住所入力フォームを国ごとに変更する必要があります。

しかし「国の情報を取得」して、「その国に対応した住所入力フォームを提供」する作業は手間がかかります。

StripeのAddressElementを利用することで、入力フォームのローカライズと、データのハンドルを簡単に行えます。