FloPay SDK Changelog

v1.12.0 - The card setup form takes a client's full saved checkout theme #

The React and Vue card setup components now accept the same appearance and buttonsStyles overrides as the checkout component, so a client's saved embed theme styles the add-card form exactly as it styles checkout.

The card setup component in @flopay/react and @flopay/vue can now render a client's full saved embed theme. Until now it accepted only a preset id or raw hosted-form colours, so the appearance and buttonsStyles overrides a client saved for checkout were lost and the add-card form was only partly on-brand.

What changed

• Two new optional props. The card setup component accepts appearance and buttonsStyles, with the same names and types as on the checkout component, in both React and Vue. Pass the saved preset as theme alongside them.
• Resolved the way checkout resolves them. appearance replaces the preset's appearance, and buttonsStyles merges over the preset's buttons layout. Together they style the hosted field colours and font, the hosted submit button, the container surface (buttonsStyles.cardFormContainer) and the processing, success and error overlay. containerStyle still wins over the theme property by property. React and Vue share one resolution, so the same saved theme renders the same form in both.
• Empty groups count as absent. An empty {} appearance or buttonsStyles is the same as leaving it out, so a preset-only saved theme renders exactly like theme alone. With 'classic' and no overrides the form keeps its historic look; with overrides they apply over it. Raw VaultCardThemeColors are still forwarded unchanged, and the overrides are ignored for them.
• Incomplete themes never fail the form. Fields a saved theme leaves out come from the preset, unknown keys are ignored, and no error is reported for any of these.
• An unrecognised preset id now renders 'modern-light'. Previously it fell back to the classic look. Every documented preset id renders exactly as before.
• Restyles in place. Changing appearance or buttonsStyles re-skins the mounted form without remounting it or reading the session again.

The saved layout value is not used, because card setup has a single layout. The payment-method setup component does not take the new props.

Integration notes

No change is required if you pass a documented preset id or raw colours: existing card setup integrations render as before. If theme holds a preset id this SDK version does not recognise, the form now shows 'modern-light' where it previously showed the classic look; pass 'classic' to keep the classic look. To show a client's saved theme on the add-card form, pass its appearance and buttonsStyles to the card setup component next to theme.