@riskdefy/chargebacks 1.0.3 → 1.0.4
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/chargebacks.css +1 -0
- package/dist/index.js +1284 -1
- package/package.json +3 -1
- package/src/components/Chargebacks.vue +6 -25
- package/src/components/Details.vue +789 -0
- package/src/components/FluidPayDetails.vue +314 -0
- package/src/components/IncomingDetails.vue +620 -0
- package/src/components/InovioPayDetails.vue +316 -0
- package/src/components/NmiDetails.vue +162 -0
- package/src/components/NuveiDetails.vue +320 -0
- package/src/components/ReasonExplained.vue +121 -0
- package/src/components/SquareUp.vue +316 -0
- package/src/components/Summary.vue +218 -0
- package/src/components/USAEPayDetails.vue +181 -0
- package/src/service/api.js +23 -0
|
@@ -0,0 +1,316 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="rounded border pt-0 mb-5">
|
|
3
|
+
<div class="accordion fs-7" id="kt_accordion_1">
|
|
4
|
+
<div class="accordion-item">
|
|
5
|
+
<h2 class="accordion-header" id="kt_accordion_1_header_1">
|
|
6
|
+
<button
|
|
7
|
+
class="accordion-button fs-6 fw-bold"
|
|
8
|
+
type="button"
|
|
9
|
+
data-bs-toggle="collapse"
|
|
10
|
+
data-bs-target="#kt_accordion_1_body_1"
|
|
11
|
+
aria-expanded="true"
|
|
12
|
+
aria-controls="kt_accordion_1_body_1"
|
|
13
|
+
>
|
|
14
|
+
Order Details
|
|
15
|
+
</button>
|
|
16
|
+
</h2>
|
|
17
|
+
<div
|
|
18
|
+
id="kt_accordion_1_body_1"
|
|
19
|
+
class="accordion-collapse collapse show"
|
|
20
|
+
aria-labelledby="kt_accordion_1_header_1"
|
|
21
|
+
data-bs-parent="#kt_accordion_1"
|
|
22
|
+
style=""
|
|
23
|
+
>
|
|
24
|
+
<div class="accordion-body">
|
|
25
|
+
<div class="mb-0">
|
|
26
|
+
<div
|
|
27
|
+
v-if="incoming.order_details == ''"
|
|
28
|
+
class="d-flex flex-wrap py-5"
|
|
29
|
+
>
|
|
30
|
+
<!--begin::Col-->
|
|
31
|
+
<div class="mb-0">
|
|
32
|
+
<span class="fs-7 text-gray-500">No Data Available</span>
|
|
33
|
+
</div>
|
|
34
|
+
<!--end::Col-->
|
|
35
|
+
</div>
|
|
36
|
+
<div v-else class="table-responsive">
|
|
37
|
+
<!--begin::Table-->
|
|
38
|
+
<table
|
|
39
|
+
class="table align-middle table-row-dashed gy-4 mb-0 fs-7"
|
|
40
|
+
>
|
|
41
|
+
<!--begin::Table head-->
|
|
42
|
+
<thead>
|
|
43
|
+
<!--begin::Table row-->
|
|
44
|
+
<tr
|
|
45
|
+
class="border-bottom border-gray-200 text-start text-gray-400 fw-bolder fs-7 text-uppercase gs-0"
|
|
46
|
+
>
|
|
47
|
+
<th class="min-w-150px">Item Id</th>
|
|
48
|
+
<th class="min-w-100px">Item Name</th>
|
|
49
|
+
<th class="min-w-50px">Qty</th>
|
|
50
|
+
<th class="text-end min-w-100px pe-5">Price</th>
|
|
51
|
+
</tr>
|
|
52
|
+
<!--end::Table row-->
|
|
53
|
+
</thead>
|
|
54
|
+
<!--end::Table head-->
|
|
55
|
+
|
|
56
|
+
<!--begin::Table body-->
|
|
57
|
+
<tbody class="fw-bold text-gray-800">
|
|
58
|
+
<tr
|
|
59
|
+
v-for="(item, index) in incoming.order_details.items"
|
|
60
|
+
:key="index"
|
|
61
|
+
>
|
|
62
|
+
<td>
|
|
63
|
+
<div class="w-50px">{{ item.purchaseId }}</div>
|
|
64
|
+
</td>
|
|
65
|
+
<td>
|
|
66
|
+
{{ item.name }}
|
|
67
|
+
</td>
|
|
68
|
+
<td class="w-50px">{{ item.qty }}</td>
|
|
69
|
+
<td class="w-50px text-end pe-5">
|
|
70
|
+
{{ item.price }}
|
|
71
|
+
</td>
|
|
72
|
+
</tr>
|
|
73
|
+
</tbody>
|
|
74
|
+
<!--end::Table body-->
|
|
75
|
+
</table>
|
|
76
|
+
<!--end::Table-->
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="accordion-item">
|
|
83
|
+
<h2 class="accordion-header" id="kt_accordion_1_header_2">
|
|
84
|
+
<button
|
|
85
|
+
class="accordion-button fs-6 fw-bold collapsed"
|
|
86
|
+
type="button"
|
|
87
|
+
data-bs-toggle="collapse"
|
|
88
|
+
data-bs-target="#kt_accordion_1_body_2"
|
|
89
|
+
aria-expanded="false"
|
|
90
|
+
aria-controls="kt_accordion_1_body_2"
|
|
91
|
+
>
|
|
92
|
+
Transaction Details
|
|
93
|
+
</button>
|
|
94
|
+
</h2>
|
|
95
|
+
<div
|
|
96
|
+
id="kt_accordion_1_body_2"
|
|
97
|
+
class="accordion-collapse collapse"
|
|
98
|
+
aria-labelledby="kt_accordion_1_header_2"
|
|
99
|
+
data-bs-parent="#kt_accordion_1"
|
|
100
|
+
style=""
|
|
101
|
+
>
|
|
102
|
+
<div class="accordion-body">
|
|
103
|
+
<div class="mb-0">
|
|
104
|
+
<div class="d-flex flex-wrap py-2">
|
|
105
|
+
<div class="flex-equal ms-2 me-2">
|
|
106
|
+
<table class="table table-flush fw-bold gy-1 mb-0">
|
|
107
|
+
<tbody>
|
|
108
|
+
<tr>
|
|
109
|
+
<td class="text-muted min-w-125px w-125px">
|
|
110
|
+
Transaction Id:
|
|
111
|
+
</td>
|
|
112
|
+
<td class="text-gray-800">
|
|
113
|
+
{{ incoming.transaction["TRANS_ID"] }}
|
|
114
|
+
</td>
|
|
115
|
+
</tr>
|
|
116
|
+
<tr>
|
|
117
|
+
<td class="text-muted min-w-125px w-125px">
|
|
118
|
+
Auth Code:
|
|
119
|
+
</td>
|
|
120
|
+
<td class="text-gray-800">
|
|
121
|
+
{{ incoming.transaction["PROC_AUTH_CODE"] }}
|
|
122
|
+
</td>
|
|
123
|
+
</tr>
|
|
124
|
+
<tr>
|
|
125
|
+
<td class="text-muted min-w-125px w-125px">AVS:</td>
|
|
126
|
+
<td class="text-gray-800">
|
|
127
|
+
{{ incoming.transaction["AVS_CODE"] }}
|
|
128
|
+
</td>
|
|
129
|
+
</tr>
|
|
130
|
+
<tr>
|
|
131
|
+
<td class="text-muted min-w-125px w-125px">CVV:</td>
|
|
132
|
+
<td class="text-gray-800">
|
|
133
|
+
{{ incoming.transaction["CVV_CODE"] }}
|
|
134
|
+
</td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td class="text-muted min-w-125px w-125px">Created:</td>
|
|
138
|
+
<td class="text-gray-800">
|
|
139
|
+
{{ incoming.transaction["TRANS_SETTLE_UTC_TS"] }}
|
|
140
|
+
</td>
|
|
141
|
+
</tr>
|
|
142
|
+
</tbody>
|
|
143
|
+
</table>
|
|
144
|
+
</div>
|
|
145
|
+
<div class="flex-equal ms-2 me-2">
|
|
146
|
+
<table class="table table-flush fw-bold gy-1">
|
|
147
|
+
<tbody>
|
|
148
|
+
<tr>
|
|
149
|
+
<td class="text-muted min-w-125px w-125px">
|
|
150
|
+
Order Id:
|
|
151
|
+
</td>
|
|
152
|
+
<td class="text-gray-800">
|
|
153
|
+
{{ incoming.transaction["PO_ID"] }}
|
|
154
|
+
</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td class="text-muted min-w-125px w-125px">Status:</td>
|
|
158
|
+
<td class="text-gray-800">
|
|
159
|
+
{{ incoming.transaction["TRANS_STATUS"] }}
|
|
160
|
+
</td>
|
|
161
|
+
</tr>
|
|
162
|
+
<tr>
|
|
163
|
+
<td class="text-muted min-w-125px w-125px">Type:</td>
|
|
164
|
+
<td class="text-gray-800">
|
|
165
|
+
{{ incoming.transaction["SERVICE_ACTION"] }}
|
|
166
|
+
</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td class="text-muted min-w-125px w-125px">
|
|
170
|
+
Descriptor:
|
|
171
|
+
</td>
|
|
172
|
+
<td class="text-gray-800">
|
|
173
|
+
{{ incoming.transaction["DESCRIPTOR"] }}
|
|
174
|
+
</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td class="text-muted min-w-125px w-125px">
|
|
178
|
+
Card Bank:
|
|
179
|
+
</td>
|
|
180
|
+
<td class="text-gray-800">
|
|
181
|
+
{{ incoming.transaction["CARD_BANK"] }}
|
|
182
|
+
</td>
|
|
183
|
+
</tr>
|
|
184
|
+
</tbody>
|
|
185
|
+
</table>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="accordion-item">
|
|
193
|
+
<h2 class="accordion-header" id="kt_accordion_1_header_3">
|
|
194
|
+
<button
|
|
195
|
+
class="accordion-button fs-6 fw-bold collapsed"
|
|
196
|
+
type="button"
|
|
197
|
+
data-bs-toggle="collapse"
|
|
198
|
+
data-bs-target="#kt_accordion_1_body_3"
|
|
199
|
+
aria-expanded="false"
|
|
200
|
+
aria-controls="kt_accordion_1_body_3"
|
|
201
|
+
>
|
|
202
|
+
Cardholder Details
|
|
203
|
+
</button>
|
|
204
|
+
</h2>
|
|
205
|
+
<div
|
|
206
|
+
id="kt_accordion_1_body_3"
|
|
207
|
+
class="accordion-collapse collapse"
|
|
208
|
+
aria-labelledby="kt_accordion_1_header_3"
|
|
209
|
+
data-bs-parent="#kt_accordion_1"
|
|
210
|
+
style=""
|
|
211
|
+
>
|
|
212
|
+
<div class="accordion-body">
|
|
213
|
+
<div class="mb-0">
|
|
214
|
+
<div class="d-flex flex-wrap py-5">
|
|
215
|
+
<!--begin::Col-->
|
|
216
|
+
<div class="flex-equal ms-2 me-5">
|
|
217
|
+
<table class="table table-flush fw-bold gy-1">
|
|
218
|
+
<tbody>
|
|
219
|
+
<tr>
|
|
220
|
+
<td class="text-muted min-w-125px w-125px">
|
|
221
|
+
First Name
|
|
222
|
+
</td>
|
|
223
|
+
<td class="text-gray-800 text-hover-primary">
|
|
224
|
+
{{ incoming.card_holder.first_name }}
|
|
225
|
+
</td>
|
|
226
|
+
</tr>
|
|
227
|
+
<tr>
|
|
228
|
+
<td class="text-muted min-w-125px w-125px">
|
|
229
|
+
Last Name
|
|
230
|
+
</td>
|
|
231
|
+
<td class="text-gray-800 text-hover-primary">
|
|
232
|
+
{{ incoming.card_holder.last_name }}
|
|
233
|
+
</td>
|
|
234
|
+
</tr>
|
|
235
|
+
<tr>
|
|
236
|
+
<td class="text-muted min-w-125px w-125px">Email</td>
|
|
237
|
+
<td class="text-gray-800 text-hover-primary">
|
|
238
|
+
{{ incoming.card_holder.email }}
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr>
|
|
242
|
+
<td class="text-muted min-w-125px w-125px">Address:</td>
|
|
243
|
+
<td class="text-gray-800 text-hover-primary">
|
|
244
|
+
{{ incoming.card_holder.billing_address }}<br />{{
|
|
245
|
+
incoming.card_holder.billing_zip
|
|
246
|
+
}}
|
|
247
|
+
</td>
|
|
248
|
+
</tr>
|
|
249
|
+
</tbody>
|
|
250
|
+
</table>
|
|
251
|
+
</div>
|
|
252
|
+
<!--end::Col--><!--begin::Col-->
|
|
253
|
+
<div class="flex-equal">
|
|
254
|
+
<table class="table table-flush fw-bold gy-1">
|
|
255
|
+
<tbody>
|
|
256
|
+
<tr>
|
|
257
|
+
<td class="text-muted min-w-125px w-125px">
|
|
258
|
+
Customer Id:
|
|
259
|
+
</td>
|
|
260
|
+
<td class="text-gray-800">
|
|
261
|
+
{{ incoming.card_holder.customer_id }}
|
|
262
|
+
</td>
|
|
263
|
+
</tr>
|
|
264
|
+
<tr>
|
|
265
|
+
<td class="text-muted min-w-125px w-125px">Rebill:</td>
|
|
266
|
+
<td class="text-gray-800">
|
|
267
|
+
{{ incoming.transaction["REBILL"] }}
|
|
268
|
+
</td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
271
|
+
<td class="text-muted min-w-125px w-125px">Phone:</td>
|
|
272
|
+
<td
|
|
273
|
+
class="text-gray-800"
|
|
274
|
+
v-if="incoming.card_holder.phone == ''"
|
|
275
|
+
>
|
|
276
|
+
Not Provided
|
|
277
|
+
</td>
|
|
278
|
+
<td class="text-gray-800" v-else>
|
|
279
|
+
{{ incoming.card_holder.phone }}
|
|
280
|
+
</td>
|
|
281
|
+
</tr>
|
|
282
|
+
<tr>
|
|
283
|
+
<td class="text-muted min-w-125px w-125px">
|
|
284
|
+
IP Address:
|
|
285
|
+
</td>
|
|
286
|
+
<td class="text-gray-800">
|
|
287
|
+
{{ incoming.card_holder.ip_address }}
|
|
288
|
+
</td>
|
|
289
|
+
</tr>
|
|
290
|
+
</tbody>
|
|
291
|
+
</table>
|
|
292
|
+
</div>
|
|
293
|
+
<!--end::Col-->
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
</template>
|
|
302
|
+
|
|
303
|
+
<script lang="ts">
|
|
304
|
+
import { defineComponent } from "vue";
|
|
305
|
+
|
|
306
|
+
export default defineComponent({
|
|
307
|
+
name: "nmi-details",
|
|
308
|
+
props: {
|
|
309
|
+
incoming: Object,
|
|
310
|
+
},
|
|
311
|
+
setup() {
|
|
312
|
+
return {};
|
|
313
|
+
},
|
|
314
|
+
});
|
|
315
|
+
</script>
|
|
316
|
+
|
|
@@ -0,0 +1,162 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="accordion-item">
|
|
3
|
+
<h2 class="accordion-header" id="kt_accordion_4_header_4">
|
|
4
|
+
<button
|
|
5
|
+
class="accordion-button fs-6 fw-normal collapsed"
|
|
6
|
+
type="button"
|
|
7
|
+
data-bs-toggle="collapse"
|
|
8
|
+
data-bs-target="#kt_accordion_4_body_4"
|
|
9
|
+
aria-expanded="false"
|
|
10
|
+
aria-controls="kt_accordion_4_body_4"
|
|
11
|
+
>
|
|
12
|
+
Transaction Details
|
|
13
|
+
</button>
|
|
14
|
+
</h2>
|
|
15
|
+
<div
|
|
16
|
+
id="kt_accordion_4_body_4"
|
|
17
|
+
class="accordion-collapse collapse"
|
|
18
|
+
aria-labelledby="kt_accordion_4_body_4"
|
|
19
|
+
data-bs-parent="#kt_accordion_1"
|
|
20
|
+
>
|
|
21
|
+
<div class="accordion-body pb-1">
|
|
22
|
+
<div class="d-flex flex-wrap py-2 fs-7">
|
|
23
|
+
<!-- Transaction Details Col 1 -->
|
|
24
|
+
<div class="flex-equal ms-2 me-5">
|
|
25
|
+
<table class="table table-flush fw-bold gy-1">
|
|
26
|
+
<tbody>
|
|
27
|
+
<tr>
|
|
28
|
+
<td class="text-muted w-auto">Transaction Id:</td>
|
|
29
|
+
<td class="text-gray-800">
|
|
30
|
+
{{ transaction.transaction_id }}
|
|
31
|
+
</td>
|
|
32
|
+
</tr>
|
|
33
|
+
<tr>
|
|
34
|
+
<td class="text-muted w-auto">Auth Code:</td>
|
|
35
|
+
<td class="text-gray-800">
|
|
36
|
+
{{ transaction.authorization_code }}
|
|
37
|
+
</td>
|
|
38
|
+
</tr>
|
|
39
|
+
<tr>
|
|
40
|
+
<td class="text-muted w-auto">CAVV:</td>
|
|
41
|
+
<td class="text-gray-800">
|
|
42
|
+
{{ transaction.cavv }}
|
|
43
|
+
</td>
|
|
44
|
+
</tr>
|
|
45
|
+
<tr>
|
|
46
|
+
<td class="text-muted w-auto">ECI:</td>
|
|
47
|
+
<td class="text-gray-800">
|
|
48
|
+
{{ transaction.eci }}
|
|
49
|
+
</td>
|
|
50
|
+
</tr>
|
|
51
|
+
<tr>
|
|
52
|
+
<td class="text-muted w-auto">Trans Date:</td>
|
|
53
|
+
<td class="text-gray-800">
|
|
54
|
+
{{
|
|
55
|
+
Array.isArray(transaction.action)
|
|
56
|
+
? transaction.action[0].date
|
|
57
|
+
: transaction.action.date
|
|
58
|
+
}}
|
|
59
|
+
</td>
|
|
60
|
+
</tr>
|
|
61
|
+
</tbody>
|
|
62
|
+
</table>
|
|
63
|
+
</div>
|
|
64
|
+
<!-- Transaction Details Col 2 -->
|
|
65
|
+
<div class="flex-equal">
|
|
66
|
+
<table class="table table-flush fw-bold gy-1">
|
|
67
|
+
<tbody>
|
|
68
|
+
<tr>
|
|
69
|
+
<td class="text-muted min-w-125px w-125px">Amount:</td>
|
|
70
|
+
<td class="text-gray-800 text-hover-primary">
|
|
71
|
+
${{
|
|
72
|
+
Array.isArray(transaction.action)
|
|
73
|
+
? transaction.action[0].amount
|
|
74
|
+
: transaction.action.amount
|
|
75
|
+
}}
|
|
76
|
+
</td>
|
|
77
|
+
</tr>
|
|
78
|
+
<tr>
|
|
79
|
+
<td class="text-muted min-w-125px w-125px">AVS:</td>
|
|
80
|
+
<td class="text-gray-800 text-hover-primary">
|
|
81
|
+
{{ transaction.avs_response }}
|
|
82
|
+
</td>
|
|
83
|
+
</tr>
|
|
84
|
+
<tr>
|
|
85
|
+
<td class="text-muted min-w-125px w-125px">CSC:</td>
|
|
86
|
+
<td class="text-gray-800 text-hover-primary">
|
|
87
|
+
{{ transaction.csc_response }}
|
|
88
|
+
</td>
|
|
89
|
+
</tr>
|
|
90
|
+
<tr>
|
|
91
|
+
<td class="text-muted min-w-125px w-125px">CC Bin:</td>
|
|
92
|
+
<td class="text-gray-800 text-hover-primary">
|
|
93
|
+
{{ transaction.cc_bin }}
|
|
94
|
+
</td>
|
|
95
|
+
</tr>
|
|
96
|
+
<tr>
|
|
97
|
+
<td class="text-muted min-w-125px w-125px">CC Number:</td>
|
|
98
|
+
<td class="text-gray-800 text-hover-primary">
|
|
99
|
+
{{ transaction.cc_number }}
|
|
100
|
+
</td>
|
|
101
|
+
</tr>
|
|
102
|
+
</tbody>
|
|
103
|
+
</table>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
109
|
+
</template>
|
|
110
|
+
|
|
111
|
+
<script lang="ts">
|
|
112
|
+
import { defineComponent, toRef, ref, computed, watch } from "vue";
|
|
113
|
+
|
|
114
|
+
export default defineComponent({
|
|
115
|
+
name: "nmi-details",
|
|
116
|
+
props: {
|
|
117
|
+
incoming: { type: Object, required: true },
|
|
118
|
+
},
|
|
119
|
+
setup(props) {
|
|
120
|
+
const incomingData = toRef(props, "incoming");
|
|
121
|
+
const cardholder = computed(() => props.incoming?.card_holder);
|
|
122
|
+
const card = computed(() => props.incoming?.card);
|
|
123
|
+
const actions = computed(() => props.incoming?.transaction?.action || []);
|
|
124
|
+
const orders = computed(() => props.incoming?.order_details?.items || []);
|
|
125
|
+
|
|
126
|
+
const transaction = computed(() => props.incoming.transaction);
|
|
127
|
+
|
|
128
|
+
const lastAction = computed(() => {
|
|
129
|
+
const actionArray = actions.value;
|
|
130
|
+
if (actionArray.length > 0) {
|
|
131
|
+
// Ensure there is at least one element
|
|
132
|
+
return actionArray[actionArray.length - 1].response_text; // Access the last element's response_text
|
|
133
|
+
}
|
|
134
|
+
return null; // Return null if no actions are present
|
|
135
|
+
});
|
|
136
|
+
const formattedPhone = computed(() => {
|
|
137
|
+
const phone = cardholder.value.phone || "";
|
|
138
|
+
if (phone.length === 10) {
|
|
139
|
+
return `1 (${phone.slice(0, 3)}) ${phone.slice(3, 6)}-${phone.slice(
|
|
140
|
+
6
|
|
141
|
+
)}`;
|
|
142
|
+
}
|
|
143
|
+
return phone; // Return unformatted if not 10 digits
|
|
144
|
+
});
|
|
145
|
+
return {
|
|
146
|
+
lastAction,
|
|
147
|
+
formattedPhone,
|
|
148
|
+
card,
|
|
149
|
+
incomingData,
|
|
150
|
+
transaction,
|
|
151
|
+
actions,
|
|
152
|
+
orders,
|
|
153
|
+
cardholder,
|
|
154
|
+
};
|
|
155
|
+
},
|
|
156
|
+
});
|
|
157
|
+
</script>
|
|
158
|
+
|
|
159
|
+
<style scoped>
|
|
160
|
+
/* Add any scoped styles here */
|
|
161
|
+
</style>
|
|
162
|
+
|