flintn-checkout 0.0.1 → 0.0.2

package/README.md

@@ -16,7 +16,7 @@ import { useFlintNPayment } from 'flintn-checkout/react';
 function Checkout() {
   const { containerRef, isReady, paymentResult, error } = useFlintNPayment({
     config: {
-      clientToken: 'your_client_token',
+      clientSessionId: 'your_client_session_id',
     },
     onPayment: (result) => {
       if (result.status === 'PAYMENT_SUCCESS') {
@@ -32,7 +32,7 @@ function Checkout() {
 
   return (
     <div style={{ display: 'flex', justifyContent: 'center' }}>
-      <div ref={containerRef} style={{ width: '100%', maxWidth: '440px', height: '600px' }} />
+      <div ref={containerRef} style={{ width: '100%', height: '600px' }} />
     </div>
   );
 }
@@ -44,10 +44,7 @@ import { FlintNPayment } from 'flintn-checkout';
 
 const payment = new FlintNPayment({
   config: {
-    clientToken: 'your_client_token',
-    maxWidth: '440px',
-    isCardHolderRequired: true,
-    successRedirectUrl: 'https://example.com/success',
+    clientSessionId: 'your_client_session_id',
   },
   onPayment: (result) => {
     if (result.status === 'PAYMENT_SUCCESS') {
@@ -86,7 +83,7 @@ payment.unmount();
 
     const payment = new FlintNPayment({
       config: {
-        clientToken: 'your_client_token',
+        clientSessionId: 'your_client_session_id',
       },
       onPayment: (result) => {
         console.log('Payment result:', result);
@@ -103,11 +100,12 @@ payment.unmount();
 
 | Option | Type | Required | Default | Description |
 |--------|------|----------|---------|-------------|
-| `clientToken` | `string` | ✅ | — | Client token from your backend |
-| `maxWidth` | `string` | ❌ | `'440px'` | Maximum width of widget |
+| `clientSessionId` | `string` | ✅ | — | Client session ID from backend |
 | `isCardHolderRequired` | `boolean` | ❌ | `true` | Show cardholder name field |
 | `successRedirectUrl` | `string` | ❌ | — | Redirect URL after successful payment |
 
+> **Note:** `isCardHolderRequired` only applies when using Primer as the payment provider.
+
 ## Callbacks
 
 | Callback | Description |
@@ -132,7 +130,7 @@ payment.unmount();
 ```typescript
 interface PaymentResult {
   status: 'PAYMENT_SUCCESS' | 'PAYMENT_ERROR' | 'PAYMENT_CANCELLED';
-  data?: string;  // Payment ID on success
+  data?: string; // Payment ID on success
   error?: {
     code: string;
     message: string;
@@ -161,13 +159,13 @@ Enable debug logs in console:
 ```typescript
 // React
 useFlintNPayment({
-  config: { clientToken: '...' },
+  config: { clientSessionId: '...' },
   debug: true,
 });
 
 // Vanilla JS
 new FlintNPayment({
-  config: { clientToken: '...' },
+  config: { clientSessionId: '...' },
   debug: true,
 });
 ```

package/dist/index.d.mts

@@ -10,7 +10,7 @@ declare const EventType: {
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
 interface FlintNConfig {
-    clientToken: string;
+    clientSessionId: string;
     maxWidth?: string;
     isCardHolderRequired?: boolean;
     successRedirectUrl?: string;
@@ -59,7 +59,7 @@ declare const parseOrigin: (origin: string) => string;
 declare const buildIframeSrc: (origin: string) => string;
 declare const createIframeElement: (src: string) => HTMLIFrameElement;
 declare const validateConfig: (config: {
-    clientToken?: string;
+    clientSessionId?: string;
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 

package/dist/index.d.ts

@@ -10,7 +10,7 @@ declare const EventType: {
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
 interface FlintNConfig {
-    clientToken: string;
+    clientSessionId: string;
     maxWidth?: string;
     isCardHolderRequired?: boolean;
     successRedirectUrl?: string;
@@ -59,7 +59,7 @@ declare const parseOrigin: (origin: string) => string;
 declare const buildIframeSrc: (origin: string) => string;
 declare const createIframeElement: (src: string) => HTMLIFrameElement;
 declare const validateConfig: (config: {
-    clientToken?: string;
+    clientSessionId?: string;
 }) => void;
 declare const sanitizeToken: (token: string) => string;
 

package/dist/index.js

@@ -67,8 +67,8 @@ var createIframeElement = (src) => {
   return iframe;
 };
 var validateConfig = (config) => {
-  if (!config.clientToken) {
-    throw new Error("[FlintN SDK] clientToken is required");
+  if (!config.clientSessionId) {
+    throw new Error("[FlintN SDK] clientSessionId is required");
   }
 };
 var sanitizeToken = (token) => {
@@ -177,7 +177,7 @@ var FlintNPayment = class {
       },
       this.origin
     );
-    this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
+    this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
   }
   log(...args) {
     if (this.options.debug) {

package/dist/index.mjs

@@ -35,8 +35,8 @@ var createIframeElement = (src) => {
   return iframe;
 };
 var validateConfig = (config) => {
-  if (!config.clientToken) {
-    throw new Error("[FlintN SDK] clientToken is required");
+  if (!config.clientSessionId) {
+    throw new Error("[FlintN SDK] clientSessionId is required");
   }
 };
 var sanitizeToken = (token) => {
@@ -145,7 +145,7 @@ var FlintNPayment = class {
       },
       this.origin
     );
-    this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
+    this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
   }
   log(...args) {
     if (this.options.debug) {

package/dist/react.d.mts

@@ -10,7 +10,7 @@ declare const EventType: {
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
 interface FlintNConfig {
-    clientToken: string;
+    clientSessionId: string;
     maxWidth?: string;
     isCardHolderRequired?: boolean;
     successRedirectUrl?: string;

package/dist/react.d.ts

@@ -10,7 +10,7 @@ declare const EventType: {
 };
 type TEventType = (typeof EventType)[keyof typeof EventType];
 interface FlintNConfig {
-    clientToken: string;
+    clientSessionId: string;
     maxWidth?: string;
     isCardHolderRequired?: boolean;
     successRedirectUrl?: string;

package/dist/react.js

@@ -65,8 +65,8 @@ var createIframeElement = (src) => {
   return iframe;
 };
 var validateConfig = (config) => {
-  if (!config.clientToken) {
-    throw new Error("[FlintN SDK] clientToken is required");
+  if (!config.clientSessionId) {
+    throw new Error("[FlintN SDK] clientSessionId is required");
   }
 };
 var sanitizeToken = (token) => {
@@ -175,7 +175,7 @@ var FlintNPayment = class {
       },
       this.origin
     );
-    this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
+    this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
   }
   log(...args) {
     if (this.options.debug) {
@@ -232,8 +232,7 @@ function useFlintNPayment(options) {
   }, [
     options.origin,
     options.debug,
-    options.config.clientToken,
-    options.config.maxWidth,
+    options.config.clientSessionId,
     options.config.isCardHolderRequired,
     options.config.successRedirectUrl
   ]);

package/dist/react.mjs

@@ -38,8 +38,8 @@ var createIframeElement = (src) => {
   return iframe;
 };
 var validateConfig = (config) => {
-  if (!config.clientToken) {
-    throw new Error("[FlintN SDK] clientToken is required");
+  if (!config.clientSessionId) {
+    throw new Error("[FlintN SDK] clientSessionId is required");
   }
 };
 var sanitizeToken = (token) => {
@@ -148,7 +148,7 @@ var FlintNPayment = class {
       },
       this.origin
     );
-    this.log("Sent config:", sanitizeToken(this.options.config.clientToken));
+    this.log("Sent config:", sanitizeToken(this.options.config.clientSessionId));
   }
   log(...args) {
     if (this.options.debug) {
@@ -205,8 +205,7 @@ function useFlintNPayment(options) {
   }, [
     options.origin,
     options.debug,
-    options.config.clientToken,
-    options.config.maxWidth,
+    options.config.clientSessionId,
     options.config.isCardHolderRequired,
     options.config.successRedirectUrl
   ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flintn-checkout",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "FlintN Payment SDK — drop-in iframe checkout for card payments and wallets with localization and theming.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",