flintn-checkout 0.0.9 → 0.0.10
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 +21 -15
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,12 +6,14 @@ FlintN Payment SDK — Embed payment forms via iframe checkout or headless hoste
|
|
|
6
6
|
```bash
|
|
7
7
|
npm install flintn-checkout
|
|
8
8
|
```
|
|
9
|
+
> **Note:** for local/non-production use, pass `origin` (e.g. `origin: 'http://localhost:3000'`).
|
|
9
10
|
|
|
10
11
|
## Iframe Checkout
|
|
11
12
|
|
|
12
13
|
Full checkout UI rendered inside a single iframe. Includes card form, express payments (Apple Pay, Google Pay, PayPal), and 3DS handling.
|
|
13
14
|
|
|
14
|
-
|
|
15
|
+
**React**
|
|
16
|
+
|
|
15
17
|
```tsx
|
|
16
18
|
import { useFlintNPayment } from 'flintn-checkout/react';
|
|
17
19
|
|
|
@@ -37,11 +39,12 @@ function Checkout() {
|
|
|
37
39
|
}
|
|
38
40
|
```
|
|
39
41
|
|
|
40
|
-
|
|
42
|
+
**Vanilla JavaScript**
|
|
43
|
+
|
|
41
44
|
```javascript
|
|
42
|
-
import {
|
|
45
|
+
import { createFlintNPayment } from 'flintn-checkout';
|
|
43
46
|
|
|
44
|
-
const payment =
|
|
47
|
+
const payment = createFlintNPayment({
|
|
45
48
|
config: {
|
|
46
49
|
clientSessionId: 'your_client_session_id',
|
|
47
50
|
},
|
|
@@ -60,11 +63,12 @@ const payment = new FlintNPayment({
|
|
|
60
63
|
|
|
61
64
|
payment.mount('#payment-container');
|
|
62
65
|
|
|
63
|
-
//
|
|
64
|
-
payment.unmount();
|
|
66
|
+
// Later, when you want to tear the widget down (e.g. on route change):
|
|
67
|
+
// payment.unmount();
|
|
65
68
|
```
|
|
66
69
|
|
|
67
|
-
|
|
70
|
+
**HTML**
|
|
71
|
+
|
|
68
72
|
```html
|
|
69
73
|
<!DOCTYPE html>
|
|
70
74
|
<html>
|
|
@@ -75,9 +79,9 @@ payment.unmount();
|
|
|
75
79
|
<div id="payment-container" style="max-width: 440px; margin: 0 auto;"></div>
|
|
76
80
|
|
|
77
81
|
<script type="module">
|
|
78
|
-
import {
|
|
82
|
+
import { createFlintNPayment } from 'flintn-checkout';
|
|
79
83
|
|
|
80
|
-
const payment =
|
|
84
|
+
const payment = createFlintNPayment({
|
|
81
85
|
config: {
|
|
82
86
|
clientSessionId: 'your_client_session_id',
|
|
83
87
|
},
|
|
@@ -138,7 +142,8 @@ Individual PCI-compliant input fields rendered as separate iframes. You control
|
|
|
138
142
|
|
|
139
143
|
Each field (card number, expiry, CVV) is a separate iframe. Raw card data never touches your page.
|
|
140
144
|
|
|
141
|
-
|
|
145
|
+
**React**
|
|
146
|
+
|
|
142
147
|
```tsx
|
|
143
148
|
import { useState } from 'react';
|
|
144
149
|
import { useFlintNFields } from 'flintn-checkout/react';
|
|
@@ -223,11 +228,12 @@ function CheckoutForm() {
|
|
|
223
228
|
}
|
|
224
229
|
```
|
|
225
230
|
|
|
226
|
-
|
|
231
|
+
**Vanilla JavaScript**
|
|
232
|
+
|
|
227
233
|
```javascript
|
|
228
|
-
import {
|
|
234
|
+
import { createFlintNFields } from 'flintn-checkout';
|
|
229
235
|
|
|
230
|
-
const fields =
|
|
236
|
+
const fields = createFlintNFields({
|
|
231
237
|
config: {
|
|
232
238
|
clientSessionId: 'your_client_session_id',
|
|
233
239
|
styles: {
|
|
@@ -255,8 +261,8 @@ if (validation.isValid) {
|
|
|
255
261
|
const result = await fields.submit({ cardholderName: 'John Doe' });
|
|
256
262
|
}
|
|
257
263
|
|
|
258
|
-
// Cleanup
|
|
259
|
-
fields.unmount();
|
|
264
|
+
// Cleanup (call when you're done with the form)
|
|
265
|
+
// fields.unmount();
|
|
260
266
|
```
|
|
261
267
|
|
|
262
268
|
### Hosted Fields Options (Vanilla JS)
|
package/package.json
CHANGED