@fat-zebra/sdk 1.4.6 → 1.4.8
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/dist/index.d.ts +2 -1
- package/dist/index.js +2 -1
- package/dist/local/fatzebra.js.map +1 -0
- package/dist/local/index.html +247 -0
- package/dist/react/VerifyCard.d.ts +3 -2
- package/dist/react/VerifyCard.js +2 -7
- package/dist/react/index.d.ts +2 -1
- package/dist/react/index.js +2 -1
- package/dist/react/submitForm.d.ts +2 -0
- package/dist/react/submitForm.js +10 -0
- package/dist/react/url.js +4 -4
- package/dist/react/useFatZebra.js +0 -31
- package/dist/sca/index.d.ts +3 -3
- package/dist/sca/index.js +12 -15
- package/dist/shared/api-gateway-client.js +1 -1
- package/dist/shared/types.d.ts +4 -3
- package/package.json +1 -1
|
@@ -0,0 +1,247 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<title>Merchant XYZ Checkout Page</title>
|
|
6
|
+
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
|
7
|
+
<style type="text/css">
|
|
8
|
+
iframe {
|
|
9
|
+
height: 600px;
|
|
10
|
+
width: 700px;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
|
|
14
|
+
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.2/rollups/hmac-md5.js"></script>
|
|
15
|
+
<script>
|
|
16
|
+
window.localStorage.setItem('fz-access-token', "<DO NOT USE>")
|
|
17
|
+
// card tokens will be filled out
|
|
18
|
+
var actionItems = {
|
|
19
|
+
tokens: [
|
|
20
|
+
{
|
|
21
|
+
token: 'whatever',
|
|
22
|
+
number: '4000000000001000',
|
|
23
|
+
description: 'Successful Frictionless Authentication'
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
token: '',
|
|
27
|
+
number: '4000000000001026',
|
|
28
|
+
description: 'Attempts Stand-In Frictionless'
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
token: '',
|
|
32
|
+
number: '4000000000001034',
|
|
33
|
+
description: 'Unavailable Frictionless'
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
token: '',
|
|
37
|
+
number: '4000000000001059',
|
|
38
|
+
description: 'Authentication Not Available on Lookup'
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
token: '',
|
|
42
|
+
number: '4000000000001067',
|
|
43
|
+
description: 'Error on Lookup'
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
token: '',
|
|
47
|
+
number: '4000000000001075',
|
|
48
|
+
description: 'Timeout on cmpi_lookup'
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
token: '',
|
|
52
|
+
number: '4000000000001083',
|
|
53
|
+
description: 'Bypassed Authentication'
|
|
54
|
+
},
|
|
55
|
+
{
|
|
56
|
+
token: '',
|
|
57
|
+
number: '4000000000001018',
|
|
58
|
+
description: 'Failed Frictionless'
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
token: '',
|
|
62
|
+
number: '4000000000001042',
|
|
63
|
+
description: 'Rejected Frictionless'
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
token: 'ahq94qb60fs0xaruga3h',
|
|
67
|
+
number: '4000000000001091',
|
|
68
|
+
description: 'Challenge'
|
|
69
|
+
}
|
|
70
|
+
],
|
|
71
|
+
cards: [
|
|
72
|
+
{
|
|
73
|
+
number: '4000000000001000',
|
|
74
|
+
description: 'Successful Frictionless Authentication'
|
|
75
|
+
},
|
|
76
|
+
{
|
|
77
|
+
number: '4000000000001026',
|
|
78
|
+
description: 'Attempts Stand-In Frictionless'
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
number: '4000000000001034',
|
|
82
|
+
description: 'Unavailable Frictionless'
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
number: '4000000000001059',
|
|
86
|
+
description: 'Authentication Not Available on Lookup'
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
number: '4000000000001067',
|
|
90
|
+
description: 'Error on Lookup'
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
number: '4000000000001075',
|
|
94
|
+
description: 'Timeout on cmpi_lookup'
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
number: '4000000000001083',
|
|
98
|
+
description: 'Bypassed Authentication'
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
number: '4000000000001018',
|
|
102
|
+
description: 'Failed Frictionless'
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
number: '4000000000001042',
|
|
106
|
+
description: 'Rejected Frictionless'
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
number: '4000000000001091',
|
|
110
|
+
description: 'Challenge'
|
|
111
|
+
}
|
|
112
|
+
]
|
|
113
|
+
}
|
|
114
|
+
</script>
|
|
115
|
+
<script src="fatzebra.js"></script></head>
|
|
116
|
+
<body>
|
|
117
|
+
<table id="options" class="table table-bordered">
|
|
118
|
+
<thead>
|
|
119
|
+
<tr>
|
|
120
|
+
<th scope="col">Card Token</th>
|
|
121
|
+
<th scope="col">New Card</th>
|
|
122
|
+
<th scope="col">Description</th>
|
|
123
|
+
</tr>
|
|
124
|
+
</thead>
|
|
125
|
+
<tbody>
|
|
126
|
+
</tbody>
|
|
127
|
+
</table>
|
|
128
|
+
<button type="button" class="btn btn-primary" id='doCheckout'>Primary</button>
|
|
129
|
+
|
|
130
|
+
<script>
|
|
131
|
+
var selectedMode = undefined
|
|
132
|
+
var selectedValue = undefined
|
|
133
|
+
|
|
134
|
+
$(document).ready(function() {
|
|
135
|
+
|
|
136
|
+
for (var i = 0; i < actionItems.tokens.length; i ++ ) {
|
|
137
|
+
const row = "<tr><td><input type='checkbox' class='option' data-mode='token' value='" + actionItems.tokens[i].token + "'><label>token for " + actionItems.tokens[i].number + "</label></td>" +
|
|
138
|
+
"<td><input type='checkbox' class='option' data-mode='card' value='" + actionItems.cards[i].number + "'><label>" + actionItems.cards[i].number + "</label></td>" +
|
|
139
|
+
"<td><label>" + actionItems.cards[i].description + "</label></td></tr>";
|
|
140
|
+
$('#options').append(row)
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
$('.option').change(function() {
|
|
144
|
+
|
|
145
|
+
if ($(this).prop("checked") == true) {
|
|
146
|
+
if (selectedValue === undefined) {
|
|
147
|
+
selectedMode = $(this).data('mode');
|
|
148
|
+
selectedValue = $(this).val();
|
|
149
|
+
} else {
|
|
150
|
+
$(this).prop("checked", false)
|
|
151
|
+
alert("There can only be one checkbox selected!");
|
|
152
|
+
}
|
|
153
|
+
} else {
|
|
154
|
+
selectedMode = undefined;
|
|
155
|
+
selectedValue = undefined;
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
console.log('selectedMode: ' + selectedMode);
|
|
159
|
+
console.log('selectedValue: ' + selectedValue);
|
|
160
|
+
})
|
|
161
|
+
})
|
|
162
|
+
|
|
163
|
+
</script>
|
|
164
|
+
</body>
|
|
165
|
+
<footer>
|
|
166
|
+
|
|
167
|
+
<script>
|
|
168
|
+
var fz = new FatZebra({
|
|
169
|
+
username: 'TEST'
|
|
170
|
+
});
|
|
171
|
+
|
|
172
|
+
$('#doCheckout').click(function() {
|
|
173
|
+
if (selectedMode === undefined || selectedValue == undefined) {
|
|
174
|
+
alert('Please select an option.');
|
|
175
|
+
return
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
var paymentMethod = undefined;
|
|
179
|
+
|
|
180
|
+
if (selectedMode === 'card') {
|
|
181
|
+
paymentMethod = {
|
|
182
|
+
type: 'card',
|
|
183
|
+
data: {
|
|
184
|
+
number: selectedValue,
|
|
185
|
+
holder: 'John Doe',
|
|
186
|
+
expiryMonth: '01',
|
|
187
|
+
expiryYear: '2022',
|
|
188
|
+
cvv: '123'
|
|
189
|
+
}
|
|
190
|
+
}
|
|
191
|
+
} else {
|
|
192
|
+
paymentMethod = {
|
|
193
|
+
type: 'card_on_file',
|
|
194
|
+
data: {
|
|
195
|
+
token: selectedValue
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
function randomString(length) {
|
|
201
|
+
return Math.round((Math.pow(36, length + 1) - Math.random() * Math.pow(36, length))).toString(36).slice(1);
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
const reference = randomString(16);
|
|
205
|
+
const amount = 1200000;
|
|
206
|
+
const currency = 'AUD';
|
|
207
|
+
const message = [reference, amount, currency].join(':')
|
|
208
|
+
const verification = CryptoJS.HmacMD5(message, "033bd94b11").toString();
|
|
209
|
+
|
|
210
|
+
fz.verifyCard({
|
|
211
|
+
customer: {
|
|
212
|
+
firstName: 'Captain',
|
|
213
|
+
lastName: 'America',
|
|
214
|
+
email: 'sos@fatzebra.com.au',
|
|
215
|
+
address: '123 Get High Blvd.',
|
|
216
|
+
city: 'Red Light District',
|
|
217
|
+
postcode: '6666',
|
|
218
|
+
state: 'NSW',
|
|
219
|
+
country: 'Australia'
|
|
220
|
+
},
|
|
221
|
+
paymentIntent: {
|
|
222
|
+
payment: {
|
|
223
|
+
amount: amount,
|
|
224
|
+
currency: currency,
|
|
225
|
+
reference: reference
|
|
226
|
+
},
|
|
227
|
+
verification: verification
|
|
228
|
+
},
|
|
229
|
+
paymentMethod: paymentMethod
|
|
230
|
+
})
|
|
231
|
+
})
|
|
232
|
+
|
|
233
|
+
fz.on('fz.sca.error', function(event) {
|
|
234
|
+
console.log(JSON.stringify(event.detail))
|
|
235
|
+
})
|
|
236
|
+
|
|
237
|
+
fz.on('fz.sca.success', function(event) {
|
|
238
|
+
console.log(JSON.stringify(event.detail))
|
|
239
|
+
})
|
|
240
|
+
|
|
241
|
+
fz.on('fz.validation.error', function(event) {
|
|
242
|
+
console.log(JSON.stringify(event.detail))
|
|
243
|
+
})
|
|
244
|
+
</script>
|
|
245
|
+
|
|
246
|
+
</footer>
|
|
247
|
+
</html>
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { HTMLProps } from "react";
|
|
2
2
|
import * as FatZebra from "../shared/types";
|
|
3
3
|
type FrameProps = {
|
|
4
4
|
handlers: FatZebra.Handlers;
|
|
5
5
|
config: FatZebra.PaymentConfig;
|
|
6
|
+
iframeProps?: HTMLProps<HTMLIFrameElement>;
|
|
6
7
|
};
|
|
7
|
-
declare const Frame: ({ handlers, config }: FrameProps) => React.JSX.Element;
|
|
8
|
+
declare const Frame: ({ handlers, config, iframeProps }: FrameProps) => React.JSX.Element;
|
|
8
9
|
export default Frame;
|
package/dist/react/VerifyCard.js
CHANGED
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import useFatZebra from "./useFatZebra";
|
|
3
|
-
|
|
4
|
-
const Frame = ({ handlers, config }) => {
|
|
5
|
-
const bridgeRef = React.useRef(null);
|
|
3
|
+
const Frame = ({ handlers, config, iframeProps }) => {
|
|
6
4
|
const { url } = useFatZebra({
|
|
7
5
|
config,
|
|
8
6
|
handlers: handlers,
|
|
9
7
|
});
|
|
10
|
-
console.log("config", config);
|
|
11
|
-
const environmentConfig = env[config.environment || Environment.production];
|
|
12
8
|
return (React.createElement("div", null,
|
|
13
|
-
React.createElement("iframe", { src: url,
|
|
14
|
-
React.createElement("iframe", { title: "bridge-form", src: environmentConfig.bridgeUrl, width: "100%", height: "700px", ref: bridgeRef })));
|
|
9
|
+
React.createElement("iframe", Object.assign({ src: url, title: "verification-form" }, iframeProps))));
|
|
15
10
|
};
|
|
16
11
|
export default Frame;
|
package/dist/react/index.d.ts
CHANGED
package/dist/react/index.js
CHANGED
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { BridgeEvent } from "../shared/types";
|
|
2
|
+
const submitForm = (e) => {
|
|
3
|
+
const message = {
|
|
4
|
+
channel: 'sca',
|
|
5
|
+
subject: BridgeEvent.TRIGGER_PAYNOW_BUTTON,
|
|
6
|
+
data: {}
|
|
7
|
+
};
|
|
8
|
+
document.querySelector("iframe[title=verification-form]").contentWindow.postMessage(message, "*");
|
|
9
|
+
};
|
|
10
|
+
export default submitForm;
|
package/dist/react/url.js
CHANGED
|
@@ -8,12 +8,10 @@ const generatePaymentURL = (values, environment) => {
|
|
|
8
8
|
"iframe",
|
|
9
9
|
"postmessage",
|
|
10
10
|
"hide_card_holder",
|
|
11
|
-
"
|
|
12
|
-
"card_types",
|
|
13
|
-
"surcharge_enabled",
|
|
11
|
+
"hide_button",
|
|
14
12
|
"sca_enabled",
|
|
15
13
|
];
|
|
16
|
-
const environmentConfig = env[environment || Environment.
|
|
14
|
+
const environmentConfig = env[environment || Environment.sandbox];
|
|
17
15
|
const urlTemplate = parseTemplate(`${environmentConfig.payNowUrl}/sdk/v3/{merchant}/{reference}/{currency}/{amount}/{verification}{?${queryParts.join(",")}}`);
|
|
18
16
|
const url = urlTemplate.expand({
|
|
19
17
|
merchant: values.merchant,
|
|
@@ -27,6 +25,8 @@ const generatePaymentURL = (values, environment) => {
|
|
|
27
25
|
iframe: true,
|
|
28
26
|
postmessage: true,
|
|
29
27
|
tokenize_only: values.tokenize_only,
|
|
28
|
+
hide_card_holder: values.hide_card_holder,
|
|
29
|
+
hide_button: values.hide_button,
|
|
30
30
|
});
|
|
31
31
|
return url;
|
|
32
32
|
};
|
|
@@ -19,34 +19,6 @@ const useFatZebra = ({ config, handlers }) => {
|
|
|
19
19
|
handler(new CustomEvent(event, { detail: data }));
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
|
-
const handleCreatePaymentResponse = (data) => {
|
|
23
|
-
const transactionPayload = {
|
|
24
|
-
transactionId: data.transaction_id,
|
|
25
|
-
responseCode: data.response_code,
|
|
26
|
-
message: data.message,
|
|
27
|
-
amount: data.amount,
|
|
28
|
-
currency: data.currency,
|
|
29
|
-
reference: data.reference,
|
|
30
|
-
cardNumber: data.card_number,
|
|
31
|
-
cardHolder: data.card_holder,
|
|
32
|
-
cardExpiry: data.card_expiry,
|
|
33
|
-
cardType: data.card_type,
|
|
34
|
-
verification: data.v,
|
|
35
|
-
};
|
|
36
|
-
if (data.errors) {
|
|
37
|
-
emit(FatZebra.PublicEvent.PAYMENT_ERROR, {
|
|
38
|
-
message: 'Payment failed.',
|
|
39
|
-
errors: data.errors,
|
|
40
|
-
data: transactionPayload,
|
|
41
|
-
});
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
emit(FatZebra.PublicEvent.PAYMENT_SUCCESS, {
|
|
45
|
-
message: 'Payment successful.',
|
|
46
|
-
data: transactionPayload,
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
};
|
|
50
22
|
const handleTokenizeCardResponse = (data) => {
|
|
51
23
|
if (data.errors) {
|
|
52
24
|
emit(FatZebra.PublicEvent.TOKENIZATION_ERROR, {
|
|
@@ -89,9 +61,6 @@ const useFatZebra = ({ config, handlers }) => {
|
|
|
89
61
|
});
|
|
90
62
|
return;
|
|
91
63
|
}
|
|
92
|
-
if (event.data.subject === FatZebra.BridgeEvent.CREATE_PAYMENT_RESPONSE) {
|
|
93
|
-
handleCreatePaymentResponse(event.data.data);
|
|
94
|
-
}
|
|
95
64
|
if (event.data.subject === FatZebra.BridgeEvent.TOKENIZE_CARD_RESPONSE) {
|
|
96
65
|
handleTokenizeCardResponse(event.data.data);
|
|
97
66
|
}
|
package/dist/sca/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as t from './types';
|
|
2
|
-
import {
|
|
2
|
+
import { EventCallback, Customer, CustomerSnakeCase, PaymentIntent } from '../shared/types';
|
|
3
3
|
import { CardinalManager } from './cardinal';
|
|
4
4
|
import GatewayClient from '../shared/api-gateway-client';
|
|
5
5
|
import { Environment } from "../shared/env";
|
|
@@ -12,8 +12,8 @@ export interface ScaRunProps {
|
|
|
12
12
|
}
|
|
13
13
|
export interface ScaConfig {
|
|
14
14
|
gatewayClient: GatewayClient;
|
|
15
|
-
successCallback?:
|
|
16
|
-
failureCallback?:
|
|
15
|
+
successCallback?: EventCallback | null;
|
|
16
|
+
failureCallback?: EventCallback | null;
|
|
17
17
|
environment?: Environment;
|
|
18
18
|
}
|
|
19
19
|
declare class Sca {
|
package/dist/sca/index.js
CHANGED
|
@@ -16,25 +16,22 @@ import { toFzSli } from './eci-mappings';
|
|
|
16
16
|
import env, { Environment } from "../shared/env";
|
|
17
17
|
class Sca {
|
|
18
18
|
constructor({ gatewayClient, successCallback, failureCallback, environment }) {
|
|
19
|
-
console.log("scaEnvironment", environment);
|
|
20
19
|
this.gatewayClient = gatewayClient;
|
|
21
20
|
this.successCallback = successCallback;
|
|
22
21
|
this.failureCallback = failureCallback;
|
|
23
|
-
this.environmentConfig = env[environment || Environment.
|
|
22
|
+
this.environmentConfig = env[environment || Environment.sandbox];
|
|
24
23
|
}
|
|
25
24
|
loadScript() {
|
|
26
|
-
if (document) {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
document.body.appendChild(script);
|
|
37
|
-
}
|
|
25
|
+
if (!document.getElementById("songbird-script")) {
|
|
26
|
+
const script = document.createElement('script');
|
|
27
|
+
script.type = 'text/javascript';
|
|
28
|
+
script.id = "songbird-script";
|
|
29
|
+
script.src = this.environmentConfig.songbirdUrl;
|
|
30
|
+
script.async = true;
|
|
31
|
+
script.onload = () => {
|
|
32
|
+
this._cardinal = new CardinalManager();
|
|
33
|
+
};
|
|
34
|
+
document.body.appendChild(script);
|
|
38
35
|
}
|
|
39
36
|
}
|
|
40
37
|
get cardinal() {
|
|
@@ -49,7 +46,7 @@ class Sca {
|
|
|
49
46
|
this.failureCallback(event);
|
|
50
47
|
}
|
|
51
48
|
else {
|
|
52
|
-
emit(PublicEvent.SCA_ERROR, { errors: [message], data:
|
|
49
|
+
emit(PublicEvent.SCA_ERROR, { errors: [message], data: null });
|
|
53
50
|
}
|
|
54
51
|
console.log(message);
|
|
55
52
|
}
|
|
@@ -13,7 +13,7 @@ import { getSdkVersionNumber } from "./util";
|
|
|
13
13
|
import env, { Environment } from "../shared/env";
|
|
14
14
|
class GatewayClient {
|
|
15
15
|
constructor({ accessToken, username, environment }) {
|
|
16
|
-
this.environment = environment || Environment.
|
|
16
|
+
this.environment = environment || Environment.sandbox;
|
|
17
17
|
const headers = {};
|
|
18
18
|
headers["Authorization"] = `Bearer ${accessToken}`;
|
|
19
19
|
headers[RequestHeaderSdkVersion] = getSdkVersionNumber();
|
package/dist/shared/types.d.ts
CHANGED
|
@@ -87,8 +87,8 @@ interface ValidationResult {
|
|
|
87
87
|
valid: boolean;
|
|
88
88
|
errors: string[];
|
|
89
89
|
}
|
|
90
|
-
export type
|
|
91
|
-
type Handlers = Partial<Record<PublicEvent,
|
|
90
|
+
export type EventCallback = (event: CustomEvent) => void;
|
|
91
|
+
type Handlers = Partial<Record<PublicEvent, EventCallback | null>>;
|
|
92
92
|
export type PaymentConfig = {
|
|
93
93
|
username: string;
|
|
94
94
|
accessToken: string;
|
|
@@ -97,7 +97,8 @@ export type PaymentConfig = {
|
|
|
97
97
|
options: OptionalUrlValues;
|
|
98
98
|
};
|
|
99
99
|
export type OptionalUrlValues = {
|
|
100
|
-
hide_card_holder?:
|
|
100
|
+
hide_card_holder?: boolean;
|
|
101
|
+
hide_button?: boolean;
|
|
101
102
|
return_path?: string;
|
|
102
103
|
card_types?: Array<string>;
|
|
103
104
|
surcharge_enabled?: string;
|