@tap-payments/connect 0.0.13-test → 0.0.14-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.
- package/README.md +181 -178
- package/package.json +1 -1
- package/build/@types/index.d.ts +0 -42
- package/build/@types/index.js +0 -1
- package/build/constants/index.d.ts +0 -9
- package/build/constants/index.js +0 -9
- package/build/features/Connect/Connect.d.ts +0 -5
- package/build/features/Connect/Connect.js +0 -65
- package/build/features/Connect/ConnectExpress.d.ts +0 -4
- package/build/features/Connect/ConnectExpress.js +0 -90
- package/build/features/Connect/ConnectFull.d.ts +0 -4
- package/build/features/Connect/ConnectFull.js +0 -13
- package/build/features/Connect/index.d.ts +0 -3
- package/build/features/Connect/index.js +0 -2
- package/build/hooks/index.d.ts +0 -2
- package/build/hooks/index.js +0 -2
- package/build/hooks/useScript.d.ts +0 -1
- package/build/hooks/useScript.js +0 -39
- package/build/hooks/useStyle.d.ts +0 -1
- package/build/hooks/useStyle.js +0 -13
- package/build/index.d.ts +0 -4
- package/build/index.js +0 -7
- package/build/utils/config.d.ts +0 -7
- package/build/utils/config.js +0 -41
- package/build/utils/html.d.ts +0 -1
- package/build/utils/html.js +0 -9
- package/build/utils/index.d.ts +0 -3
- package/build/utils/index.js +0 -3
- package/build/utils/validation.d.ts +0 -2
- package/build/utils/validation.js +0 -52
package/README.md
CHANGED
|
@@ -1,178 +1,181 @@
|
|
|
1
|
-
# Connect Package
|
|
2
|
-
|
|
3
|
-
Handling user onboarding and authentication for Tap Payments.
|
|
4
|
-
|
|
5
|
-
## Installs
|
|
6
|
-
|
|
7
|
-
This is a [React](https://reactjs.org/) module available through the
|
|
8
|
-
[npm registry](https://www.npmjs.com/). Installation is done using the
|
|
9
|
-
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):
|
|
10
|
-
|
|
11
|
-
```console
|
|
12
|
-
npm install @tap-payments/connect
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
---------------------------- OR -------------------------
|
|
16
|
-
|
|
17
|
-
```console
|
|
18
|
-
yarn add @tap-payments/connect
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
## Examples
|
|
22
|
-
|
|
23
|
-
### Connect Library
|
|
24
|
-
|
|
25
|
-
### ES6
|
|
26
|
-
|
|
27
|
-
```js
|
|
28
|
-
import { TapConnect, Language } from '@tap-payments/connect'
|
|
29
|
-
|
|
30
|
-
// we have two ways to use the connect element
|
|
31
|
-
// 1- express flow
|
|
32
|
-
const ConnectExpressComponent = () => {
|
|
33
|
-
return (
|
|
34
|
-
<TapConnect
|
|
35
|
-
// required (the public key of the merchant account provided by Tap Payments)
|
|
36
|
-
publicKey={'pk_test_XXXXXXXXXXXXXXXXXXXXXXX'}
|
|
37
|
-
// required (the domain of the merchant)
|
|
38
|
-
domain={'https://example.com'}
|
|
39
|
-
// required (Language flag to control the language of the connect element and only we support [en,ar])
|
|
40
|
-
language={Language.EN}
|
|
41
|
-
// required (the country ISO2 of the merchant)
|
|
42
|
-
country={'SA'}
|
|
43
|
-
// required (the scope of the merchant)
|
|
44
|
-
scope={'merchant'}
|
|
45
|
-
// optional (Lead Id can be passed in case of you already created a lead using our API )
|
|
46
|
-
lead={'led_xxxxxxxxxxxxxxxxxxxxxx'}
|
|
47
|
-
// required (Decide the maturity of the TapConnect library)
|
|
48
|
-
mature={false}
|
|
49
|
-
// optional (show/hide board screen after creating an account)
|
|
50
|
-
board={true}
|
|
51
|
-
|
|
52
|
-
open
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
domain
|
|
76
|
-
|
|
77
|
-
language
|
|
78
|
-
|
|
79
|
-
country
|
|
80
|
-
|
|
81
|
-
scope
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
open
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
<meta
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
<
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
<
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
</
|
|
152
|
-
</
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
|
162
|
-
|
|
|
163
|
-
|
|
|
164
|
-
|
|
|
165
|
-
|
|
|
166
|
-
|
|
|
167
|
-
|
|
|
168
|
-
|
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
|
|
|
174
|
-
| | | it
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
1
|
+
# Connect Package
|
|
2
|
+
|
|
3
|
+
Handling user onboarding and authentication for Tap Payments.
|
|
4
|
+
|
|
5
|
+
## Installs
|
|
6
|
+
|
|
7
|
+
This is a [React](https://reactjs.org/) module available through the
|
|
8
|
+
[npm registry](https://www.npmjs.com/). Installation is done using the
|
|
9
|
+
[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):
|
|
10
|
+
|
|
11
|
+
```console
|
|
12
|
+
npm install @tap-payments/connect
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
---------------------------- OR -------------------------
|
|
16
|
+
|
|
17
|
+
```console
|
|
18
|
+
yarn add @tap-payments/connect
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## Examples
|
|
22
|
+
|
|
23
|
+
### Connect Library
|
|
24
|
+
|
|
25
|
+
### ES6
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import { TapConnect, Language } from '@tap-payments/connect'
|
|
29
|
+
|
|
30
|
+
// we have two ways to use the connect element
|
|
31
|
+
// 1- express flow
|
|
32
|
+
const ConnectExpressComponent = () => {
|
|
33
|
+
return (
|
|
34
|
+
<TapConnect
|
|
35
|
+
// required (the public key of the merchant account provided by Tap Payments)
|
|
36
|
+
publicKey={'pk_test_XXXXXXXXXXXXXXXXXXXXXXX'}
|
|
37
|
+
// required (the domain of the merchant)
|
|
38
|
+
domain={'https://example.com'}
|
|
39
|
+
// required (Language flag to control the language of the connect element and only we support [en,ar])
|
|
40
|
+
language={Language.EN}
|
|
41
|
+
// required (the country ISO2 of the merchant)
|
|
42
|
+
country={'SA'}
|
|
43
|
+
// required (the scope of the merchant)
|
|
44
|
+
scope={'merchant'}
|
|
45
|
+
// optional (Lead Id can be passed in case of you already created a lead using our API )
|
|
46
|
+
lead={'led_xxxxxxxxxxxxxxxxxxxxxx'}
|
|
47
|
+
// required (Decide the maturity of the TapConnect library)
|
|
48
|
+
mature={false}
|
|
49
|
+
// optional (show/hide board screen after creating an account)
|
|
50
|
+
board={true}
|
|
51
|
+
boardMaturity={false}
|
|
52
|
+
// required (boolean to open/close the connect element)
|
|
53
|
+
open={true}
|
|
54
|
+
// optional (The POST Method URL used to push te data from our server to the merchant server)
|
|
55
|
+
postURL={'https://api.example.com/post'}
|
|
56
|
+
//optional (Callback function to handle the ready state of the TapConnect )
|
|
57
|
+
onReady={() => console.log('onReady')}
|
|
58
|
+
// optional (Callback function runs after creating an account)
|
|
59
|
+
onCreated={(data) => console.log('onCreated', data)}
|
|
60
|
+
// optional (Callback function runs when the user close TaConnect)
|
|
61
|
+
onClose={() => console.log('onClose')}
|
|
62
|
+
// optional (Callback function to handle the error)
|
|
63
|
+
onError={(err) => console.log('onError', err)}
|
|
64
|
+
// optional (Callback function runs after finishing all the flows)
|
|
65
|
+
onBoardCompleted={() => console.log('onBoardCompleted')}
|
|
66
|
+
/>
|
|
67
|
+
)
|
|
68
|
+
}
|
|
69
|
+
// 2- full flow
|
|
70
|
+
const ConnectFullComponent = () => {
|
|
71
|
+
return (
|
|
72
|
+
<TapConnect
|
|
73
|
+
// required (the public key of the merchant account provided by Tap Payments)
|
|
74
|
+
publicKey={'pk_test_XXXXXXXXXXXXXXXXXXXXXXX'}
|
|
75
|
+
// required (the domain of the merchant)
|
|
76
|
+
domain={'https://example.com'}
|
|
77
|
+
// required (Language flag to control the language of the connect element and only we support [en,ar])
|
|
78
|
+
language={Language.EN}
|
|
79
|
+
// required (the country ISO2 of the merchant)
|
|
80
|
+
country={'SA'}
|
|
81
|
+
// required (the scope of the merchant)
|
|
82
|
+
scope={'merchant'}
|
|
83
|
+
// required (Decide the maturity of the TapConnect library)
|
|
84
|
+
mature={true}
|
|
85
|
+
// required (boolean to open/close the connect element)
|
|
86
|
+
open={true}
|
|
87
|
+
//optional (Callback function to handle the ready state of the TapConnect )
|
|
88
|
+
onReady={() => console.log('onReady')}
|
|
89
|
+
// optional (Callback function runs after finishing the flow)
|
|
90
|
+
onSuccess={(data) => console.log('onSuccess', data)}
|
|
91
|
+
// optional (Callback function runs when the user close TaConnect)
|
|
92
|
+
onClose={() => console.log('onClose')}
|
|
93
|
+
// optional (Callback function to handle the error)
|
|
94
|
+
onError={(err) => console.log('onError', err)}
|
|
95
|
+
/>
|
|
96
|
+
)
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
### Vanilla JS
|
|
101
|
+
|
|
102
|
+
```js
|
|
103
|
+
<!DOCTYPE html>
|
|
104
|
+
<html lang="en">
|
|
105
|
+
<head>
|
|
106
|
+
<meta charset="utf-8" />
|
|
107
|
+
<meta
|
|
108
|
+
name="viewport"
|
|
109
|
+
content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,shrink-to-fit=no"
|
|
110
|
+
/>
|
|
111
|
+
<title>Auth-JsConnect</title>
|
|
112
|
+
<script src="https://connect-auth.b-cdn.net/build-0.0.14-test/main.js"></script>
|
|
113
|
+
</head>
|
|
114
|
+
<body>
|
|
115
|
+
<div id="root"></div>
|
|
116
|
+
<script>
|
|
117
|
+
// once our cdn script is loaded we can use the window.TapPayments object
|
|
118
|
+
const { renderTapConnect, Language } = window.TapPayments
|
|
119
|
+
let unmountConnect = null
|
|
120
|
+
const startConnectAuth = () => {
|
|
121
|
+
const { unmount } = renderTapConnect(
|
|
122
|
+
{
|
|
123
|
+
publicKey: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxx',
|
|
124
|
+
language: Language.EN,
|
|
125
|
+
domain: 'https://example.com',
|
|
126
|
+
country: 'SA',
|
|
127
|
+
scope: 'merchant',
|
|
128
|
+
lead: 'led_xxxxxxxxxxxxxxxxxxxxxx',
|
|
129
|
+
mature: false,
|
|
130
|
+
board: true,
|
|
131
|
+
boardMaturity: false,
|
|
132
|
+
open: true,
|
|
133
|
+
postURL: 'https://api.example.com/post',
|
|
134
|
+
onReady: () => console.log('onReady'),
|
|
135
|
+
onCreated: (data) => console.log('onCreated', data),
|
|
136
|
+
onError: (err) => console.log('onError', err),
|
|
137
|
+
onClose: () => console.log('onClose'),
|
|
138
|
+
onBoardCompleted: () => console.log('onBoardCompleted'),
|
|
139
|
+
|
|
140
|
+
},
|
|
141
|
+
'root'
|
|
142
|
+
)
|
|
143
|
+
// save the unmount function to be able to unmount the component
|
|
144
|
+
unmountConnect = unmount
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
const stopConnectAuth = () => {
|
|
148
|
+
unmountConnect && unmountConnect()
|
|
149
|
+
}
|
|
150
|
+
</script>
|
|
151
|
+
<button onclick="startConnectAuth()">Start</button>
|
|
152
|
+
<button onclick="stopConnectAuth()">Stop</button>
|
|
153
|
+
</body>
|
|
154
|
+
</html>
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
## Properties
|
|
160
|
+
|
|
161
|
+
| name | type | description |
|
|
162
|
+
| --------------------------- | ----------- | -------------------------------------------------------------------------------------------- |
|
|
163
|
+
| publicKey `required` | `string` | Public key of the merchant account provided by Tap Payments |
|
|
164
|
+
| domain `required` | `string` | Domain of the merchant |
|
|
165
|
+
| language `required` | `Languages` | language flag to control the language of the connect element and only accept [ar,en] |
|
|
166
|
+
| country `required` | `string` | Country ISO2 of the merchant |
|
|
167
|
+
| scope `required` | `string` | the scope of the merchant |
|
|
168
|
+
| lead `optional` | `string` | Lead Id can be passed in case of you already created a lead using our API |
|
|
169
|
+
| mature `required` | `boolean` | Decide the mode of connect |
|
|
170
|
+
| board `optional` | `string` | Show/Hide board screens |
|
|
171
|
+
| open `required` | `boolean` | Open/Close the connect library |
|
|
172
|
+
| boardMaturity `optional` | `boolean` | Decide the board maturity |
|
|
173
|
+
| postURL `optional` | `string` | The POST Method URL used to push te data from our server to the merchant server and |
|
|
174
|
+
| | | it's required only if `mature` is `false` |
|
|
175
|
+
| onReady `optional` | `function` | Callback function to handle the ready state of the `TapConnect` |
|
|
176
|
+
| onCreated `optional` | `function` | Callback function to called the the account created successfully |
|
|
177
|
+
| | | it calls only if `mature` is `false` |
|
|
178
|
+
| onSuccess `optional` | `function` | Callback function to handle the success response, it will run after the user finish the flow |
|
|
179
|
+
| onError `optional` | `function` | Callback function to handle the error response, it will run if the user face any error |
|
|
180
|
+
| onClose `optional` | `function` | Callback function to called when `TapConnect` get close |
|
|
181
|
+
| onBoardCompleted `optional` | `function` | Callback function to called when you complete all flows |
|
package/package.json
CHANGED
package/build/@types/index.d.ts
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { Language } from '../constants';
|
|
2
|
-
export interface ConnectProps {
|
|
3
|
-
elementId: string;
|
|
4
|
-
publicKey: string;
|
|
5
|
-
domain: string;
|
|
6
|
-
language: (typeof Language)[keyof typeof Language];
|
|
7
|
-
country: string;
|
|
8
|
-
scope: string;
|
|
9
|
-
lead?: string;
|
|
10
|
-
mature: boolean;
|
|
11
|
-
board?: boolean;
|
|
12
|
-
open: boolean;
|
|
13
|
-
postURL?: string;
|
|
14
|
-
onError?: (err: Error) => void;
|
|
15
|
-
onReady?: () => void;
|
|
16
|
-
onClose?: () => void;
|
|
17
|
-
onCreated?: (res: object) => void;
|
|
18
|
-
onSuccess?: (res: object) => void;
|
|
19
|
-
onBoardCompleted?: () => void;
|
|
20
|
-
}
|
|
21
|
-
export interface OriginalConnectProps {
|
|
22
|
-
publicKey: string;
|
|
23
|
-
open: boolean;
|
|
24
|
-
merchantDomain: string;
|
|
25
|
-
language: string;
|
|
26
|
-
appInfo: Record<string, string>;
|
|
27
|
-
businessCountryCode: string;
|
|
28
|
-
scope: string;
|
|
29
|
-
leadId?: string;
|
|
30
|
-
postURL?: string;
|
|
31
|
-
showBoard?: boolean;
|
|
32
|
-
verifyToken?: string;
|
|
33
|
-
onFlowCompleted: (res: object, headers?: Record<string, string>) => void;
|
|
34
|
-
onError: (err: any) => void;
|
|
35
|
-
onStepCompleted?: (name: string, info: any) => void;
|
|
36
|
-
onReady?: () => void;
|
|
37
|
-
onStepStarted?: (name: string) => void;
|
|
38
|
-
onBoardButtonClick?: (data: Record<string, any>) => void;
|
|
39
|
-
onCreated?: (res: Record<string, any>) => void;
|
|
40
|
-
onClose?: () => void;
|
|
41
|
-
onBoardCompleted?: () => void;
|
|
42
|
-
}
|
package/build/@types/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export declare const CDN_LIBRARY_BASE_URL = "https://auth-jsconnect.b-cdn.net/build-2.1.97-test";
|
|
2
|
-
export declare const Maturity: {
|
|
3
|
-
readonly FULL: "full";
|
|
4
|
-
readonly EXPRESS: "express";
|
|
5
|
-
};
|
|
6
|
-
export declare const Language: {
|
|
7
|
-
readonly EN: "en";
|
|
8
|
-
readonly AR: "ar";
|
|
9
|
-
};
|
package/build/constants/index.js
DELETED
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ConnectProps as ConnectAttrs } from '../../@types';
|
|
3
|
-
export type ConnectProps = Omit<ConnectAttrs, 'elementId'>;
|
|
4
|
-
export declare const TapConnect: React.MemoExoticComponent<(props: ConnectAttrs) => JSX.Element>;
|
|
5
|
-
export declare const renderTapConnect: (props: ConnectProps, elementId: string) => any;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
-
import * as React from 'react';
|
|
25
|
-
import { createRoot } from 'react-dom/client';
|
|
26
|
-
import { findOrCreateElementAndInject, validateConnectProps } from '../../utils';
|
|
27
|
-
import { useScript, useStyle } from '../../hooks';
|
|
28
|
-
import { CDN_LIBRARY_BASE_URL } from '../../constants';
|
|
29
|
-
import ConnectFull from './ConnectFull';
|
|
30
|
-
import ConnectExpress from './ConnectExpress';
|
|
31
|
-
var Connect = function (_a) {
|
|
32
|
-
var elementId = _a.elementId, props = __rest(_a, ["elementId"]);
|
|
33
|
-
useStyle("".concat(CDN_LIBRARY_BASE_URL, "/main.css"));
|
|
34
|
-
var status = useScript("".concat(CDN_LIBRARY_BASE_URL, "/main.js"));
|
|
35
|
-
React.useEffect(function () {
|
|
36
|
-
if (status === 'ready')
|
|
37
|
-
console.info('connect-auth-js is ready!');
|
|
38
|
-
if (status === 'error')
|
|
39
|
-
console.error('connect-auth-js failed to load!');
|
|
40
|
-
}, [status]);
|
|
41
|
-
if (status !== 'ready')
|
|
42
|
-
return null;
|
|
43
|
-
if (!props.mature)
|
|
44
|
-
return _jsx(ConnectExpress, __assign({}, props, { elementId: elementId }));
|
|
45
|
-
return _jsx(ConnectFull, __assign({}, props, { elementId: elementId }));
|
|
46
|
-
};
|
|
47
|
-
export var TapConnect = React.memo(function (props) {
|
|
48
|
-
validateConnectProps(props);
|
|
49
|
-
return _jsx(Connect, __assign({}, props));
|
|
50
|
-
});
|
|
51
|
-
var tapConnectInstance = null;
|
|
52
|
-
export var renderTapConnect = function (props, elementId) {
|
|
53
|
-
if (tapConnectInstance) {
|
|
54
|
-
return tapConnectInstance;
|
|
55
|
-
}
|
|
56
|
-
var el = findOrCreateElementAndInject(elementId);
|
|
57
|
-
var root = createRoot(el);
|
|
58
|
-
root.render(_jsx(TapConnect, __assign({}, props, { elementId: elementId })));
|
|
59
|
-
var unmount = function () {
|
|
60
|
-
root.unmount();
|
|
61
|
-
tapConnectInstance = null;
|
|
62
|
-
};
|
|
63
|
-
tapConnectInstance = { unmount: unmount };
|
|
64
|
-
return tapConnectInstance;
|
|
65
|
-
};
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
|
2
|
-
__assign = Object.assign || function(t) {
|
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
-
s = arguments[i];
|
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
-
t[p] = s[p];
|
|
7
|
-
}
|
|
8
|
-
return t;
|
|
9
|
-
};
|
|
10
|
-
return __assign.apply(this, arguments);
|
|
11
|
-
};
|
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
13
|
-
var t = {};
|
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
15
|
-
t[p] = s[p];
|
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
19
|
-
t[p[i]] = s[p[i]];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
};
|
|
23
|
-
import * as React from 'react';
|
|
24
|
-
import { wrapLibConfig } from '../../utils';
|
|
25
|
-
var ConnectExpress = function (props) {
|
|
26
|
-
var _a = React.useState(''), token = _a[0], setToken = _a[1];
|
|
27
|
-
var _b = React.useState('express'), name = _b[0], setName = _b[1];
|
|
28
|
-
var onButtonClick = function (_a) {
|
|
29
|
-
var name = _a.name, token = _a.token;
|
|
30
|
-
setToken(token);
|
|
31
|
-
setName(name);
|
|
32
|
-
};
|
|
33
|
-
var _c = window['TapAuth'], renderConnectExpressLib = _c.renderConnectExpressLib, renderIndividualLib = _c.renderIndividualLib, renderBankLib = _c.renderBankLib, renderTaxLib = _c.renderTaxLib, renderEntityLib = _c.renderEntityLib, renderBrandLib = _c.renderBrandLib;
|
|
34
|
-
var elementId = props.elementId;
|
|
35
|
-
var unmountComponent = function () { };
|
|
36
|
-
React.useEffect(function () {
|
|
37
|
-
console.log('rendering: ', name);
|
|
38
|
-
var config = wrapLibConfig(__assign(__assign({}, props), { verifyToken: token, onBoardButtonClick: onButtonClick }));
|
|
39
|
-
switch (name) {
|
|
40
|
-
case 'brand':
|
|
41
|
-
unmountComponent();
|
|
42
|
-
var unmountBrand = renderBrandLib(config, elementId).unmount;
|
|
43
|
-
unmountComponent = unmountBrand;
|
|
44
|
-
break;
|
|
45
|
-
case 'tax':
|
|
46
|
-
unmountComponent();
|
|
47
|
-
var unmountTax = renderTaxLib(config, elementId).unmount;
|
|
48
|
-
unmountComponent = unmountTax;
|
|
49
|
-
break;
|
|
50
|
-
case 'bank':
|
|
51
|
-
unmountComponent();
|
|
52
|
-
var unmountBank = renderBankLib(config, elementId).unmount;
|
|
53
|
-
unmountComponent = unmountBank;
|
|
54
|
-
break;
|
|
55
|
-
case 'individual':
|
|
56
|
-
unmountComponent();
|
|
57
|
-
var unmountIndiv = renderIndividualLib(config, elementId).unmount;
|
|
58
|
-
unmountComponent = unmountIndiv;
|
|
59
|
-
break;
|
|
60
|
-
case 'entity':
|
|
61
|
-
unmountComponent();
|
|
62
|
-
var unmountEntity = renderEntityLib(config, elementId).unmount;
|
|
63
|
-
unmountComponent = unmountEntity;
|
|
64
|
-
break;
|
|
65
|
-
default:
|
|
66
|
-
unmountComponent();
|
|
67
|
-
var onSuccess = props.onSuccess, rest = __rest(props, ["onSuccess"]);
|
|
68
|
-
var configAttrs = wrapLibConfig(__assign(__assign({}, rest), { verifyToken: token, onBoardButtonClick: onButtonClick }));
|
|
69
|
-
var unmountExpress = renderConnectExpressLib(configAttrs, elementId).unmount;
|
|
70
|
-
unmountComponent = unmountExpress;
|
|
71
|
-
break;
|
|
72
|
-
}
|
|
73
|
-
return function () { return unmountComponent(); };
|
|
74
|
-
}, [
|
|
75
|
-
name,
|
|
76
|
-
token,
|
|
77
|
-
renderConnectExpressLib,
|
|
78
|
-
renderIndividualLib,
|
|
79
|
-
renderBankLib,
|
|
80
|
-
renderTaxLib,
|
|
81
|
-
renderEntityLib,
|
|
82
|
-
renderBrandLib,
|
|
83
|
-
props,
|
|
84
|
-
elementId,
|
|
85
|
-
onButtonClick,
|
|
86
|
-
wrapLibConfig
|
|
87
|
-
]);
|
|
88
|
-
return null;
|
|
89
|
-
};
|
|
90
|
-
export default React.memo(ConnectExpress);
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { wrapLibConfig } from '../../utils';
|
|
3
|
-
var ConnectFull = function (props) {
|
|
4
|
-
var renderConnectLib = window['TapAuth'].renderConnectLib;
|
|
5
|
-
var id = props.elementId;
|
|
6
|
-
React.useEffect(function () {
|
|
7
|
-
var config = wrapLibConfig(props);
|
|
8
|
-
var unmount = renderConnectLib(config, id).unmount;
|
|
9
|
-
return function () { return unmount(); };
|
|
10
|
-
}, [renderConnectLib, props]);
|
|
11
|
-
return null;
|
|
12
|
-
};
|
|
13
|
-
export default React.memo(ConnectFull);
|
package/build/hooks/index.d.ts
DELETED
package/build/hooks/index.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useScript(src: string, async?: boolean): "ready" | "loading" | "idle" | "error";
|
package/build/hooks/useScript.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { useEffect, useState } from 'react';
|
|
2
|
-
export function useScript(src, async) {
|
|
3
|
-
if (async === void 0) { async = true; }
|
|
4
|
-
var _a = useState(src ? 'loading' : 'idle'), status = _a[0], setStatus = _a[1];
|
|
5
|
-
useEffect(function () {
|
|
6
|
-
if (!src) {
|
|
7
|
-
setStatus('idle');
|
|
8
|
-
return;
|
|
9
|
-
}
|
|
10
|
-
var script = document.querySelector("script[src=\"".concat(src, "\"]"));
|
|
11
|
-
if (!script) {
|
|
12
|
-
script = document.createElement('script');
|
|
13
|
-
script.src = src;
|
|
14
|
-
script.async = async;
|
|
15
|
-
script.setAttribute('data-status', 'loading');
|
|
16
|
-
document.body.appendChild(script);
|
|
17
|
-
var setAttributeFromEvent = function (event) {
|
|
18
|
-
script.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
|
|
19
|
-
};
|
|
20
|
-
script.addEventListener('load', setAttributeFromEvent);
|
|
21
|
-
script.addEventListener('error', setAttributeFromEvent);
|
|
22
|
-
}
|
|
23
|
-
else {
|
|
24
|
-
setStatus(script.getAttribute('data-status'));
|
|
25
|
-
}
|
|
26
|
-
var setStateFromEvent = function (event) {
|
|
27
|
-
setStatus(event.type === 'load' ? 'ready' : 'error');
|
|
28
|
-
};
|
|
29
|
-
script.addEventListener('load', setStateFromEvent);
|
|
30
|
-
script.addEventListener('error', setStateFromEvent);
|
|
31
|
-
return function () {
|
|
32
|
-
if (script) {
|
|
33
|
-
script.removeEventListener('load', setStateFromEvent);
|
|
34
|
-
script.removeEventListener('error', setStateFromEvent);
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
}, [src]);
|
|
38
|
-
return status;
|
|
39
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const useStyle: (url: string) => void;
|
package/build/hooks/useStyle.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { useEffect } from 'react';
|
|
2
|
-
export var useStyle = function (url) {
|
|
3
|
-
useEffect(function () {
|
|
4
|
-
var link = document.createElement('link');
|
|
5
|
-
link.href = url;
|
|
6
|
-
link.rel = 'stylesheet';
|
|
7
|
-
link.type = 'text/css';
|
|
8
|
-
document.head.appendChild(link);
|
|
9
|
-
return function () {
|
|
10
|
-
document.head.removeChild(link);
|
|
11
|
-
};
|
|
12
|
-
}, [url]);
|
|
13
|
-
};
|
package/build/index.d.ts
DELETED
package/build/index.js
DELETED
package/build/utils/config.d.ts
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
import { ConnectProps, OriginalConnectProps } from '../@types';
|
|
2
|
-
type ExtraProps = {
|
|
3
|
-
verifyToken?: string;
|
|
4
|
-
onBoardButtonClick?: (data: Record<string, string>) => void;
|
|
5
|
-
};
|
|
6
|
-
export declare const wrapLibConfig: ({ publicKey, open, language, country, scope, lead, postURL, onError, onReady, onSuccess, board, verifyToken, domain, onBoardButtonClick, onClose, onCreated, onBoardCompleted }: ConnectProps & ExtraProps) => OriginalConnectProps;
|
|
7
|
-
export {};
|
package/build/utils/config.js
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
export var wrapLibConfig = function (_a) {
|
|
2
|
-
var publicKey = _a.publicKey, open = _a.open, language = _a.language, country = _a.country, scope = _a.scope, lead = _a.lead, postURL = _a.postURL, onError = _a.onError, onReady = _a.onReady, onSuccess = _a.onSuccess, board = _a.board, verifyToken = _a.verifyToken, domain = _a.domain, onBoardButtonClick = _a.onBoardButtonClick, onClose = _a.onClose, onCreated = _a.onCreated, onBoardCompleted = _a.onBoardCompleted;
|
|
3
|
-
return {
|
|
4
|
-
appInfo: {
|
|
5
|
-
name: window.location.hostname || window.location.origin
|
|
6
|
-
},
|
|
7
|
-
businessCountryCode: country,
|
|
8
|
-
language: language,
|
|
9
|
-
merchantDomain: domain,
|
|
10
|
-
open: open,
|
|
11
|
-
postURL: postURL,
|
|
12
|
-
publicKey: publicKey,
|
|
13
|
-
scope: scope,
|
|
14
|
-
leadId: lead,
|
|
15
|
-
showBoard: board,
|
|
16
|
-
verifyToken: verifyToken,
|
|
17
|
-
onFlowCompleted: function (res) {
|
|
18
|
-
onSuccess && onSuccess(res);
|
|
19
|
-
},
|
|
20
|
-
onError: function (err) {
|
|
21
|
-
onError && onError(err);
|
|
22
|
-
},
|
|
23
|
-
onReady: function () {
|
|
24
|
-
onReady && onReady();
|
|
25
|
-
},
|
|
26
|
-
onBoardButtonClick: function (data) {
|
|
27
|
-
onBoardButtonClick && onBoardButtonClick(data);
|
|
28
|
-
},
|
|
29
|
-
onCreated: function (res) {
|
|
30
|
-
onCreated && onCreated(res);
|
|
31
|
-
},
|
|
32
|
-
onClose: function () {
|
|
33
|
-
onClose && onClose();
|
|
34
|
-
},
|
|
35
|
-
onBoardCompleted: function () {
|
|
36
|
-
onBoardCompleted && onBoardCompleted();
|
|
37
|
-
},
|
|
38
|
-
onStepCompleted: function (name, info) { },
|
|
39
|
-
onStepStarted: function (name) { }
|
|
40
|
-
};
|
|
41
|
-
};
|
package/build/utils/html.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const findOrCreateElementAndInject: (id: string) => HTMLElement;
|
package/build/utils/html.js
DELETED
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
export var findOrCreateElementAndInject = function (id) {
|
|
2
|
-
var elementExist = document.getElementById(id);
|
|
3
|
-
if (elementExist)
|
|
4
|
-
return elementExist;
|
|
5
|
-
var element = document.createElement('div');
|
|
6
|
-
element.setAttribute('id', id || 'tap-connect-sdk-lib');
|
|
7
|
-
document.body.prepend(element);
|
|
8
|
-
return element;
|
|
9
|
-
};
|
package/build/utils/index.d.ts
DELETED
package/build/utils/index.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { Language } from '../constants';
|
|
2
|
-
export var validateConnectProps = function (props) {
|
|
3
|
-
var publicKey = props.publicKey, mature = props.mature, country = props.country, language = props.language, scope = props.scope, open = props.open, domain = props.domain, board = props.board, lead = props.lead, onClose = props.onClose, onCreated = props.onCreated, onError = props.onError, onReady = props.onReady, onSuccess = props.onSuccess, postURL = props.postURL;
|
|
4
|
-
if (!publicKey) {
|
|
5
|
-
throw new Error('publicKey is required');
|
|
6
|
-
}
|
|
7
|
-
if (!country) {
|
|
8
|
-
throw new Error('country is required');
|
|
9
|
-
}
|
|
10
|
-
if (!language) {
|
|
11
|
-
throw new Error('language is required');
|
|
12
|
-
}
|
|
13
|
-
if (![Language.AR, Language.EN].includes(language)) {
|
|
14
|
-
throw new Error('You can only use AR or EN for language');
|
|
15
|
-
}
|
|
16
|
-
if (!scope) {
|
|
17
|
-
throw new Error('scope is required');
|
|
18
|
-
}
|
|
19
|
-
if (!domain) {
|
|
20
|
-
throw new Error('domain is required');
|
|
21
|
-
}
|
|
22
|
-
if (typeof open !== 'boolean') {
|
|
23
|
-
throw new Error('open is required, and must be a boolean');
|
|
24
|
-
}
|
|
25
|
-
if (typeof mature !== 'boolean') {
|
|
26
|
-
throw new Error('mature is required, and must be a boolean');
|
|
27
|
-
}
|
|
28
|
-
if (typeof board !== 'undefined' && typeof board !== 'boolean') {
|
|
29
|
-
throw new Error('board is required, and must be a boolean');
|
|
30
|
-
}
|
|
31
|
-
if (typeof lead !== 'undefined' && typeof lead !== 'string') {
|
|
32
|
-
throw new Error('lead must be a string');
|
|
33
|
-
}
|
|
34
|
-
if (typeof postURL !== 'undefined' && typeof postURL !== 'string') {
|
|
35
|
-
throw new Error('postURL must be a string');
|
|
36
|
-
}
|
|
37
|
-
if (typeof onClose !== 'undefined' && typeof onClose !== 'function') {
|
|
38
|
-
throw new Error('onClose must be a function');
|
|
39
|
-
}
|
|
40
|
-
if (typeof onCreated !== 'undefined' && typeof onCreated !== 'function') {
|
|
41
|
-
throw new Error('onCreated must be a function');
|
|
42
|
-
}
|
|
43
|
-
if (typeof onError !== 'undefined' && typeof onError !== 'function') {
|
|
44
|
-
throw new Error('onError must be a function');
|
|
45
|
-
}
|
|
46
|
-
if (typeof onReady !== 'undefined' && typeof onReady !== 'function') {
|
|
47
|
-
throw new Error('onReady must be a function');
|
|
48
|
-
}
|
|
49
|
-
if (typeof onSuccess !== 'undefined' && typeof onSuccess !== 'function') {
|
|
50
|
-
throw new Error('onSuccess must be a function');
|
|
51
|
-
}
|
|
52
|
-
};
|