@flopay/react 1.1.3 → 1.1.5

package/README.md

@@ -115,7 +115,7 @@ Use this code to create or request a fresh checkout session, then send the custo
 Use `FloPayAutomaticPaymentButton` when you want a single reusable button that:
 
 - creates an `auto` checkout session inline or reuses an existing `sessionId`
-- processes the saved payment method on click
+- lets the backend resolve and charge the customer's most recently vaulted payment method (across providers)
 - shows the shared processing / success / failure modal
 - emits the same success and decline events without rendering a full checkout form
 
@@ -124,7 +124,9 @@ The button accepts either:
 - `sessionId`
 - or the same session-creation props you would normally post to the backend: `clientId`, `items`, `subscriptions`, `account`, `successUrl`, `cancelUrl`, `couponCodes`, `tagsData`, `utmMetadata`
 
-It also reuses the buttons-layout theme props (`buttonsTheme`, `buttonsStyles`) and handles saved-payment auth flows such as 3DS and PayPal redirects.
+It accepts the same `theme` prop as `FloPayCheckout` and `SplitCardForm` (see [Theming](#theming) below) — the value is forwarded to the fallback `FloPayCheckout` modal so the entire flow stays visually consistent. When the saved-payment charge can't complete silently, the button opens the standard `FloPayCheckout` inline with the same theme already applied.
+
+> **Removed in this version**: the legacy `paymentMethodId` and `checkoutMethod` props are now `@deprecated` and silently ignored. The backend's auto-checkout (`createSingle`) looks up the customer's latest vaulted payment method via `getLatestByUserId` and rebinds the session's gateway to match, so the SDK no longer hand-picks a PM or a provider. Existing integrations that still pass these props continue to work — they have no effect.
 
 ```tsx
 import { FloPayAutomaticPaymentButton } from '@flopay/react';
@@ -146,7 +148,7 @@ function UpsellButton() {
       ]}
       successUrl={`${window.location.origin}/success`}
       cancelUrl={`${window.location.origin}/success`}
-      buttonsTheme="dark"
+      theme="bold-dark"
       onClick={() => {
         window.dataLayer?.push({ event: 'automatic_payment_button_click' });
       }}
@@ -184,6 +186,40 @@ Apple Pay, Google Pay, and PayPal are enabled by default. Toggle them with props
 
 Apple Pay and Google Pay only render on supported devices (Apple Pay on Safari/macOS/iOS, Google Pay on Chrome).
 
+#### Theming
+
+`FloPayCheckout`, `FloPayAutomaticPaymentButton`, and `SplitCardForm` accept a single `theme` prop that maps to a coherent `{appearance, buttonsLayout}` bundle in `@flopay/shared`'s `THEMES` map. One value styles the Stripe-side appearance, the React-rendered wrapper, the submit button, the inputs, and — for `FloPayAutomaticPaymentButton` — the fallback modal that opens when a saved-payment charge can't complete silently.
+
+| `theme` | Aesthetic |
+|---|---|
+| `'classic'` | Historic FloPay look (no bundle applied — `#EDEDFF` wrapper, indigo submit). |
+| `'modern-light'` / `'modern-dark'` | Clean & airy, Inter, soft shadows, FloPay-blue accents. |
+| `'bold-light'` / `'bold-dark'` | Saturated FloPay blue with gradient pill submit and heavy borders. |
+| `'glass-light'` / `'glass-dark'` | Translucent surfaces with backdrop blur over a blue gradient. |
+
+```tsx
+<FloPayCheckout
+  sessionId="sess_abc123"
+  theme="bold-dark"
+  onComplete={handleSuccess}
+/>
+
+<FloPayAutomaticPaymentButton
+  sessionId="sess_abc123"
+  theme="bold-dark" // applied to the button AND the fallback modal
+  onSuccess={handleSuccess}
+/>
+```
+
+`appearance` (Stripe-side overrides) and `buttonsStyles` (per-field wrapper overrides) still work — both win over the resolved bundle for the fields they touch, so you can layer customizations on top of a theme:
+
+```tsx
+<FloPayCheckout
+  theme="modern-light"
+  buttonsStyles={{ submitButton: { backgroundColor: '#FF0099' } }} // wins
+/>
+```
+
 #### Buttons Layout
 
 Switch from the default form layout to stacked payment buttons with an expandable card form:
@@ -192,19 +228,13 @@ Switch from the default form layout to stacked payment buttons with an expandabl
 <FloPayCheckout
   sessionId="sess_abc123"
   layout="buttons"
-  buttonsTheme="dark"
-  buttonsStyles={{
-    cardInputColor: '#f9fafb',
-    cardInputPlaceholderColor: '#6b7280',
-    cardInputBackground: '#1f2937',
-    submitButtonFontSize: '0.9rem',
-  }}
+  theme="bold-dark"
   onButtonClick={(method) => console.log('clicked:', method)}
   onComplete={handleSuccess}
 />
 ```
 
-Theme presets: `'default'`, `'minimal'`, `'rounded'`, `'dark'`. Custom styles via `buttonsStyles` merge on top of the theme preset. See the [ButtonsLayoutStyles reference](https://docs.flopay.com/api-reference/react/flopay-checkout#buttonslayoutstyles-reference) for all properties.
+> **Deprecated**: the legacy `buttonsTheme` prop (`'default'` / `'minimal'` / `'rounded'` / `'dark'`) still works but new code should use `theme` so the same value drives both the buttons-layout wrapper and the auto-payment fallback. See [ButtonsLayoutStyles reference](https://docs.flopay.com/api-reference/react/flopay-checkout#buttonslayoutstyles-reference) for the underlying override fields.
 
 #### Button Hooks