@tap-payments/connect-v2 0.0.27-test β†’ 0.0.28-test

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.
Files changed (3) hide show
  1. package/README.md +147 -40
  2. package/build/index.d.ts +12 -10
  3. package/package.json +2 -2
package/README.md CHANGED
@@ -1,50 +1,157 @@
1
- # React + TypeScript + Vite
1
+ # Connect SDK V2
2
2
 
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
3
+ A React SDK that allows merchants to easily integrate with Tap Connect in their applications, handling identification and authentication seamlessly.
4
4
 
5
- Currently, two official plugins are available:
5
+ This package provides:
6
6
 
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
7
+ - **_ConnectElement_**: a React component that can be embedded directly in your app to enable secure, localized, and customizable connections.
9
8
 
10
- ## Expanding the ESLint configuration
9
+ - **_renderTapConnect_**: a UMD helper function (available on the global TapConnectSDK object) that lets you render the widget in plain JavaScript environments without a React build setup.
11
10
 
12
- If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
11
+ ---
13
12
 
14
- - Configure the top-level `parserOptions` property like this:
13
+ ## πŸ“¦ Installation
15
14
 
16
- ```js
17
- export default tseslint.config({
18
- languageOptions: {
19
- // other options...
20
- parserOptions: {
21
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
22
- tsconfigRootDir: import.meta.dirname,
23
- },
24
- },
25
- });
15
+ - Using `npm`:
16
+ ```bash
17
+ npm install @tap-payments/connect-v2
18
+ ```
19
+ - Using `yarn`:
20
+ ```bash
21
+ yarn add @tap-payments/connect-v2
22
+ ```
23
+
24
+ ---
25
+
26
+ ## ⚑ Quick Start
27
+
28
+ ```tsx
29
+ import React, { useState } from 'react';
30
+ import { ConnectElement, ConnectScope, ConnectTheme, ConnectMode } from '@tap-payments/connect-v2';
31
+
32
+ const App = () => {
33
+ const [open, setOpen] = useState(false);
34
+
35
+ return (
36
+ <div>
37
+ <button onClick={() => setOpen(true)}>Open Connect Element</button>
38
+
39
+ <ConnectElement
40
+ open={open}
41
+ publicKey="pk_test_XXXXXXXXXXXXXXXXXXXXXXX"
42
+ merchantDomain="https://example.com"
43
+ theme={ConnectTheme.DARK}
44
+ scope={ConnectScope.MERCHANT}
45
+ appInfo={{
46
+ name: 'My App',
47
+ version: '1.0.0',
48
+ }}
49
+ onClose={() => setOpen(false)}
50
+ features={{ poweredBy: true, closeButton: true }}
51
+ mode={ConnectMode.POPUP}
52
+ />
53
+ </div>
54
+ );
55
+ };
56
+
57
+ export default App;
26
58
  ```
27
59
 
28
- - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29
- - Optionally add `...tseslint.configs.stylisticTypeChecked`
30
- - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31
-
32
- ```js
33
- // eslint.config.js
34
- import react from 'eslint-plugin-react';
35
-
36
- export default tseslint.config({
37
- // Set the react version
38
- settings: { react: { version: '18.3' } },
39
- plugins: {
40
- // Add the react plugin
41
- react,
42
- },
43
- rules: {
44
- // other rules...
45
- // Enable its recommended rules
46
- ...react.configs.recommended.rules,
47
- ...react.configs['jsx-runtime'].rules,
48
- },
49
- });
60
+ ## 🌐 Vanilla JS Demo
61
+
62
+ You can also use the SDK without a React build setup by including the UMD bundle directly in your HTML file. The global TapConnectSDK object provides a helper method to render the widget into any container element.
63
+
64
+ ```html
65
+ <!doctype html>
66
+ <html>
67
+ <head>
68
+ <title>Tap Connect SDK Demo</title>
69
+ </head>
70
+ <body>
71
+ <div id="connect-container"></div>
72
+
73
+ <button onclick="openConnect()">Open Connect</button>
74
+
75
+ <!-- React and ReactDOM (required for the widget to work) -->
76
+ <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
77
+ <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
78
+
79
+ <!-- Tap Connect SDK UMD bundle -->
80
+ <script src="https://cdn.tap.company/tap-sdks/connect-v2/build-0.0.28-test/index.js"></script>
81
+
82
+ <script>
83
+ function openConnect() {
84
+ TapConnectSDK.renderConnectElement('connect-container', {
85
+ open: true,
86
+ publicKey: 'pk_test_lat64TEDSvHrUOYAxVRe28PQ',
87
+ merchantDomain: 'https://connect.dev.tap.company',
88
+ language: TapConnectSDK.ConnectLanguage.EN,
89
+ appInfo: {
90
+ name: 'My App',
91
+ },
92
+ theme: TapConnectSDK.ConnectTheme.DARK,
93
+ scope: TapConnectSDK.ConnectScope.MERCHANT,
94
+ data: ['brand', 'entity'],
95
+ showBoard: true,
96
+ mode: TapConnectSDK.ConnectMode.PAGE,
97
+ });
98
+ }
99
+ </script>
100
+ </body>
101
+ </html>
50
102
  ```
