※この記事は、SIOS Tech.Labから抜粋して転載しています。
こんにちは、サイオステクノロジーの佐藤 陽です。
今回は、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点
- customer: 先ほど作成したCustomerのID
- 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記事です!
是非こちらもご覧くださいね。
ではまた!
元の記事:https://tech-lab.sios.jp/archives/34784
About 佐藤 陽