Customize Stripe elements

During checkout, Fontdue uses Stripe’s Address Element for billing and shipping fields. Fontdue matches the style to your theme by default, but you can take full control using Stripe’s Appearance API.

Pass a stripe.appearance object to fontdue.initialize() (or to the FontdueProvider if you’re using the React components).

<script type="module">
  import fontdue from "https://js.fontdue.com/fontdue.esm.js";

  fontdue.initialize({
    config: {
      // .... your existing config here ....

      stripe: {
        appearance: {
          theme: 'flat',
          variables: {
            // you can use your "UI Font" here: change the name to your UI Font family's name
            fontFamily: 'YourUIFontFamily Regular',

            // the UI Font weight is always 400
            fontWeightLight: '400',
            fontWeightNormal: '400',
            fontWeightMedium: '400',
            fontWeightBold: '400',

            // here are some example settings you can modify and add to
            borderRadius: '0',
            spacingUnit: '5px',
            fontSmooth: 'always',
            fontSizeBase: '16px',
          },
        },
      },
    },
  });
</script>