@flopay/react 0.1.6 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +42 -0
- package/dist/index.cjs +608 -194
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +39 -4
- package/dist/index.d.ts +39 -4
- package/dist/index.mjs +589 -175
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -99,6 +99,48 @@ Apple Pay, Google Pay, and PayPal are enabled by default. Toggle them with props
|
|
|
99
99
|
|
|
100
100
|
Apple Pay and Google Pay only render on supported devices (Apple Pay on Safari/macOS/iOS, Google Pay on Chrome).
|
|
101
101
|
|
|
102
|
+
#### Buttons Layout
|
|
103
|
+
|
|
104
|
+
Switch from the default form layout to stacked payment buttons with an expandable card form:
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
<FloPayCheckout
|
|
108
|
+
sessionId="sess_abc123"
|
|
109
|
+
layout="buttons"
|
|
110
|
+
buttonsTheme="dark"
|
|
111
|
+
buttonsStyles={{
|
|
112
|
+
cardInputColor: '#f9fafb',
|
|
113
|
+
cardInputPlaceholderColor: '#6b7280',
|
|
114
|
+
cardInputBackground: '#1f2937',
|
|
115
|
+
submitButtonFontSize: '0.9rem',
|
|
116
|
+
}}
|
|
117
|
+
onButtonClick={(method) => console.log('clicked:', method)}
|
|
118
|
+
onComplete={handleSuccess}
|
|
119
|
+
/>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
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.
|
|
123
|
+
|
|
124
|
+
#### Inline Session Creation
|
|
125
|
+
|
|
126
|
+
Skip the backend API route — create the session directly in the component:
|
|
127
|
+
|
|
128
|
+
```tsx
|
|
129
|
+
<FloPayCheckout
|
|
130
|
+
layout="buttons"
|
|
131
|
+
createSession={{
|
|
132
|
+
clientId: 'your-client-id',
|
|
133
|
+
items: [{ providerItemId: 'product-1', providerItemName: 'Widget', totalAmount: 29.99, currency: 'EUR' }],
|
|
134
|
+
account: { userId: 'user_1', email: 'user@example.com', firstName: 'Jane', lastName: 'Doe' },
|
|
135
|
+
successUrl: '/success',
|
|
136
|
+
cancelUrl: '/cancel',
|
|
137
|
+
}}
|
|
138
|
+
onComplete={(result) => window.location.href = '/success'}
|
|
139
|
+
/>
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
The component POSTs to the billing API, gets the full session back, and renders the form — zero backend code needed.
|
|
143
|
+
|
|
102
144
|
### Advanced: Manual Provider Setup
|
|
103
145
|
|
|
104
146
|
For full control over initialization:
|