【 stripe 】StripeのAddressElementを開いたままの状態で表示をしたい：React

2023.06.27 stripeコラム

※この記事は、SIOS Tech.Labから抜粋して転載しています。

今回は、業務でちょっと使っているStripeのAddressElementについて紹介していきたいと思います。お客様からの要望があって、苦しんで調べたらできちゃった偶然の副産物になります。やりたいことはタイトルの通りですので、同じことをやりたくて苦しんでいる人の助けになればよいなと思います。

どもども！６月も終わり際になってきて時が進むのは早いな～と、外を見つめながら帰っています。書き出しだけ電車の中で、こんばんは！龍ちゃんです。

さて、ちゃんとデスクに来た龍ちゃんです。今回は、【Stripe】の一つの要素：AddressElementの裏道について紹介です。お客さんからの要望で調査をして、たどり着いた秘宝みたいな扱いです。それではさくっと進めていきましょう。

今回のトピックとしては、【Stripe】の「AddressElement」を開いたまま表示をしたいというタイトルまんまです。読んでほしい対象としては、すでにStripe:AddressElementを使用していて、それを開きたいと思っている人向けの記事になります。Stripeの方がQiitaの記事をAddressElementで書いていたのでめちゃめちゃ参考になりました。

Stripe.jsを利用した決済フォームで、オートコンプリート付きの住所フォームを埋め込む方法 [React編]

触ったことのない人のために軽い説明をしておきます。【Stripe】では様々な機能を提供しています。その一つの機能がElementsです。こちらのElementsでは、Reactの構築済みUIを提供してくれています。またまた、その中に「AddressElement」があります。読んで字のとおり住所情報の入力フォームを提供しています。

それがこちら。

初期状態の場合だと、「氏名・郵便番号」のみが表示されています。「郵便番号」を入力すると伸びて、住所の主要項目が出てきます。動的にレイアウトが変更されるので僕としては、大変かっこいいUIだなと感動していました。ですが、お客さんの要望として、常に開きっぱなしのUIにしてほしいとの要望が上がりました。要望が上がれば実現性を調査するのが、エンジニアです。目指す形はこちらになります。

これを実現するコードが以下になります。回答を口頭で言うならば「defaultValue」で「addressのcityに適当な文字列を挿入する」ということになります。

import { AddressElement } from "@stripe/react-stripe-js";
import { StripeAddressElementOptions } from "@stripe/stripe-js";

export const StripeAddressElements = () => {
  const options: StripeAddressElementOptions = {
    mode: "shipping",
    allowedCountries: ["JP"],
    defaultValues: {
      name: "",
      address: {
        country: "JP",
        city: "JP",
        line1: "",
        state: "",
        line2: "",
        postal_code: "",
      },
    },
    fields: {
      phone: "always",
    },
    validation: {
      phone: {
        required: "always",
      },
    },
  };
  return (
    <>
      <AddressElement options={options} />
    </>
  );
};

初期値を入力しておけば、アコーディオンが開いた状態で表示されます。ここで重要なのは、「coutryが日本の場合はcityの入力項目が無視をされる」という点です。こちらを見つけたことで、日本語入力の限定で開きっぱなしのUIを作成することができます。もちろん入力項目が無視されるのでバリデーションも通過します。

今回は、ちょっと裏道を見つけた報告なのでこの辺で！！同僚が書いたStripe関連の記事を置いておきます。誰かの助けになることを願っています。