StripeのAddressElementを開いたままの状態で表示をしたい:React

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【6/19開催】Kong Community Japan Meetup #4
本イベントでは、Kong Inc. のVP of ProductであるReza Shafii氏もプレゼンターとして参加。当社からはアーキテクト マネージャーの槌野の登壇が決定!参加無料です!!
https://column.api-ecosystem.sios.jp/connect/kong/1081/

【6/21開催】開発者目線でのSBOMとの向き合い方
SBOMの導入から開発者がSBOMの作成・管理を自動で行っていくための方法(デモ)を紹介します。SBOMを全く知らない人から、開発との統合までを紹介するので様々なレベルの方に学びがあるライブとなる予定です!
https://tech-lab.connpass.com/event/321422/

【7/19開催】現場で役立つAzure神小技10+α 〜生成AI,RAG,コスト削減など旬な技術満載のLT大会〜
Azureの最新技術や実用的な小技を紹介する特別なライトニングトーク大会を開催します!
https://tech-lab.connpass.com/event/319077/

【7/26開催】最適なIaCツールを選ぼう
プロジェクトでのツール選びに困らないための重要な観点をご説明します!
https://tech-lab.connpass.com/event/319532/

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

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

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

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

触ったことのない人のために軽い説明をしておきます。【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関連の記事を置いておきます。誰かの助けになることを願っています。

久しぶりにじっくりとリファレンスと格闘してみました。もしかしたらドキュメントに書いてあるかもしれないので、その時はそっと教えてください。

それではまた~

アバター画像
About 龍:Ryu 109 Articles
2022年入社で主にフロントエンドの業務でTailwindと遊ぶ日々。お酒とうまいご飯が好きで、運動がちょっと嫌いなエンジニアです。しゃべれるエンジニアを目指しておしゃべりとブログ執筆に注力中(業務もね)//
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる