Customize the Address fields

During the checkout process we take advantage of Stripe’s Address Element. We try to match the style of the fields to the Fontdue theme, but you may want to take more control over the style. You can do this by passing the Stripe Appearance config to the fontdue.initialize() (using Fontdue.js) or with the FontdueProvider (using the React components).

The full Appearance API documentation is here: https://docs.stripe.com/elements/appearance-api

<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>