FloPay SDK Changelog

v1.13.0 - The payment method setup form takes a client's full saved checkout theme #

The React and Vue payment method setup components now accept the same appearance and buttonsStyles overrides as the card setup and checkout components, so a client's saved embed theme styles the card form, wallets, PayPal and alternative methods when a customer saves a payment method.

The payment method setup component in @flopay/react and @flopay/vue can now render a client's full saved embed theme. It saves a card, Apple Pay, Google Pay, PayPal or another advertised method without a purchase. 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 when a customer saved a payment method.

What changed

• Two new optional props. The payment method setup component accepts appearance and buttonsStyles, with the same names and types as on the checkout and card setup components, in React (the main entry and @flopay/react/payment-method-setup) and in Vue (@flopay/vue/payment-method-setup). Pass the saved preset as theme alongside them.
• Resolved exactly as on the card setup component. appearance replaces the preset's appearance, and buttonsStyles merges over the preset's buttons layout. The result styles the hosted card fields and submit button, the container around the card form (buttonsStyles.cardFormContainer) and the processing, success and error overlay, as on the card setup component. containerStyle still wins over the theme property by property.
• Wallets and alternative methods follow the theme too. The Stripe Elements of every advertised wallet and alternative method receive the resolved appearance. In React, the method tiles and their save buttons take their colours, border and radius from the resolved buttonsStyles and appearance, as checkout draws them. A method with its own brand colours keeps them. The PayPal vault button keeps PayPal's own brand style, as in checkout.
• 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 to the hosted card form unchanged, and the overrides are ignored for them.
• An unrecognised preset id now renders 'modern-light', as on the card setup component. Previously this component rendered it unthemed. Every documented preset id renders exactly as before.

Integration notes

No change is required if you pass a documented preset id or raw colours: existing payment method setup integrations render as before. To show a client's saved theme when a customer saves a payment method, pass its appearance and buttonsStyles to the payment method setup component next to theme, exactly as you do for the card setup component.