Stripe Elementで表示する決済フォームを、アラビア語やヘブライ語圏向けに右から左で表示できるようになりました。
親要素へのdir="rtl"の設定で対応可能に
RTLへの対応方法はとてもシンプルです。
element.mountの対象となるHTMLの親にdir="rtl"を設定すれば、表示がRTLに切り替わります。
<div dir="rtl">
<div id="payment-element">
</div>
</div>
<script>
const stripe = Stripe(process.env.STRIPE_PUBLIC_API_KEY)
const elements = stripe.elements({
// 省略
});
const paymentElement = elements.create('payment');
paymentElement.mount("#payment-element");
</script>
Reactの場合も同様です。
import {PaymentElement } from "@stripe/react-stripe-js";
// 省略
<div dir="rtl">
<PaymentElement id="payment-element" />
</div>
各フィールドのラベルを変更する
ラベルをアラビア語やギリシャ語などに対応させる場合は、localeオプションを利用します。
利用できる言語、コードについてはStripe javaScript SDK ドキュメントの"Supported locales"をご確認ください。
ギリシャ語
<script>
const stripe = Stripe(process.env.STRIPE_PUBLIC_API_KEY)
const elements = stripe.elements({
appearance: {
theme: 'stripe'
},
clientSecret: 'pi_xxxx',
locale: 'el',
});
const paymentElement = elements.create('payment');
paymentElement.mount("#payment-element");
</script>
アラビア語
<script>
const stripe = Stripe(process.env.STRIPE_PUBLIC_API_KEY)
const elements = stripe.elements({
appearance: {
theme: 'stripe'
},
clientSecret: 'pi_xxxx',
locale: 'ar',
});
const paymentElement = elements.create('payment');
paymentElement.mount("#payment-element");
</script>
[PR] Stripe開発者向け情報をQiitaにて配信中！
2021年12月よりQiitaにて、Stripe開発者のためのブログ記事更新を開始しました。
- [Stripe Updates]：開発者向けStripeアップデート紹介・解説
- ユースケース別のStripe製品や実装サンプルの紹介
- Stripeと外部サービス・OSSとの連携方法やTipsの紹介
- 初心者向けのチュートリアル(予定)
など、Stripeを利用してオンラインビジネスを始める方法について随時更新してまいります。