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

5140 ワード
JavaScript stripe JavaScript テキストリンク

背景

  • 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);

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