@tap-payments/apple-pay-button 0.0.7-test → 0.0.8-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 (6) hide show
  1. package/README.md +81 -4
  2. package/build/features/ApplePayButton/ApplePayButton.d.ts +1 -3
  3. package/build/features/ApplePayButton/ApplePayButton.js +15 -7
  4. package/build/utils/html.d.ts +1 -3
  5. package/build/utils/html.js +4 -15
  6. package/package.json +1 -1
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/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,7 +12,7 @@ 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';
@@ -34,10 +34,18 @@ var ApplePay = React.memo(function (_a) {
34
34
  export function ApplePayButton(props) {
35
35
  return _jsx(ApplePay, __assign({}, props));
36
36
  }
37
- export function renderApplePayButton(config, elementId) {
38
- var el = createElementAndInject(elementId);
37
+ var tapConnectInstance = null;
38
+ export var renderApplePayButton = function (props, elementId) {
39
+ if (tapConnectInstance) {
40
+ return tapConnectInstance;
41
+ }
42
+ var el = findOrCreateElementAndInject(elementId);
39
43
  var root = createRoot(el);
40
- root.render(_jsx(ApplePay, __assign({}, config)));
41
- var unmount = function () { return root.unmount(); };
42
- return { unmount: unmount };
43
- }
44
+ root.render(_jsx(ApplePayButton, __assign({}, props)));
45
+ var unmount = function () {
46
+ root.unmount();
47
+ tapConnectInstance = null;
48
+ };
49
+ tapConnectInstance = { unmount: unmount };
50
+ return tapConnectInstance;
51
+ };
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,6 +1,6 @@
1
1
  {
2
2
  "name": "@tap-payments/apple-pay-button",
3
- "version": "0.0.7-test",
3
+ "version": "0.0.8-test",
4
4
  "description": "Apple Pay Button React Component",
5
5
  "main": "build/index.js",
6
6
  "module": "build/index.js",