Customer Portalのデフォルト国情報を設定する小ネタ【Stripe】

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
【5/21開催】Azure OpenAI ServiceによるRAG実装ガイドを公開しました
生成AIを活用したユースケースで最も一番熱いと言われているRAGの実装ガイドを公開しました。そのガイドの紹介をおこなうイベントです!!
https://tech-lab.connpass.com/event/315703/

こんにちは、サイオステクノロジーの佐藤 陽です。
今回は、StripeのCustomerPortalのデフォルト国情報を設定する小ネタをご紹介していきたいと思います。

はじめに

StripeのBillingにはCustomerPortalという非常に便利な機能があります。
これは、サブスクリプションを契約しているお客さんが自分で契約内容を変更したり、支払い情報を変更したりできる機能です。

本来であればアプリケーション側において画面の構築や、様々なStripeのAPIの呼び出しが必要となりますが
CustomerPortalの機能を使えば、数行コードを書くだけでこれらの機能を持つページを生成することができます。

UIとしてはStripeのデフォルトのものを使うことになりますが、とっかかりとしては非常に便利です。
そんなCustomerPortal上で表示される、顧客の国情報の初期設定を行う小ネタをご紹介していきます。

Customer Portalの確認

下準備

CustomerPortalを利用するには、少なくともCustomerが必要です。
早速Customerを作っていきましょう。

CreateCustomerAPIを実行します。

curl -L 'https://api.stripe.com/v1/customers' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Basic {your stripe secret key}' \
-d 'name=SIOS 太郎' \
-d 'email=taro-sios@sios.com'

StripeのDashboardを見ると、Customerが作成されていることが確認できます。

ここで作成された customerId をメモしておきます。
今回はcus_OA62VXFKGEwf2DというIDが割り振られました。

CustomerPortalの作成

先ほど作成したCustomerに関するCustomerPortalを作成します。

CreatePortalSessionAPIを実行します。

パラメータとして設定しているのは2点

  1. customer: 先ほど作成したCustomerのID
  2. locale: 今回は日本のユーザーを想定しているため、localeをjaに設定
curl -L 'https://api.stripe.com/v1/billing_portal/sessions' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Basic {your stripe secret key}' \
-d 'customer=cus_OA62VXFKGEwf2D' \
-d 'locale=ja'

この時、curlのレスポンスに含まれているurlのページに飛ぶと、Customer Portalが表示されます。

{
    "id": "bps_1NNlyFG2ztPLZN2DpPh9ngwT",
    "object": "billing_portal.session",
    "configuration": "bpc_1N7s8zG2ztPLZN2D1sZo96QD",
    "created": 1687911055,
    "customer": "cus_OA62VXFKGEwf2D",
    "flow": null,
    "livemode": false,
    "locale": "ja",
    "on_behalf_of": null,
    "return_url": "https://sios.com",
    "url": "https://billing.stripe.com/p/session/test_YWNjdF8xTTNxa2lHMnp0UExaTjJELF9PQTZBaHk4ZzM2YTFJVFNNR0M2elRHVW5oMEhDGE010100QtuQinvS"
}

このページにおいて、支払い方法の追加や請求先情報の変更等が行えます。
今回はデフォルト設定にて行いましたが、表示内容の切り替えなど細かなカスタマイズも可能です。

デフォルト国情報

さて、ここからが本題です。
先ほど作成したCustomer Portalから請求先住所の変更を行いたいと思います。

「情報を更新」ボタンを押すと、請求先住所の入力フォームが表示されます。

 

この時、「国」情報がアメリカ合衆国になっています。
どうやら、顧客の請求先情報が設定されていない場合は、デフォルトがアメリカ合衆国に設定される仕様のようです。

その他の項目は「都道府県」等と表示されているのに、少し違和感がありますね…。
ユーザー目線の立場に立つと、「国」に関してもデフォルトとして「日本」と表示されていてほしいところです。

CustomerPortalを作成するときにlocaleを設定していますが、これはあくまで表示言語の設定のようで、
入力フォームに対するロケールには影響しないようです。

解決策

今回とった解決策はこれです。

Customer作成時に、請求先住所に国情報だけを入れてしまう!

早速やっていきます。

先ほどと同様にCustomerを再度作成します。
ただ1点異なるのが、追加のパラメータとして国情報を追記することです。
curlで実行する場合は、address[country]=JPですね。

curl -L 'https://api.stripe.com/v1/customers' \
-H 'Content-Type: application/x-www-form-urlencoded' \
-H 'Authorization: Basic {your stripe secret key}' \
-d 'name=SIOS 太郎' \
-d 'email=taro-sios@sios.com'
-d 'address[country]=JP'

作成が完了したら、先ほどと同様の手順でCustomerPortalを作成し、請求先住所を確認します。

すると、デフォルトの表示が「日本」に変わっていました!

また、今気づいたのですが入力フォームの並び順も変わっていますね。
郵便番号が一番上に来ていて、日本人にとってより馴染みのある入力フォームになっているかと思います。

まとめ

今回はCustomerPortalのデフォルト国情報を設定する方法をご紹介しました。

「Customer作成時に国情報が確定している」という条件付きであるのと、
恐らく根本的な解決策ではないため、小ネタとしてのご紹介でした。

CustomerPortalのlocale設定で、この辺りまで反映されると嬉しいですね。

それではCustomer Portalを使い倒していきましょう!

おまけ

Stripeブログ仲間が増えました!
フロントエンジニア観点からのStripe記事です!
是非こちらもご覧くださいね。

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

ではまた!

アバター画像
About 佐藤 陽 52 Articles
ロードバイクやトレランなど、走ることが好きなサーバーサイドエンジニア。組み込み系からWeb系へとジョブチェンジし、現在はAzureを使ったWebアプリの開発や、DevOpsの構築を行っています。
ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

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

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


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



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

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる