🍣

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

1 min read

課題

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

https://cly7796.net/blog/css/the-screen-zooms-when-filling-out-forms-on-ios/

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

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

ドキュメント

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

https://stripe.com/docs/js/appendix/style

以下のように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

ログインするとコメントできます