Stripe.jsを利用して、サイトに決済フォームを埋め込む際、<AddressElement>を利用することで、配送先や請求先住所を入力するフォームをオートコンプリート付きで実装できます。
今回は、AddressElementをPaymentElementと併せて使う方法を紹介します。
ライブラリのインストール・アップグレード
まずはJSライブラリをインストールまたはアップグレードしましょう。
$ npm i @stripe/stripe-js @stripe/react-stripe-js
@stripe/react-stripe-jsのバージョンが1.11.0よりも前の場合は、アップグレードしましょう。
$ npm i @stripe/react-stripe-js@latest
ReactでAddressElementを配置する
要素の配置は、Payment Elementなどの決済フォーム要素と同じです。
Reactの場合、Elementsの子要素で配置する必要がある点に注意しましょう。
import { loadStripe } from '@stripe/stripe-js'
import { AddressElement, Elements } from '@stripe/react-stripe-js'
export default function Home() {
return (
<Elements
stripe={loadStripe('pk_test_xxx')}
>
<AddressElement
options={{
mode: 'billing',
}}
onChange={e => {
if (e.complete) {
console.log(e.value)
}
}}
/>
</Elements>
)
}
埋め込みに成功すると、次のように表示されます。
国を選択すると、住所入力フォームが動的に変化します。
入力できる住所を、日本のみ（または任意の国のみ）に指定する方法
ECサイトでは、商品の発送を国内限定にしたり、特定地域のみに絞る必要があります。
その場合は、AddressElementのallowedCountriesを指定しましょう。
住所要素を「日本のみ」にする
allowedCountriesに['JP']を設定すると、日本の住所のみを受け付けます。
<AddressElement
options={{
mode: 'billing',
+ allowedCountries: ['JP'],
}}
/>
氏名と郵便番号フォームが表示され、国を指定する要素が非表示になりました。
郵便番号をセットすると、残りのフォームが表示されます。
オートコンプリートを有効にする
AddressElementでは、一定の条件を満たすとオートコンプリートが利用できます。
最も簡単な方法は、「同一のElements要素内に、PaymentElements要素を配置すること」です。
オートコンプリートが有効になる例
<Elements
stripe={loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_API_KEY)}
options={{
clientSecret: 'pi_xxxx_secret_xxxx'
}}
>
<PaymentElement />
<AddressElement
options={{
mode: 'billing',
allowedCountries: ['JP'],
}}
/>
</Elements>
この場合、Checkout同様郵便番号を入力すると、住所のオートコンプリートが利用できます。
入力された住所をuseStateなどで管理する
AddressElementのonChangeイベントで、入力内容を取得できます。
<AddressElement
onChange={e => {
// 全ての項目が埋まっている場合、trueになる
if (e.complete) {
// 住所や氏名などの値
console.log(e.value)
}
}}
/>
onChangeの引数は、次のようなデータが含まれています。
{
elementType: 'address',
elementMode: 'billing',
value: {
name: 'name',
address: {
line1: '千代田区千代田',
line2: '11',
city: '千代田区',
country: 'JP',
postal_code: '100-0001',
state: '東京都'
}
},
empty: false,
complete: true,
isNewAddress: true
}
emptyやcompleteなどを利用することで、フォームの入力状態についての状態管理もAddressElementに任せやすくなります。
なお、TypeScriptを利用している場合、次のようにして、型情報を取得できます。
import { StripeAddressElementChangeEvent } from '@stripe/stripe-js'
const onAddressChange = (e: StripeAddressElementChangeEvent) => {
const { name, address } = e.value
}
別システムが持つ住所情報を利用する方法
既存のシステムで住所情報をすでに保存している場合、顧客が住所を再び入力する手間を省略することができます。
デフォルト値として設定する方法
1つ目の方法は、defaultValuesを使います。
すでにシステムが持っている住所情報を、デフォルト値として設定することができます。
<AddressElement
options={{
mode: 'billing',
defaultValues: {
name: "John due",
address: {
line1: '千代田区千代田',
line2: '11',
city: '千代田区',
country: 'JP',
postal_code: '100-0001',
state: '東京都'
}
}
}}
/>
複数の住所を選択できるようにする方法
複数の住所を保存している場合は、contactsも利用できます。
<AddressElement
options={{
mode: 'billing',
allowedCountries: ['JP'],
contacts: [{
name: "John due",
address: {
line1: '千代田区千代田',
line2: '11',
city: '千代田区',
country: 'JP',
postal_code: '100-0001',
state: '東京都'
}
}, {
name: "Jane due",
address: {
line1: '千代田区丸の内',
line2: '11',
city: '千代田区',
country: 'JP',
postal_code: '100-0005',
state: '東京都'
}
}]
}}
contactを利用すると、複数の住所を顧客が指定できるUIが表示されます。
決済フォームの住所フォームに、AddressElementを利用するメリット
通常のフォーム要素を利用する場合、配送先・請求先住所を決済と紐づけるには、明示的にデータを渡す必要があります。
const result = await stripe.confirmPayment({
elements,
confirmParams: {
payment_method_data: {
billing_details: {
name: "John due",
address: {
line1: '千代田区千代田',
line2: '11',
city: '千代田区',
country: 'JP',
postal_code: '100-0001',
state: '東京都'
}
}
},
shipping: {
name: "Jane due",
address: {
line1: '千代田区千代田',
line2: '22',
city: '千代田区',
country: 'JP',
postal_code: '100-0001',
state: '東京都'
}
}
},
redirect: 'if_required',
})
しかしPaymentElementとAddressElementが同一のElementsプロバイダーに存在する場合、AddressElementの情報はStripe.js側で自動的にStripeへ送信されます。
そのため、フォーム周りの状態管理などのコード量を削減することができます。
関連記事
[PR] Stripe開発者向け情報をQiitaにて配信中！
- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)
など、Stripeを利用してオンラインビジネスを始める方法について週に２〜３本ペースで更新中です。