@tap-payments/apple-pay-button 0.0.7-test → 0.0.9-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 (11) hide show
  1. package/README.md +81 -4
  2. package/build/@types/index.d.ts +5 -0
  3. package/build/api/app.service.d.ts +2 -2
  4. package/build/api/app.service.js +4 -4
  5. package/build/features/ApplePayButton/ApplePayButton.d.ts +1 -3
  6. package/build/features/ApplePayButton/ApplePayButton.js +18 -9
  7. package/build/hooks/useApplePay.d.ts +1 -1
  8. package/build/hooks/useApplePay.js +2 -2
  9. package/build/utils/html.d.ts +1 -3
  10. package/build/utils/html.js +4 -15
  11. package/package.json +102 -102
package/README.md CHANGED
@@ -22,7 +22,7 @@ yarn add @tap-payments/apple-pay-button
22
22
 
23
23
  ### ES6
24
24
 
25
- ```js
25
+ ```javascript
26
26
  import React from 'react'
27
27
  import { ApplePayButton, ButtonStyle, SupportedNetworks, Scope } from '@tap-payments/apple-pay-button'
28
28
 
@@ -30,7 +30,7 @@ const App = () => {
30
30
  return (
31
31
  <ApplePayButton
32
32
  // required (The public Key provided by Tap)
33
- publicKey={'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxzh'}
33
+ publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
34
34
  // required
35
35
  merchant={{
36
36
  // required (The merchant domain name)
@@ -95,8 +95,85 @@ const App = () => {
95
95
 
96
96
  ### Vanilla JS
97
97
 
98
- ```js
99
- // coming soon...
98
+ ```html
99
+ <!DOCTYPE html>
100
+ <html lang="en">
101
+ <head>
102
+ <meta charset="UTF-8" />
103
+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
104
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
105
+ <title>apple pay button</title>
106
+ <link rel="stylesheet" href="https://apple-pay-button.b-cdn.net/build-0.0.8-test/main.css" />
107
+ <script src="https://apple-pay-button.b-cdn.net/build-0.0.8-test/main.js"></script>
108
+ </head>
109
+ <body>
110
+ <div id="apple-pay-button"></div>
111
+ <script type="text/javascript">
112
+ const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks } = window.TapSDKs
113
+ renderApplePayButton(
114
+ {
115
+ // required
116
+ publicKey: 'pk_test_xxxxxxxxxxxxxxxzh',
117
+ // required
118
+ merchant: {
119
+ // required
120
+ domain: 'example.com'
121
+ // optional
122
+ // id: '123...'
123
+ },
124
+ // required
125
+ transaction: {
126
+ // required
127
+ currency: 'USD',
128
+ // required
129
+ amount: '100'
130
+ },
131
+ // optional
132
+ scope: Scope.TapToken,
133
+ // optional
134
+ buttonStyle: ButtonStyle.WhiteOutline,
135
+ // optional
136
+ supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard],
137
+ // optional (The billing contact information)
138
+ billingContact: {
139
+ // required
140
+ email: {
141
+ // required
142
+ address: 'test@gmail.com'
143
+ },
144
+ // required
145
+ name: {
146
+ // required
147
+ first: 'test',
148
+ // required
149
+ last: 'tester',
150
+ // optional
151
+ middle: 'test'
152
+ },
153
+ // required
154
+ phone: {
155
+ number: '10XXXXXX56',
156
+ code: '+20'
157
+ }
158
+ },
159
+ // optional
160
+ onCancel: () => {
161
+ console.log('onCancel')
162
+ },
163
+ // optional
164
+ onError: (error) => {
165
+ console.log('onError', error)
166
+ },
167
+ // optional
168
+ onSuccess: async (data) => {
169
+ console.log('onSuccess', data)
170
+ }
171
+ },
172
+ 'apple-pay-button'
173
+ )
174
+ </script>
175
+ </body>
176
+ </html>
100
177
  ```
101
178
 
102
179
  ## Configurations
package/build/@types/index.d.ts CHANGED
@@ -45,6 +45,11 @@ export interface ApplePayButtonProps {
45
45
  onCancel?: () => void;
46
46
  onError?: (error: any) => void;
47
47
  onSuccess?: (data: Record<string, any>) => Promise<void>;
48
+ options?: {
49
+ mid?: string;
50
+ merchantIdentifier?: string;
51
+ mn?: string;
52
+ };
48
53
  }
49
54
  export interface MerchantResponse {
50
55
  id: string;
package/build/api/app.service.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { MerchantResponse, ApplePayRequestData, ProfileResponse } from '../@types';
1
+ import { MerchantResponse, ApplePayRequestData, ProfileResponse, ApplePayButtonProps } from '../@types';
2
2
  import BaseService from './base';
3
3
  declare class APPService extends BaseService {
4
4
  constructor();
5
5
  init(publicKey: string, merchantId?: string): Promise<ProfileResponse>;
6
- appleSession(merchant: MerchantResponse, validationURL: string, merchantRegisteredDomain: string): Promise<any>;
6
+ appleSession(merchant: MerchantResponse, validationURL: string, merchantRegisteredDomain: string, options: ApplePayButtonProps['options']): Promise<any>;
7
7
  tapTokenization(applePaymentData: Record<string, string>, merchant: MerchantResponse): Promise<any>;
8
8
  createCharge(publicKey: string, merchant: MerchantResponse, request: ApplePayRequestData, cardToken: string): Promise<import("axios").AxiosResponse<any, any>>;
9
9
  }
package/build/api/app.service.js CHANGED
@@ -88,7 +88,7 @@ var APPService = (function (_super) {
88
88
  enumerable: false,
89
89
  configurable: true,
90
90
  writable: true,
91
- value: function (merchant, validationURL, merchantRegisteredDomain) {
91
+ value: function (merchant, validationURL, merchantRegisteredDomain, options) {
92
92
  return __awaiter(this, void 0, void 0, function () {
93
93
  var body, data;
94
94
  return __generator(this, function (_a) {
@@ -97,9 +97,9 @@ var APPService = (function (_super) {
97
97
  body = {
98
98
  validationUrl: validationURL,
99
99
  origin: merchantRegisteredDomain,
100
- merchantIdentifier: 'merchant.tap.gosell',
101
- merchantId: merchant.id,
102
- merchantName: merchant.name,
100
+ merchantIdentifier: (options === null || options === void 0 ? void 0 : options.merchantIdentifier) || 'merchant.tap.gosell',
101
+ merchantId: (options === null || options === void 0 ? void 0 : options.mid) || merchant.id,
102
+ merchantName: (options === null || options === void 0 ? void 0 : options.mn) || merchant.name,
103
103
  session_token: merchant.session_token
104
104
  };
105
105
  return [4, this.post('/session', body)];
package/build/features/ApplePayButton/ApplePayButton.d.ts CHANGED
@@ -3,6 +3,4 @@ import { ApplePayButtonProps } from '../../@types';
3
3
  import './ApplePayButton.css';
4
4
  export type { ApplePayButtonProps };
5
5
  export declare function ApplePayButton(props: ApplePayButtonProps): JSX.Element;
6
- export declare function renderApplePayButton(config: ApplePayButtonProps, elementId: string): {
7
- unmount: () => void;
8
- };
6
+ export declare const renderApplePayButton: (props: ApplePayButtonProps, elementId: string) => any;
package/build/features/ApplePayButton/ApplePayButton.js CHANGED
@@ -12,12 +12,12 @@ var __assign = (this && this.__assign) || function () {
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import React from 'react';
14
14
  import { createRoot } from 'react-dom/client';
15
- import { createElementAndInject } from '../../utils';
15
+ import { findOrCreateElementAndInject } from '../../utils';
16
16
  import { useApplePay } from '../../hooks/useApplePay';
17
17
  import { ButtonStyle, Scope } from '../../constants';
18
18
  import './ApplePayButton.css';
19
19
  var ApplePay = React.memo(function (_a) {
20
- var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, _b = _a.scope, scope = _b === void 0 ? Scope.TapToken : _b, _c = _a.buttonStyle, buttonStyle = _c === void 0 ? ButtonStyle.WhiteOutline : _c;
20
+ var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, _b = _a.scope, scope = _b === void 0 ? Scope.TapToken : _b, _c = _a.buttonStyle, buttonStyle = _c === void 0 ? ButtonStyle.WhiteOutline : _c, options = _a.options;
21
21
  var _d = useApplePay({
22
22
  publicKey: publicKey,
23
23
  merchant: merchant,
@@ -27,17 +27,26 @@ var ApplePay = React.memo(function (_a) {
27
27
  onCancel: onCancel,
28
28
  onError: onError,
29
29
  onSuccess: onSuccess,
30
- scope: scope
30
+ scope: scope,
31
+ options: options
31
32
  }), loading = _d.loading, onApplePayButtonClicked = _d.onApplePayButtonClicked, disabled = _d.disabled;
32
33
  return (_jsx("button", __assign({ className: "button-applepay-tap ".concat(buttonStyle), onClick: onApplePayButtonClicked, disabled: loading || disabled }, { children: _jsx("div", __assign({ className: 'img-container' }, { children: _jsx("img", { loading: 'eager', src: 'https://back-end.b-cdn.net/payment_methods/apple_pay.svg' }) })) })));
33
34
  });
34
35
  export function ApplePayButton(props) {
35
36
  return _jsx(ApplePay, __assign({}, props));
36
37
  }
37
- export function renderApplePayButton(config, elementId) {
38
- var el = createElementAndInject(elementId);
38
+ var tapConnectInstance = null;
39
+ export var renderApplePayButton = function (props, elementId) {
40
+ if (tapConnectInstance) {
41
+ return tapConnectInstance;
42
+ }
43
+ var el = findOrCreateElementAndInject(elementId);
39
44
  var root = createRoot(el);
40
- root.render(_jsx(ApplePay, __assign({}, config)));
41
- var unmount = function () { return root.unmount(); };
42
- return { unmount: unmount };
43
- }
45
+ root.render(_jsx(ApplePayButton, __assign({}, props)));
46
+ var unmount = function () {
47
+ root.unmount();
48
+ tapConnectInstance = null;
49
+ };
50
+ tapConnectInstance = { unmount: unmount };
51
+ return tapConnectInstance;
52
+ };
package/build/hooks/useApplePay.d.ts CHANGED
@@ -5,5 +5,5 @@ interface UseApplePayReturnProps {
5
5
  onApplePayButtonClicked: () => Promise<void>;
6
6
  disabled: boolean;
7
7
  }
8
- export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks }: UseApplePayProps) => UseApplePayReturnProps;
8
+ export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks, options }: UseApplePayProps) => UseApplePayReturnProps;
9
9
  export {};
package/build/hooks/useApplePay.js CHANGED
@@ -50,7 +50,7 @@ import appService from '../api/app.service';
50
50
  import { ApplePayVersion } from '../constants';
51
51
  import { getApplePayPaymentMethod, getApplePayRequest, validateCurrency, validateSupportedNetworks } from '../utils/config';
52
52
  export var useApplePay = function (_a) {
53
- var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, supportedNetworks = _a.supportedNetworks;
53
+ var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, supportedNetworks = _a.supportedNetworks, options = _a.options;
54
54
  var _b = useState(false), loading = _b[0], setLoading = _b[1];
55
55
  var _c = useState(null), profileData = _c[0], setProfile = _c[1];
56
56
  var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
@@ -111,7 +111,7 @@ export var useApplePay = function (_a) {
111
111
  case 1:
112
112
  _a.trys.push([1, 3, , 4]);
113
113
  console.info("creating merchant session for merchantData: ".concat(JSON.stringify(profileData.merchant), " and validationURL: ").concat(event.validationURL, " and merchant.domain: ").concat(merchant.domain));
114
- return [4, appService.appleSession(profileData.merchant, event.validationURL, merchant.domain)];
114
+ return [4, appService.appleSession(profileData.merchant, event.validationURL, merchant.domain, options)];
115
115
  case 2:
116
116
  merchantSession = (_a.sent()).body;
117
117
  console.info('merchantSession', merchantSession);
package/build/utils/html.d.ts CHANGED
@@ -1,3 +1 @@
1
- export declare const createElementAndInject: (id: string) => HTMLDivElement;
2
- export declare const reactElement: (elementId: string) => import("react-dom/client").Root;
3
- export declare const removeElement: (elementId: string) => void;
1
+ export declare const findOrCreateElementAndInject: (id: string) => HTMLElement;
package/build/utils/html.js CHANGED
@@ -1,20 +1,9 @@
1
- import { createRoot } from 'react-dom/client';
2
- export var createElementAndInject = function (id) {
1
+ export var findOrCreateElementAndInject = function (id) {
2
+ var findElement = document.getElementById(id);
3
+ if (findElement)
4
+ return findElement;
3
5
  var element = document.createElement('div');
4
6
  element.setAttribute('id', id);
5
7
  document.body.appendChild(element);
6
8
  return element;
7
9
  };
8
- export var reactElement = function (elementId) {
9
- var element = document.getElementById(elementId);
10
- if (!element) {
11
- element = createElementAndInject('tap-apple-pay-sdk-element');
12
- }
13
- return createRoot(element);
14
- };
15
- export var removeElement = function (elementId) {
16
- var el = document.getElementById(elementId);
17
- if (!el)
18
- return;
19
- el.remove();
20
- };
package/package.json CHANGED
@@ -1,102 +1,102 @@
1
- {
2
- "name": "@tap-payments/apple-pay-button",
3
- "version": "0.0.7-test",
4
- "description": "Apple Pay Button React Component",
5
- "main": "build/index.js",
6
- "module": "build/index.js",
7
- "types": "build/index.d.ts",
8
- "files": [
9
- "build",
10
- "README.md"
11
- ],
12
- "scripts": {
13
- "prepare": "npx husky install",
14
- "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
15
- "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\" *.json *.js",
16
- "lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
17
- "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
18
- "start": "cross-env NODE_ENV=development webpack serve",
19
- "build": "cross-env NODE_ENV=production webpack",
20
- "copy:files": "copyfiles -u 1 src/**/*.css build/",
21
- "tsc:alias": "tsc-alias -p tsconfig.json",
22
- "ts:build": "rm -rf build && tsc && yarn tsc:alias && yarn copy:files",
23
- "push": "npm publish --access public"
24
- },
25
- "keywords": [],
26
- "author": {
27
- "name": "Ahmed Elsharkawy",
28
- "email": "a.elsharkawy@tap.company"
29
- },
30
- "license": "ISC",
31
- "devDependencies": {
32
- "@babel/core": "^7.18.6",
33
- "@babel/preset-env": "^7.18.6",
34
- "@babel/preset-react": "^7.18.6",
35
- "@babel/preset-typescript": "^7.18.6",
36
- "@types/crypto-js": "^4.1.1",
37
- "@types/react": "^18.0.15",
38
- "@types/react-dom": "^18.0.6",
39
- "@typescript-eslint/eslint-plugin": "^5.30.5",
40
- "@typescript-eslint/parser": "^5.30.5",
41
- "babel-loader": "^8.2.5",
42
- "copyfiles": "^2.4.1",
43
- "cross-env": "^7.0.3",
44
- "css-loader": "^6.7.1",
45
- "css-minimizer-webpack-plugin": "^4.0.0",
46
- "eslint": "^8.19.0",
47
- "eslint-config-airbnb": "^19.0.4",
48
- "eslint-config-prettier": "^8.5.0",
49
- "eslint-plugin-import": "^2.26.0",
50
- "eslint-plugin-jsx-a11y": "^6.6.0",
51
- "eslint-plugin-node": "^11.1.0",
52
- "eslint-plugin-prettier": "^4.2.1",
53
- "eslint-plugin-react": "^7.30.1",
54
- "eslint-plugin-react-hooks": "^4.6.0",
55
- "file-loader": "^6.2.0",
56
- "fork-ts-checker-webpack-plugin": "^7.2.12",
57
- "html-loader": "^3.1.2",
58
- "html-webpack-plugin": "^5.5.0",
59
- "husky": "^8.0.1",
60
- "lint-staged": "^13.0.3",
61
- "mini-css-extract-plugin": "^2.6.1",
62
- "prettier": "^2.7.1",
63
- "sass": "^1.53.0",
64
- "sass-loader": "^13.0.2",
65
- "style-loader": "^3.3.1",
66
- "terser-webpack-plugin": "^5.3.3",
67
- "tsc-alias": "^1.6.11",
68
- "typescript": "^4.7.4",
69
- "webpack": "^5.73.0",
70
- "webpack-cli": "^4.10.0",
71
- "webpack-dev-server": "^4.9.3",
72
- "webpack-merge": "^5.8.0"
73
- },
74
- "dependencies": {
75
- "axios": "^1.2.2",
76
- "react": ">=17.0.2",
77
- "react-dom": ">=17.0.2"
78
- },
79
- "peerDependencies": {
80
- "react": ">=17.0.2",
81
- "react-dom": ">=17.0.2"
82
- },
83
- "lint-staged": {
84
- "src/**/*.{ts,tsx,json,js,jsx}": [
85
- "yarn run prettier:fix",
86
- "yarn run lint",
87
- "git add ."
88
- ]
89
- },
90
- "browserslist": {
91
- "production": [
92
- ">0.2%",
93
- "not dead",
94
- "not op_mini all"
95
- ],
96
- "development": [
97
- "last 1 chrome version",
98
- "last 1 firefox version",
99
- "last 1 safari version"
100
- ]
101
- }
102
- }
1
+ {
2
+ "name": "@tap-payments/apple-pay-button",
3
+ "version": "0.0.9-test",
4
+ "description": "Apple Pay Button React Component",
5
+ "main": "build/index.js",
6
+ "module": "build/index.js",
7
+ "types": "build/index.d.ts",
8
+ "files": [
9
+ "build",
10
+ "README.md"
11
+ ],
12
+ "scripts": {
13
+ "prepare": "npx husky install",
14
+ "prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
15
+ "prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\" *.json *.js",
16
+ "lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
17
+ "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
18
+ "start": "cross-env NODE_ENV=development webpack serve",
19
+ "build": "cross-env NODE_ENV=production webpack",
20
+ "copy:files": "copyfiles -u 1 src/**/*.css build/",
21
+ "tsc:alias": "tsc-alias -p tsconfig.json",
22
+ "ts:build": "rm -rf build && tsc && yarn tsc:alias && yarn copy:files",
23
+ "push": "npm publish --access public"
24
+ },
25
+ "keywords": [],
26
+ "author": {
27
+ "name": "Ahmed Elsharkawy",
28
+ "email": "a.elsharkawy@tap.company"
29
+ },
30
+ "license": "ISC",
31
+ "devDependencies": {
32
+ "@babel/core": "^7.18.6",
33
+ "@babel/preset-env": "^7.18.6",
34
+ "@babel/preset-react": "^7.18.6",
35
+ "@babel/preset-typescript": "^7.18.6",
36
+ "@types/crypto-js": "^4.1.1",
37
+ "@types/react": "^18.0.15",
38
+ "@types/react-dom": "^18.0.6",
39
+ "@typescript-eslint/eslint-plugin": "^5.30.5",
40
+ "@typescript-eslint/parser": "^5.30.5",
41
+ "babel-loader": "^8.2.5",
42
+ "copyfiles": "^2.4.1",
43
+ "cross-env": "^7.0.3",
44
+ "css-loader": "^6.7.1",
45
+ "css-minimizer-webpack-plugin": "^4.0.0",
46
+ "eslint": "^8.19.0",
47
+ "eslint-config-airbnb": "^19.0.4",
48
+ "eslint-config-prettier": "^8.5.0",
49
+ "eslint-plugin-import": "^2.26.0",
50
+ "eslint-plugin-jsx-a11y": "^6.6.0",
51
+ "eslint-plugin-node": "^11.1.0",
52
+ "eslint-plugin-prettier": "^4.2.1",
53
+ "eslint-plugin-react": "^7.30.1",
54
+ "eslint-plugin-react-hooks": "^4.6.0",
55
+ "file-loader": "^6.2.0",
56
+ "fork-ts-checker-webpack-plugin": "^7.2.12",
57
+ "html-loader": "^3.1.2",
58
+ "html-webpack-plugin": "^5.5.0",
59
+ "husky": "^8.0.1",
60
+ "lint-staged": "^13.0.3",
61
+ "mini-css-extract-plugin": "^2.6.1",
62
+ "prettier": "^2.7.1",
63
+ "sass": "^1.53.0",
64
+ "sass-loader": "^13.0.2",
65
+ "style-loader": "^3.3.1",
66
+ "terser-webpack-plugin": "^5.3.3",
67
+ "tsc-alias": "^1.6.11",
68
+ "typescript": "^4.7.4",
69
+ "webpack": "^5.73.0",
70
+ "webpack-cli": "^4.10.0",
71
+ "webpack-dev-server": "^4.9.3",
72
+ "webpack-merge": "^5.8.0"
73
+ },
74
+ "dependencies": {
75
+ "axios": "^1.2.2",
76
+ "react": ">=17.0.2",
77
+ "react-dom": ">=17.0.2"
78
+ },
79
+ "peerDependencies": {
80
+ "react": ">=17.0.2",
81
+ "react-dom": ">=17.0.2"
82
+ },
83
+ "lint-staged": {
84
+ "src/**/*.{ts,tsx,json,js,jsx}": [
85
+ "yarn run prettier:fix",
86
+ "yarn run lint",
87
+ "git add ."
88
+ ]
89
+ },
90
+ "browserslist": {
91
+ "production": [
92
+ ">0.2%",
93
+ "not dead",
94
+ "not op_mini all"
95
+ ],
96
+ "development": [
97
+ "last 1 chrome version",
98
+ "last 1 firefox version",
99
+ "last 1 safari version"
100
+ ]
101
+ }
102
+ }