103
+
104
+ ---
105
+
106
+ ## 🧠 Props
107
+
108
+ | Prop | Type | Required | Description |
109
+ | ----------------------- | ------------------------------------------------------ | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
110
+ | **open** | `boolean` | βœ… | Controls whether Connect element is open or closed. |
111
+ | **publicKey** | `string` | βœ… | Your public API key provided by Tap Payments. |
112
+ | **merchantDomain** | `string` | βœ… | Merchant's domain (e.g. `https://expamle.com`). |
113
+ | **scope** | `ConnectScope` | βœ… | Defines the integration scope [**auth**, **merchant**]. |
114
+ | **appInfo** | `ConnectAppInfo` | βœ… | Information about the merchant’s host application. |
115
+ | β€” name | `string` | βœ… | The display name of your application. |
116
+ | β€” identifier | `string` | ❌ | A unique identifier for your application (e.g., bundle ID or package name). |
117
+ | β€” version | `string` | ❌ | The current version of your application (e.g., `1.0.0`). |
118
+ | **onReady** | `() => void` | ❌ | Called when the app configurations are loaded successfully initializing. |
119
+ | **onClose** | `() => void` | ❌ | Triggered when the Connect element is closed by the user. |
120
+ | **onError** | `(eror: CustomError) => void` | ❌ | Triggered on any error. |
121
+ | **onSuccess** | `(response: Record<string, string \| number>) => void` | ❌ | Callback triggered when the flow completes successfully. |
122
+ | **theme** | `ConnectTheme` | ❌ | Customize the app theme [**light**, **dark**]. |
123
+ | **language** | `ConnectLanguage` | ❌ | Language code for localization [**en**, **ar**]. |
124
+ | **businessCountryCode** | `string` | ❌ | Country ISO2 code of the merchant country. |
125
+ | **showBoard** | `boolean` | ❌ | Show the merchant board UI. |
126
+ | **leadId** | `string` | ❌ | Optional lead ID for loading lead data. |
127
+ | **platforms** | `string` | ❌ | - |
128
+ | **paymentProvider** | `ConnectPaymentProvider` | ❌ | Information about the payment provider configuration. |
129
+ | β€” technologyId | `string` | βœ… | - |
130
+ | β€” settlementBy | `string` | βœ… | - |
131
+ | **features** | `ConnectAppFeatures` | ❌ | Additional configuration options for appearance and UI. |
132
+ | β€” poweredBy | `boolean` | ❌ | Show or hide the β€œPowered by Tap” logo. |
133
+ | β€” merchantLogo | `boolean` | ❌ | Show or hide the merchant’s logo in the widget. |
134
+ | β€” closeButton | `boolean` | ❌ | Display a close button on the widget. |
135
+ | β€” dialogStartTransition | `ConnectDialogTransition` | ❌ | Transition animation when the dialog opens [**left**,**right**,**up**,**down**]. |
136
+ | β€” dialogEndTransition | `ConnectDialogTransition` | ❌ | Transition animation when the dialog closes [**left**,**right**,**up**,**down**]. |
137
+ | β€” dialogEdgeFormat | `ConnectDialogEdgeFormat` | ❌ | Controls the shape/format of the dialog edges [**curved**, **straight**]. |
138
+ | **postUrl** | `string` | ❌ | Endpoint to post our data to merchant's server. |
139
+ | **redirectUrl** | `string` | ❌ | Redirect URL after success. |
140
+ | **data** | `string[]` | ❌ | Merchant data array (e.g. **operator**, **brand**, **entity**, etc.). |
141
+ | **mode** | `ConnectMode` | ❌ | Controls the display behavior of the Connect Element, using the ConnectMode enum to specify whether it appears as a full page, popup, or display content only. |
142
+ | **notification** | `ConnectNotification` | ❌ | Notification configuration to notify the user after account creation. |
143
+ | β€” email | `boolean` | βœ… | Enable or disable email notifications. |
144
+ | β€” mobile | `boolean` | ❌ | Enable or disable mobile (SMS) notifications. |
145
+ | **boardEditable** | `boolean` | ❌ | Allow merchant board to be editable. |
146
+ | **boardId** | `string` | ❌ | Specify existing board ID. |
147
+ | **boardInfoId** | `string` | ❌ | Specify board info ID for password kit. |
148
+ | **userId** | `string` | ❌ | User ID for password kit. |
149
+ | **userType** | `string` | ❌ | Type of the user for password kit. |
150
+ | **operationType** | `ConnectPasswordOperationType` | ❌ | Operation type for password kit. |
151
+ | **loginMode** | `boolean` | ❌ | Opens Connect in login/auth mode. |
152
+ | **region** | `string` | ❌ | Region code that changes the target middlware (e.g., **sa** for Saudi). |
153
+
154
+ ---
155
+
156
+ Developed by **Tap Payments**
157
+ 🌐 [Website](https://www.tap.company) Β· πŸ’¬ [Support](https://www.tap.company/support) Β· πŸ’Ό [LinkedIn](https://www.linkedin.com/company/tappayments)
package/build/index.d.ts CHANGED
@@ -1,6 +1,15 @@
1
1
  import { JSX as JSX_2 } from 'react/jsx-runtime';
2
2
  import * as React_2 from 'react';
3
3
 
4
+ declare type ConnectAppFeatures = {
5
+ poweredBy?: boolean;
6
+ merchantLogo?: boolean;
7
+ closeButton?: boolean;
8
+ dialogStartTransition?: ConnectDialogTransition;
9
+ dialogEndTransition?: ConnectDialogTransition;
10
+ dialogEdgeFormat?: ConnectDialogEdgeFormat;
11
+ };
12
+
4
13
  export declare type ConnectAppInfo = {
5
14
  name: string;
6
15
  identifier?: string;
@@ -43,8 +52,8 @@ export declare enum ConnectPasswordOperationType {
43
52
  }
44
53
 
45
54
  export declare type ConnectPaymentProvider = {
46
- technology_id: string;
47
- settlement_by: string;
55
+ technologyId: string;
56
+ settlementBy: string;
48
57
  };
49
58
 
50
59
  export declare type ConnectProps = {
@@ -64,14 +73,7 @@ export declare type ConnectProps = {
64
73
  leadId?: string;
65
74
  platforms?: Array<string>;
66
75
  paymentProvider?: ConnectPaymentProvider;
67
- features?: {
68
- poweredBy?: boolean;
69
- merchantLogo?: boolean;
70
- closeButton?: boolean;
71
- dialogStartTransition?: ConnectDialogTransition;
72
- dialogEndTransition?: ConnectDialogTransition;
73
- dialogEdgeFormat?: ConnectDialogEdgeFormat;
74
- };
76
+ features?: ConnectAppFeatures;
75
77
  postUrl?: string;
76
78
  redirectUrl?: string;
77
79
  data?: Array<string>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/connect-v2",
3
3
  "private": false,
4
- "version": "0.0.27-test",
4
+ "version": "0.0.28-test",
5
5
  "type": "module",
6
6
  "main": "build/index.cjs.js",
7
7
  "module": "build/index.esm.js",
@@ -67,7 +67,7 @@
67
67
  "vite-tsconfig-paths": "^5.1.4"
68
68
  },
69
69
  "lint-staged": {
70
- "*.{js,ts,tsx,json,css,yml}": [
70
+ "*.{js,ts,tsx,json,css,yml,md,html}": [
71
71
  "prettier --write",
72
72
  "eslint"
73
73
  ]