Stripe Element でカード番号の入力フィールドを縦に並べたい

背景

• Stripe.js を用いてカード番号を入力するフォームを生成する時、デフォルトではカード番号・有効期限・CVCの入力フィールドが横並びになってしまう。
• デザイン上、フィールドを縦に並べたい時にどのようにフォームを生成したら良いのか調べた。

完成イメージ

フォームの生成

• まずフォームの生成時は stripe.elements() の返り値からカード番号・有効期限・CVCを入力する各フィールドを create する。
• この時、 elements.create() を実行する時点で document 上に対象として selector で指定した element が存在している状態であることを確認すること。
  • 今回の場合は #card-number-input #card-expiry-input #card-cvc-input の3つを用意しておく。
  • 雑に <div id="card-number-input" /> のような div を置いておくだけで良い。
  • React 等の document を動的に操作するライブラリを使う場合は、レンダリングが完了してから実行すること。

import { loadStripe, StripeElementStyle } from '@stripe/stripe-js';

const style: StripeElementStyle = {
  base: {
    fontSize: '16px',
  },
};

const stripe = await loadStripe('pk_test_TYooMQauvdEDq54NiTphI7jx');
const elements = stripe.elements();

const cardNumberElement = elements.create('cardNumber', { style });
const cardExpiryElement = elements.create('cardExpiry', { style });
const cardCvcElement = elements.create('cardCvc', { style });

cardNumberElement.mount('#card-number-input');
cardExpiryElement.mount('#card-expiry-input');
cardCvcElement.mount('#card-cvc-input');

return cardNumberElement;

これで入力フィールドが生成される。

フォームの送信

• ユーザーが入力を完了してカードトークンを取得したくなった時は、先ほどフォームの生成に使った cardNumberElement を stripe.createToken() の引数に渡せばOKです。

await stripe.createToken(cardNumberElement);

これでトークンを取得できるので、煮るなり焼くなり好きにできます。