Stripe Elementsはカード情報を入力するシンプルなフォームを実装するのにとても重宝します。
デフォルトで用意されているフォームを柔軟にカスタマイズできるので、見た目を変えたいときにも使い勝手が良い機能です。

そこで今回は、Elementsのカスタマイズの方法についてご紹介します。

カードオブジェクトは分割可能

Elementsのカードタイプ（キャプチャの赤枠部分）はそれぞれカード番号、有効期限、CVCに分割できます。
ショーケースが用意されていますので、さっと見ておくとかなり参考になります。

Elementsのカスタマイズサンプル

例えば入力欄を3行に分けたいとしましょう。

<div class="field">
  <div id="card-number"></div>
</div>
<div class="field">
  <div id="card-expiry"></div>
</div>
<div class="field">
  <div id="card-cvc"></div>
</div>

JavaScriptコードは次のようになります。

const stripe = Stripe('pk_test_*******************');
const elements = stripe.elements();

const elementStyles = { ... };
const elementClasses = { ... };

// カード番号
const cardNumber = elements.create('cardNumber', {
  style: elementStyles,
  classes: elementClasses,
});
cardNumber.mount('#card-number');

// カードの有効期限
const cardExpiry = elements.create('cardExpiry', {
  style: elementStyles,
  classes: elementClasses,
});
cardExpiry.mount('#card-expiry');

// カードのCVC入力
const cardCvc = elements.create('cardCvc', {
  style: elementStyles,
  classes: elementClasses,
});
cardCvc.mount('#card-cvc');


// トークンを作成
// cardNumberのみを指定する
stripe.createToken(cardNumber, {}).then(function(result) { ... });

DOMのID属性にmountメソッドで紐づけていきます。引数にはDOMセレクタを指定できます。
プレースホルダーテキストなども指定可能です。

最終的にカスタマーを作成するためのトークンを作成すると思います。
その際、createTokenメソッドの第一引数はcardNumberを指定します。
有効期限・CVCの値は自動的にカードナンバーエレメントに紐付けられるので、createTokenには指定しなくて大丈夫です。

elements.create(type, options) – Stipe docs

キャプチャのように独立させることができました。
レイアウトの調整はCSSで行ってください。

またデフォルトのバリデーションは行われないので自前で実装する必要があります。
Elementのchangeイベントを監視してerrorオブジェクトを参照します。

element.on(event, handler) – Stripe docs