🍣

StripeのCheckoutで表示する決済フォームのフォントサイズを16pxに変更する

2021/05/14に公開

Stripe

tech

課題

以下の記事にもあるように、フォントサイズが16px未満のフォームを使おうとすると、iOS Safariにて勝手にズームされる現象があります。

本記事ではStripeのCheckout機能で利用できるフォームのフォントサイズを変更することで、iOS Safariでも快適に利用する方法を示します。

小ネタですがニッチなだけに検索で探すのが少々難儀なので書き残しておきます。

ドキュメント

以下のドキュメントにて記載があります。

以下のようにJavaScriptによってElementを生成する際にOptionとしてスタイルを渡すことができます。

var element = elements.create('card', {
  style: {
    base: {
      iconColor: '#c4f0ff',
      color: '#fff',
      fontWeight: '500',
      fontFamily: 'Roboto, Open Sans, Segoe UI, sans-serif',
      fontSize: '16px',
      fontSmoothing: 'antialiased',
      ':-webkit-autofill': {
        color: '#fce883',
      },
      '::placeholder': {
        color: '#87BBFD',
      },
    },
    invalid: {
      iconColor: '#FFC7EE',
      color: '#FFC7EE',
    },
  },
});

実装

したがって、以下のように実装しました。

// @see https://stripe.com/docs/js/appendix/style
const formControlOptions = {
  style: {
    base: {
      fontSize: '16px',
    },
  },
}

const numberElement = elements.create('cardNumber', formControlOptions)
const expiryElement = elements.create('cardExpiry', formControlOptions)
const cvcElement = elements.create('cardCvc', formControlOptions)

以上です。

課題

ドキュメント

実装

Discussion