@flopay/react 0.4.2 → 0.4.4
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 +64 -1
- package/dist/index.cjs +1889 -654
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +39 -3
- package/dist/index.d.ts +39 -3
- package/dist/index.mjs +1777 -543
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -83,6 +83,64 @@ function CheckoutPage() {
|
|
|
83
83
|
|
|
84
84
|
The mode can also be set on the session itself via the billing API's `checkoutMode` field. The `checkoutMode` prop overrides the session value.
|
|
85
85
|
|
|
86
|
+
### Automatic Payment Buttons
|
|
87
|
+
|
|
88
|
+
Use `FloPayAutomaticPaymentButton` when you want a single reusable button that:
|
|
89
|
+
|
|
90
|
+
- creates an `auto` checkout session inline or reuses an existing `sessionId`
|
|
91
|
+
- processes the saved payment method on click
|
|
92
|
+
- shows the shared processing / success / failure modal
|
|
93
|
+
- emits the same success and decline events without rendering a full checkout form
|
|
94
|
+
|
|
95
|
+
The button accepts either:
|
|
96
|
+
|
|
97
|
+
- `sessionId`
|
|
98
|
+
- or the same session-creation props you would normally post to the backend: `clientId`, `items`, `subscriptions`, `account`, `successUrl`, `cancelUrl`, `couponCodes`, `tagsData`, `utmMetadata`
|
|
99
|
+
|
|
100
|
+
It also reuses the buttons-layout theme props (`buttonsTheme`, `buttonsStyles`) and handles saved-payment auth flows such as 3DS and PayPal redirects.
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
import { FloPayAutomaticPaymentButton } from '@flopay/react';
|
|
104
|
+
|
|
105
|
+
function UpsellButton() {
|
|
106
|
+
return (
|
|
107
|
+
<FloPayAutomaticPaymentButton
|
|
108
|
+
clientId="your-client-id"
|
|
109
|
+
account={{ userId: 'user_1', email: 'user@example.com' }}
|
|
110
|
+
items={[
|
|
111
|
+
{
|
|
112
|
+
providerItemId: 'upsell_1',
|
|
113
|
+
providerItemName: 'AI Supercharger Pack',
|
|
114
|
+
totalAmount: 249,
|
|
115
|
+
overrideAmount: 80,
|
|
116
|
+
currency: 'EUR',
|
|
117
|
+
quantity: 1,
|
|
118
|
+
},
|
|
119
|
+
]}
|
|
120
|
+
successUrl={`${window.location.origin}/success`}
|
|
121
|
+
cancelUrl={`${window.location.origin}/success`}
|
|
122
|
+
buttonsTheme="dark"
|
|
123
|
+
onClick={() => {
|
|
124
|
+
window.dataLayer?.push({ event: 'automatic_payment_button_click' });
|
|
125
|
+
}}
|
|
126
|
+
onSuccess={() => {
|
|
127
|
+
console.log('automatic payment succeeded');
|
|
128
|
+
}}
|
|
129
|
+
onError={(error) => {
|
|
130
|
+
console.error(error.message);
|
|
131
|
+
}}
|
|
132
|
+
onDecline={(decline) => {
|
|
133
|
+
console.log('automatic payment declined', decline);
|
|
134
|
+
}}
|
|
135
|
+
>
|
|
136
|
+
Purchase Item
|
|
137
|
+
</FloPayAutomaticPaymentButton>
|
|
138
|
+
);
|
|
139
|
+
}
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
`children` render inside the button, so you can treat them as slot content. If omitted, the default buttons-layout card content is used.
|
|
143
|
+
|
|
86
144
|
#### Wallet Buttons
|
|
87
145
|
|
|
88
146
|
Apple Pay, Google Pay, and PayPal are enabled by default. Toggle them with props:
|
|
@@ -241,7 +299,12 @@ Pass `onTokenizedBody` to handle backend submission yourself:
|
|
|
241
299
|
billingApiUrl="https://billing.example.com"
|
|
242
300
|
email="user@example.com"
|
|
243
301
|
onTokenizedBody={(body) => {
|
|
244
|
-
// body = {
|
|
302
|
+
// body = {
|
|
303
|
+
// id: 'pm_xxx',
|
|
304
|
+
// type: 'card',
|
|
305
|
+
// threeDSecureActionResultTokenId: 'pi_xxx',
|
|
306
|
+
// originalPaymentMethodId: 'pm_xxx',
|
|
307
|
+
// }
|
|
245
308
|
myCustomProcessPayment(body);
|
|
246
309
|
}}
|
|
247
310
|
/>
|