@miden-npm/angular 0.0.17 → 0.0.18
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/buzapay-checkout/index.d.ts +111 -10
- package/fesm2022/miden-npm-angular-buzapay-checkout.mjs +666 -26
- package/fesm2022/miden-npm-angular-buzapay-checkout.mjs.map +1 -1
- package/fesm2022/miden-npm-angular.mjs +277 -7
- package/fesm2022/miden-npm-angular.mjs.map +1 -1
- package/index.d.ts +178 -3
- package/package.json +32 -22
|
@@ -1,38 +1,380 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import {
|
|
2
|
+
import { EventEmitter, Output, Input, ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@miden-npm/angular';
|
|
4
|
-
import { ButtonComponent, InputComponent, SelectComponent, LabelInfoComponent, CopyComponent, ImageComponent, CurrencyAmountComponent, IconArrowSwapComponent,
|
|
5
|
-
import * as i2 from '@angular/
|
|
6
|
-
import {
|
|
4
|
+
import { getValidationErrorMessage, cardType, checkObjectTruthy, ButtonComponent, InputComponent, SelectComponent, formatAmount, LabelInfoComponent, CopyComponent, ImageComponent, CurrencyAmountComponent, IconArrowSwapComponent, RadioGroupComponent, SuccessComponent, CardComponent, IconLoaderComponent, InputErrorComponent } from '@miden-npm/angular';
|
|
5
|
+
import * as i2 from '@angular/forms';
|
|
6
|
+
import { FormGroup, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
|
|
7
7
|
import { tap, finalize } from 'rxjs';
|
|
8
|
+
import * as i2$1 from '@angular/common';
|
|
9
|
+
import { CommonModule } from '@angular/common';
|
|
8
10
|
|
|
9
11
|
class PayByCardComponent {
|
|
12
|
+
resources;
|
|
13
|
+
cdr;
|
|
14
|
+
checkout;
|
|
15
|
+
encryptService;
|
|
16
|
+
constructor(resources, cdr, checkout, encryptService) {
|
|
17
|
+
this.resources = resources;
|
|
18
|
+
this.cdr = cdr;
|
|
19
|
+
this.checkout = checkout;
|
|
20
|
+
this.encryptService = encryptService;
|
|
21
|
+
}
|
|
22
|
+
secretKey = '';
|
|
23
|
+
environment = '';
|
|
24
|
+
paymentObject = {
|
|
25
|
+
merchantName: '',
|
|
26
|
+
amount: 0,
|
|
27
|
+
currency: '',
|
|
28
|
+
email: '',
|
|
29
|
+
phoneNumber: '',
|
|
30
|
+
narration: '',
|
|
31
|
+
redirectUrl: '',
|
|
32
|
+
};
|
|
33
|
+
paymentAuthorized = new EventEmitter();
|
|
34
|
+
loading = false;
|
|
35
|
+
loadingCountries = false;
|
|
36
|
+
loadingStates = false;
|
|
37
|
+
isMakingPayment = false;
|
|
38
|
+
cardType = '';
|
|
39
|
+
message = '';
|
|
40
|
+
transactionReference = '';
|
|
41
|
+
countries = [];
|
|
42
|
+
countryStates = [];
|
|
10
43
|
formIndex = 0;
|
|
11
44
|
setFormIndex(index) {
|
|
12
45
|
this.formIndex = index;
|
|
13
46
|
}
|
|
14
|
-
|
|
15
|
-
|
|
47
|
+
billingForm = new FormGroup({
|
|
48
|
+
address1: new FormControl('', [Validators.required]),
|
|
49
|
+
address2: new FormControl(''),
|
|
50
|
+
postalCode: new FormControl('', [Validators.required]),
|
|
51
|
+
state: new FormControl('', [Validators.required]),
|
|
52
|
+
city: new FormControl('', [Validators.required]),
|
|
53
|
+
country: new FormControl('', [Validators.required]),
|
|
54
|
+
emailAddress: new FormControl('', [Validators.required, Validators.email]),
|
|
55
|
+
phoneNumber: new FormControl('', [Validators.required]),
|
|
56
|
+
});
|
|
57
|
+
payForm = new FormGroup({
|
|
58
|
+
customerName: new FormControl('', [Validators.required]),
|
|
59
|
+
cardNo: new FormControl('', [Validators.required]),
|
|
60
|
+
expireDate: new FormControl('', [Validators.required]),
|
|
61
|
+
cvv: new FormControl('', [Validators.required]),
|
|
62
|
+
cardPin: new FormControl(''), // Only required for Verve cards
|
|
63
|
+
});
|
|
64
|
+
getError(formKey, controlName, label) {
|
|
65
|
+
const control = formKey === 'billing' ? this.billingForm.get(controlName) : this.payForm.get(controlName);
|
|
66
|
+
return getValidationErrorMessage(control, label);
|
|
67
|
+
}
|
|
68
|
+
cardNumberInputHandler(event) {
|
|
69
|
+
this.cardType = cardType(event);
|
|
70
|
+
this.updatePinValidation();
|
|
71
|
+
}
|
|
72
|
+
updatePinValidation() {
|
|
73
|
+
const cardPinControl = this.payForm.get('cardPin');
|
|
74
|
+
if (this.cardType === 'Verve') {
|
|
75
|
+
cardPinControl?.setValidators([Validators.required]);
|
|
76
|
+
}
|
|
77
|
+
else {
|
|
78
|
+
cardPinControl?.clearValidators();
|
|
79
|
+
}
|
|
80
|
+
cardPinControl?.updateValueAndValidity();
|
|
81
|
+
}
|
|
82
|
+
async getAllCountries() {
|
|
83
|
+
this.loadingCountries = true;
|
|
84
|
+
this.cdr.markForCheck();
|
|
85
|
+
this.resources
|
|
86
|
+
.getCountries(this.environment, this.secretKey)
|
|
87
|
+
.pipe(tap((res) => {
|
|
88
|
+
if (res?.isSuccessful) {
|
|
89
|
+
this.countries = (res.data ?? []).map((c) => {
|
|
90
|
+
return { label: c.countryName, value: c.iso3 };
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
}), finalize(() => {
|
|
94
|
+
this.loadingCountries = false;
|
|
95
|
+
this.cdr.markForCheck();
|
|
96
|
+
}))
|
|
97
|
+
.subscribe();
|
|
98
|
+
}
|
|
99
|
+
async getCountryStates(countryIso3) {
|
|
100
|
+
this.loadingStates = true;
|
|
101
|
+
this.cdr.markForCheck();
|
|
102
|
+
this.resources
|
|
103
|
+
.getCountryStates(countryIso3, this.environment, this.secretKey)
|
|
104
|
+
.pipe(tap((res) => {
|
|
105
|
+
if (res?.isSuccessful) {
|
|
106
|
+
this.countryStates = (res.data ?? []).map((s) => {
|
|
107
|
+
return { label: s.name, value: s.name };
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
}), finalize(() => {
|
|
111
|
+
this.loadingStates = false;
|
|
112
|
+
this.cdr.markForCheck();
|
|
113
|
+
}))
|
|
114
|
+
.subscribe();
|
|
115
|
+
}
|
|
116
|
+
async generatePaymentLinkHandler() {
|
|
117
|
+
if (!this.secretKey) {
|
|
118
|
+
return (this.message = 'Secret key is required.');
|
|
119
|
+
}
|
|
120
|
+
if (!checkObjectTruthy(this.paymentObject)) {
|
|
121
|
+
return (this.message = 'Kindly ensure you are passing all the required data.');
|
|
122
|
+
}
|
|
123
|
+
this.loading = true;
|
|
124
|
+
this.cdr.markForCheck();
|
|
125
|
+
this.checkout
|
|
126
|
+
.createPaymentLink(this.paymentObject, this.environment, this.secretKey)
|
|
127
|
+
.pipe(tap((res) => {
|
|
128
|
+
if (res?.isSuccessful) {
|
|
129
|
+
this.message = 'Payment link created successfully';
|
|
130
|
+
this.transactionReference = res.data.transactionReference;
|
|
131
|
+
}
|
|
132
|
+
else {
|
|
133
|
+
this.message = 'Failed to create payment link';
|
|
134
|
+
}
|
|
135
|
+
}), finalize(() => {
|
|
136
|
+
this.loading = false;
|
|
137
|
+
this.cdr.markForCheck();
|
|
138
|
+
}))
|
|
139
|
+
.subscribe();
|
|
140
|
+
}
|
|
141
|
+
async proceedHandler() {
|
|
142
|
+
if (this.formIndex === 0) {
|
|
143
|
+
if (this.billingForm && this.billingForm.valid) {
|
|
144
|
+
this.checkout.setBillingInfo({ ...this.billingForm.value });
|
|
145
|
+
this.setFormIndex(1);
|
|
146
|
+
}
|
|
147
|
+
else {
|
|
148
|
+
this.billingForm.markAllAsTouched();
|
|
149
|
+
}
|
|
150
|
+
}
|
|
151
|
+
else {
|
|
152
|
+
if (this.payForm && this.payForm.valid) {
|
|
153
|
+
try {
|
|
154
|
+
this.isMakingPayment = true;
|
|
155
|
+
// Create card details object for encryption
|
|
156
|
+
const cardDetails = {
|
|
157
|
+
pan: this.payForm.value.cardNo ?? '',
|
|
158
|
+
expiryDate: this.payForm.value.expireDate ?? '',
|
|
159
|
+
cvv: this.payForm.value.cvv ?? '',
|
|
160
|
+
cardScheme: this.cardType,
|
|
161
|
+
nameOnCard: this.payForm.value.customerName ?? '',
|
|
162
|
+
...(this.cardType === 'Verve' && { pin: this.payForm.value.cardPin ?? '' }),
|
|
163
|
+
};
|
|
164
|
+
// Get billing details from the form control
|
|
165
|
+
const billingDetails = {
|
|
166
|
+
address2: this.billingForm.value.address2 ?? '',
|
|
167
|
+
address1: this.billingForm.value.address1 ?? '',
|
|
168
|
+
postalCode: this.billingForm.value.postalCode ?? '',
|
|
169
|
+
state: this.billingForm.value.state ?? '',
|
|
170
|
+
city: this.billingForm.value.city ?? '',
|
|
171
|
+
country: this.billingForm.value.country ?? '',
|
|
172
|
+
emailAddress: this.billingForm.value.emailAddress ?? '',
|
|
173
|
+
phoneNumber: this.billingForm.value.phoneNumber ?? '',
|
|
174
|
+
};
|
|
175
|
+
// Encrypt card details using payload encryption method
|
|
176
|
+
const encryptedCardDetails = this.encryptService.encryptPayload(this.environment, cardDetails);
|
|
177
|
+
// Test: Decrypt to verify encryption works
|
|
178
|
+
const decryptedTest = this.encryptService.decryptPayload(this.environment, encryptedCardDetails.requestParam);
|
|
179
|
+
const payload = {
|
|
180
|
+
customerId: this.paymentObject?.email || this.payForm.value.customerName || '',
|
|
181
|
+
amount: this.paymentObject?.amount.toString(),
|
|
182
|
+
currency: this.paymentObject?.currency || 'USD',
|
|
183
|
+
narration: this.paymentObject?.narration || 'Test transaction',
|
|
184
|
+
encryptedCardDetails: encryptedCardDetails.requestParam, // Use the encrypted card details
|
|
185
|
+
billingDetails: billingDetails,
|
|
186
|
+
redirectUrl: this.paymentObject?.redirectUrl || '',
|
|
187
|
+
paymentReference: this.transactionReference,
|
|
188
|
+
isCheckout: true,
|
|
189
|
+
};
|
|
190
|
+
this.checkout
|
|
191
|
+
.authorizeCardPayment(this.environment, {
|
|
192
|
+
...payload,
|
|
193
|
+
merchantId: this.secretKey,
|
|
194
|
+
})
|
|
195
|
+
.subscribe({
|
|
196
|
+
next: async (response) => {
|
|
197
|
+
let processedResponse = response;
|
|
198
|
+
// Check if response is encrypted (has responseParam)
|
|
199
|
+
if (response?.responseParam) {
|
|
200
|
+
// Decrypt the response
|
|
201
|
+
processedResponse = this.encryptService.decryptPayload(this.environment, response.responseParam);
|
|
202
|
+
}
|
|
203
|
+
if (processedResponse?.isSuccessful) {
|
|
204
|
+
// Check for 3DS authentication requirement
|
|
205
|
+
if (processedResponse.threeDsInteractionRequired === true) {
|
|
206
|
+
// Store 3DS data for the authentication page
|
|
207
|
+
const threeDsData = {
|
|
208
|
+
transactionReference: processedResponse.transactionReference,
|
|
209
|
+
threeDsHtml: processedResponse.threeDsHtml,
|
|
210
|
+
amount: processedResponse.amount,
|
|
211
|
+
responseMessage: processedResponse.responseMessage,
|
|
212
|
+
// Pass all 3DS details
|
|
213
|
+
paReq: processedResponse.threeDsHtml?.paReq,
|
|
214
|
+
termUrl: processedResponse.threeDsHtml?.termUrl,
|
|
215
|
+
action: processedResponse.threeDsHtml?.action,
|
|
216
|
+
acsUrl: processedResponse.threeDsHtml?.acsUrl,
|
|
217
|
+
md: processedResponse.threeDsHtml?.md,
|
|
218
|
+
};
|
|
219
|
+
// Store 3DS data in localStorage for the new tab
|
|
220
|
+
localStorage.setItem('threeDsData', JSON.stringify(threeDsData));
|
|
221
|
+
// Open 3DS authentication page in a new tab
|
|
222
|
+
const threeDsUrl = `${window.location.origin}/account/three-ds-confirm`;
|
|
223
|
+
window.open(threeDsUrl, '_blank', 'noopener,noreferrer');
|
|
224
|
+
this.message =
|
|
225
|
+
'3D Secure authentication opened in new tab. Please complete the verification';
|
|
226
|
+
this.isMakingPayment = false;
|
|
227
|
+
return;
|
|
228
|
+
}
|
|
229
|
+
// Fallback check: if response message indicates 3DS is required
|
|
230
|
+
if (processedResponse.responseMessage === 'Payer Interaction Required' &&
|
|
231
|
+
processedResponse.threeDsHtml) {
|
|
232
|
+
// Store 3DS data for the authentication page
|
|
233
|
+
const threeDsData = {
|
|
234
|
+
transactionReference: processedResponse.transactionReference,
|
|
235
|
+
threeDsHtml: processedResponse.threeDsHtml,
|
|
236
|
+
amount: processedResponse.amount,
|
|
237
|
+
responseMessage: processedResponse.responseMessage,
|
|
238
|
+
// Pass all 3DS details
|
|
239
|
+
paReq: processedResponse.threeDsHtml?.paReq,
|
|
240
|
+
termUrl: processedResponse.threeDsHtml?.termUrl,
|
|
241
|
+
action: processedResponse.threeDsHtml?.action,
|
|
242
|
+
acsUrl: processedResponse.threeDsHtml?.acsUrl,
|
|
243
|
+
md: processedResponse.threeDsHtml?.md,
|
|
244
|
+
};
|
|
245
|
+
// Store 3DS data in localStorage for the new tab
|
|
246
|
+
localStorage.setItem('threeDsData', JSON.stringify(threeDsData));
|
|
247
|
+
// Open 3DS authentication page in a new tab
|
|
248
|
+
const threeDsUrl = `${window.location.origin}/account/three-ds-confirm`;
|
|
249
|
+
window.open(threeDsUrl, '_blank', 'noopener,noreferrer');
|
|
250
|
+
this.message =
|
|
251
|
+
'3D Secure authentication opened in new tab. Please complete the verification';
|
|
252
|
+
this.isMakingPayment = false;
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
255
|
+
// Emit the transaction reference to parent component
|
|
256
|
+
if (processedResponse.transactionReference &&
|
|
257
|
+
processedResponse.transactionReference.trim() !== '') {
|
|
258
|
+
this.paymentAuthorized.emit(processedResponse.transactionReference);
|
|
259
|
+
}
|
|
260
|
+
this.message = 'Card payment authorized successfully';
|
|
261
|
+
// Handle legacy 3DS logic for backward compatibility
|
|
262
|
+
// if (processedResponse.provider === 'myRoute2') {
|
|
263
|
+
// if (processedResponse.requires3DS === true) {
|
|
264
|
+
// this.router.navigateByUrl('account/visa-card-payment-confirm');
|
|
265
|
+
// } else {
|
|
266
|
+
// if (processedResponse.responseCode === 'T00') {
|
|
267
|
+
// } else if (processedResponse.responseCode === '000') {
|
|
268
|
+
// this.message = 'Please confirm transaction !!';
|
|
269
|
+
// } else {
|
|
270
|
+
// this.message = processedResponse.responseMessage;
|
|
271
|
+
// }
|
|
272
|
+
// }
|
|
273
|
+
// } else if (processedResponse.provider === 'myRoute1') {
|
|
274
|
+
// if (processedResponse.requires3DS === true) {
|
|
275
|
+
// this.router.navigateByUrl('account/visa-card-payment-confirm2');
|
|
276
|
+
// }
|
|
277
|
+
// }
|
|
278
|
+
this.isMakingPayment = false;
|
|
279
|
+
}
|
|
280
|
+
else {
|
|
281
|
+
this.isMakingPayment = false;
|
|
282
|
+
this.message = processedResponse.responseMessage || 'Payment failed';
|
|
283
|
+
}
|
|
284
|
+
},
|
|
285
|
+
error: (err) => {
|
|
286
|
+
this.isMakingPayment = false;
|
|
287
|
+
if (err.error?.responseParam) {
|
|
288
|
+
// Decrypt error response
|
|
289
|
+
const decryptedErrorResponse = this.encryptService.decryptPayload(this.environment, err.error.responseParam);
|
|
290
|
+
this.message = decryptedErrorResponse.responseMessage || 'Payment failed';
|
|
291
|
+
}
|
|
292
|
+
else {
|
|
293
|
+
this.message = err.error.responseMessage || err.error.message || 'Payment failed';
|
|
294
|
+
}
|
|
295
|
+
},
|
|
296
|
+
});
|
|
297
|
+
}
|
|
298
|
+
catch (error) {
|
|
299
|
+
this.isMakingPayment = false;
|
|
300
|
+
this.message = 'An unexpected error occurred';
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
else {
|
|
304
|
+
this.payForm.markAllAsTouched();
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
}
|
|
308
|
+
async ngOnInit() {
|
|
309
|
+
await this.generatePaymentLinkHandler();
|
|
310
|
+
await this.getAllCountries();
|
|
311
|
+
}
|
|
312
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByCardComponent, deps: [{ token: i1.ResourceService }, { token: i0.ChangeDetectorRef }, { token: i1.CheckoutService }, { token: i1.EncryptService }], target: i0.ɵɵFactoryTarget.Component });
|
|
313
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByCardComponent, isStandalone: true, selector: "pay-by-card", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n <!-- Billing Details -->\n @if (formIndex === 0) {\n <form [formGroup]=\"billingForm\">\n <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n <div class=\"col-span-2\">\n <base-input\n formControlName=\"address1\"\n label=\"Address Line 1\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n ></base-input>\n </div>\n <div class=\"col-span-2\">\n <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n </div>\n <base-select\n formControlName=\"country\"\n label=\"Select Country\"\n [required]=\"true\"\n [options]=\"countries\"\n [loading]=\"loadingCountries\"\n [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n (onSelectChange)=\"getCountryStates($event)\"\n ></base-select>\n <base-select\n formControlName=\"state\"\n label=\"Select State\"\n [required]=\"true\"\n [options]=\"countryStates\"\n [loading]=\"loadingStates\"\n [validationError]=\"getError('billing', 'state', 'State') || ''\"\n ></base-select>\n <base-input\n formControlName=\"city\"\n label=\"City\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'city', 'City') || ''\"\n ></base-input>\n <base-input\n formControlName=\"postalCode\"\n label=\"Postal Code\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n ></base-input>\n <base-input\n formControlName=\"emailAddress\"\n label=\"Email\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n ></base-input>\n <base-input\n formControlName=\"phoneNumber\"\n label=\"Phone Number\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n ></base-input>\n </div>\n </form>\n }\n\n <!-- Card Details -->\n @if (formIndex === 1) {\n <form [formGroup]=\"payForm\">\n <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n <div class=\"col-span-2\">\n <base-input\n formControlName=\"customerName\"\n label=\"Card Name\"\n [required]=\"true\"\n [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n ></base-input>\n </div>\n <div class=\"col-span-2\">\n <base-input\n formControlName=\"cardNo\"\n label=\"Card Number\"\n [required]=\"true\"\n mask=\"0000 0000 0000 0000\"\n placeholder=\"0000 0000 0000 0000\"\n [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n (onInputChange)=\"cardNumberInputHandler($event)\"\n ></base-input>\n </div>\n <base-input\n formControlName=\"expireDate\"\n label=\"Expiry Date\"\n [required]=\"true\"\n mask=\"00/00\"\n placeholder=\"00/00\"\n [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n ></base-input>\n <base-input\n formControlName=\"cvv\"\n label=\"CVV\"\n [required]=\"true\"\n mask=\"000\"\n placeholder=\"000\"\n [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n ></base-input>\n\n @if (cardType === 'Verve') {\n <base-input\n formControlName=\"cardPin\"\n label=\"Card Pin\"\n type=\"password\"\n placeholder=\"0000\"\n mask=\"0000\"\n [required]=\"true\"\n [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n ></base-input>\n <div class=\"text-sm text-blue-600 mb-4\">\n <i class=\"fas fa-info-circle mr-1\"></i>\n Pin is required for Verve cards\n </div>\n }\n </div>\n </form>\n }\n\n <base-button\n [label]=\"formIndex === 0 ? 'Proceed' : 'Pay'\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"proceedHandler()\"\n ></base-button>\n</div>\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon"], outputs: ["onInputChange", "onInputBlur"] }, { kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
16
314
|
}
|
|
17
315
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByCardComponent, decorators: [{
|
|
18
316
|
type: Component,
|
|
19
|
-
args: [{ selector: 'pay-by-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputComponent, SelectComponent], template: "<div class=\"flex flex-col gap-6\">\n <!-- Billing Details -->\n @if (formIndex === 0) {\n <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n
|
|
20
|
-
}] }
|
|
317
|
+
args: [{ selector: 'pay-by-card', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [ButtonComponent, InputComponent, SelectComponent, ReactiveFormsModule], template: "<div class=\"flex flex-col gap-6\">\n <!-- Billing Details -->\n @if (formIndex === 0) {\n <form [formGroup]=\"billingForm\">\n <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\">\n <div class=\"col-span-2\">\n <base-input\n formControlName=\"address1\"\n label=\"Address Line 1\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'address1', 'Address Line 1') || ''\"\n ></base-input>\n </div>\n <div class=\"col-span-2\">\n <base-input formControlName=\"address2\" label=\"Address Line 2\"></base-input>\n </div>\n <base-select\n formControlName=\"country\"\n label=\"Select Country\"\n [required]=\"true\"\n [options]=\"countries\"\n [loading]=\"loadingCountries\"\n [validationError]=\"getError('billing', 'country', 'Country') || ''\"\n (onSelectChange)=\"getCountryStates($event)\"\n ></base-select>\n <base-select\n formControlName=\"state\"\n label=\"Select State\"\n [required]=\"true\"\n [options]=\"countryStates\"\n [loading]=\"loadingStates\"\n [validationError]=\"getError('billing', 'state', 'State') || ''\"\n ></base-select>\n <base-input\n formControlName=\"city\"\n label=\"City\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'city', 'City') || ''\"\n ></base-input>\n <base-input\n formControlName=\"postalCode\"\n label=\"Postal Code\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'postalCode', 'Postal Code') || ''\"\n ></base-input>\n <base-input\n formControlName=\"emailAddress\"\n label=\"Email\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'emailAddress', 'Email Address') || ''\"\n ></base-input>\n <base-input\n formControlName=\"phoneNumber\"\n label=\"Phone Number\"\n [required]=\"true\"\n [validationError]=\"getError('billing', 'phoneNumber', 'Phone Number') || ''\"\n ></base-input>\n </div>\n </form>\n }\n\n <!-- Card Details -->\n @if (formIndex === 1) {\n <form [formGroup]=\"payForm\">\n <div class=\"grid grid-cols-2 gap-6 overflow-y-auto\" style=\"max-height: 320px\">\n <div class=\"col-span-2\">\n <base-input\n formControlName=\"customerName\"\n label=\"Card Name\"\n [required]=\"true\"\n [validationError]=\"getError('pay', 'customerName', 'Customer Name') || ''\"\n ></base-input>\n </div>\n <div class=\"col-span-2\">\n <base-input\n formControlName=\"cardNo\"\n label=\"Card Number\"\n [required]=\"true\"\n mask=\"0000 0000 0000 0000\"\n placeholder=\"0000 0000 0000 0000\"\n [validationError]=\"getError('pay', 'cardNo', 'Card Number') || ''\"\n (onInputChange)=\"cardNumberInputHandler($event)\"\n ></base-input>\n </div>\n <base-input\n formControlName=\"expireDate\"\n label=\"Expiry Date\"\n [required]=\"true\"\n mask=\"00/00\"\n placeholder=\"00/00\"\n [validationError]=\"getError('pay', 'expireDate', 'Expiry Date') || ''\"\n ></base-input>\n <base-input\n formControlName=\"cvv\"\n label=\"CVV\"\n [required]=\"true\"\n mask=\"000\"\n placeholder=\"000\"\n [validationError]=\"getError('pay', 'cvv', 'CVV') || ''\"\n ></base-input>\n\n @if (cardType === 'Verve') {\n <base-input\n formControlName=\"cardPin\"\n label=\"Card Pin\"\n type=\"password\"\n placeholder=\"0000\"\n mask=\"0000\"\n [required]=\"true\"\n [validationError]=\"getError('pay', 'cardPin', 'Card Pin') || ''\"\n ></base-input>\n <div class=\"text-sm text-blue-600 mb-4\">\n <i class=\"fas fa-info-circle mr-1\"></i>\n Pin is required for Verve cards\n </div>\n }\n </div>\n </form>\n }\n\n <base-button\n [label]=\"formIndex === 0 ? 'Proceed' : 'Pay'\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"proceedHandler()\"\n ></base-button>\n</div>\n" }]
|
|
318
|
+
}], ctorParameters: () => [{ type: i1.ResourceService }, { type: i0.ChangeDetectorRef }, { type: i1.CheckoutService }, { type: i1.EncryptService }], propDecorators: { secretKey: [{
|
|
319
|
+
type: Input
|
|
320
|
+
}], environment: [{
|
|
321
|
+
type: Input
|
|
322
|
+
}], paymentObject: [{
|
|
323
|
+
type: Input
|
|
324
|
+
}], paymentAuthorized: [{
|
|
325
|
+
type: Output
|
|
326
|
+
}] } });
|
|
21
327
|
|
|
22
328
|
class PayByTransferComponent {
|
|
329
|
+
checkout;
|
|
23
330
|
cdr;
|
|
331
|
+
constructor(checkout, cdr) {
|
|
332
|
+
this.checkout = checkout;
|
|
333
|
+
this.cdr = cdr;
|
|
334
|
+
}
|
|
335
|
+
secretKey = '';
|
|
336
|
+
environment = '';
|
|
337
|
+
paymentObject = {
|
|
338
|
+
merchantName: '',
|
|
339
|
+
amount: 0,
|
|
340
|
+
currency: '',
|
|
341
|
+
email: '',
|
|
342
|
+
phoneNumber: '',
|
|
343
|
+
narration: '',
|
|
344
|
+
redirectUrl: '',
|
|
345
|
+
};
|
|
346
|
+
paymentAuthorized = new EventEmitter();
|
|
347
|
+
paymentUsed = new EventEmitter();
|
|
348
|
+
message = '';
|
|
349
|
+
generatingLink = false;
|
|
350
|
+
isMakingPayment = false;
|
|
351
|
+
isFetchingPaymentDetails = false;
|
|
352
|
+
isConfirmCall = false;
|
|
353
|
+
paymentMade = false;
|
|
354
|
+
isPaymentConfirmed = false;
|
|
355
|
+
paymentAccountDetails = null;
|
|
356
|
+
paymentReferenceDetails = null;
|
|
357
|
+
transactionReference = '';
|
|
358
|
+
paymentReferenceStatus = '';
|
|
24
359
|
countDownTime = '';
|
|
25
360
|
remainingSeconds = 30 * 60;
|
|
26
361
|
intervalId = null;
|
|
27
|
-
constructor(cdr) {
|
|
28
|
-
this.cdr = cdr;
|
|
29
|
-
}
|
|
30
362
|
updateDisplay() {
|
|
31
363
|
const minutes = Math.floor(this.remainingSeconds / 60);
|
|
32
364
|
const seconds = this.remainingSeconds % 60;
|
|
33
365
|
this.countDownTime = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
|
|
34
366
|
this.cdr.markForCheck(); // 👈 notify OnPush to re-render
|
|
35
367
|
}
|
|
368
|
+
transferForm = new FormGroup({
|
|
369
|
+
customerName: new FormControl('', [Validators.required]),
|
|
370
|
+
});
|
|
371
|
+
getError(controlName, label) {
|
|
372
|
+
const control = this.transferForm.get(controlName);
|
|
373
|
+
return getValidationErrorMessage(control, label);
|
|
374
|
+
}
|
|
375
|
+
get formatAmountHandler() {
|
|
376
|
+
return formatAmount(this.paymentObject.amount, this.paymentObject.currency);
|
|
377
|
+
}
|
|
36
378
|
startTimer() {
|
|
37
379
|
this.updateDisplay();
|
|
38
380
|
this.intervalId = setInterval(() => {
|
|
@@ -49,6 +391,108 @@ class PayByTransferComponent {
|
|
|
49
391
|
this.updateDisplay();
|
|
50
392
|
}, 1000);
|
|
51
393
|
}
|
|
394
|
+
async generatePaymentLinkHandler() {
|
|
395
|
+
if (!this.secretKey) {
|
|
396
|
+
return (this.message = 'Secret key is required.');
|
|
397
|
+
}
|
|
398
|
+
if (!checkObjectTruthy(this.paymentObject)) {
|
|
399
|
+
return (this.message = 'Kindly ensure you are passing all the required data.');
|
|
400
|
+
}
|
|
401
|
+
this.generatingLink = true;
|
|
402
|
+
this.cdr.markForCheck();
|
|
403
|
+
this.checkout
|
|
404
|
+
.createPaymentLink(this.paymentObject, this.environment, this.secretKey)
|
|
405
|
+
.pipe(tap((res) => {
|
|
406
|
+
if (res?.isSuccessful) {
|
|
407
|
+
this.message = 'Payment link created successfully';
|
|
408
|
+
this.transactionReference = res.data.transactionReference;
|
|
409
|
+
}
|
|
410
|
+
else {
|
|
411
|
+
this.message = 'Failed to create payment link';
|
|
412
|
+
}
|
|
413
|
+
}), finalize(() => {
|
|
414
|
+
this.generatingLink = false;
|
|
415
|
+
this.cdr.markForCheck();
|
|
416
|
+
}))
|
|
417
|
+
.subscribe();
|
|
418
|
+
}
|
|
419
|
+
async payHandler() {
|
|
420
|
+
if (this.transferForm && this.transferForm.valid) {
|
|
421
|
+
const payload = {
|
|
422
|
+
paymentReference: this.transactionReference,
|
|
423
|
+
channel: 'virtual_account',
|
|
424
|
+
customerName: this.transferForm.value.customerName ?? '',
|
|
425
|
+
merchantId: this.secretKey,
|
|
426
|
+
};
|
|
427
|
+
this.isMakingPayment = true;
|
|
428
|
+
await this.checkout.generatePaymentAccount(this.environment, payload).subscribe({
|
|
429
|
+
next: async (response) => {
|
|
430
|
+
if (response?.isSuccessful) {
|
|
431
|
+
this.paymentAccountDetails = response.data;
|
|
432
|
+
this.startTimer();
|
|
433
|
+
this.message = 'Virtual account generated successfully for payment.';
|
|
434
|
+
this.isMakingPayment = false;
|
|
435
|
+
}
|
|
436
|
+
},
|
|
437
|
+
error: (err) => {
|
|
438
|
+
this.isMakingPayment = false;
|
|
439
|
+
this.message = err.error.responseMessage || err.error.message;
|
|
440
|
+
},
|
|
441
|
+
});
|
|
442
|
+
}
|
|
443
|
+
else {
|
|
444
|
+
this.transferForm?.markAllAsTouched();
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
async getReferenceDetails() {
|
|
448
|
+
this.isFetchingPaymentDetails = true;
|
|
449
|
+
await this.checkout
|
|
450
|
+
.getPaymentReferenceDetails(this.environment, this.transactionReference)
|
|
451
|
+
.subscribe({
|
|
452
|
+
next: async (response) => {
|
|
453
|
+
if (response?.isSuccessful) {
|
|
454
|
+
this.paymentReferenceDetails = response.data;
|
|
455
|
+
// Check if payment has been made (paymentStatus is "Payment Received")
|
|
456
|
+
if (response.data?.paymentStatus === 'Payment Received') {
|
|
457
|
+
this.paymentMade = true;
|
|
458
|
+
}
|
|
459
|
+
if (response.data?.finalTransactionStatus === null ||
|
|
460
|
+
response.data?.paymentStatus === null) {
|
|
461
|
+
if (this.isConfirmCall) {
|
|
462
|
+
this.message = 'Transaction not confirmed !!';
|
|
463
|
+
}
|
|
464
|
+
// Only set to pending if payment hasn't been confirmed locally or made locally
|
|
465
|
+
if (!this.isPaymentConfirmed && !this.paymentMade) {
|
|
466
|
+
this.paymentReferenceStatus = 'pending';
|
|
467
|
+
}
|
|
468
|
+
else {
|
|
469
|
+
this.paymentAuthorized.emit(this.transactionReference);
|
|
470
|
+
this.paymentReferenceStatus = 'confirmed';
|
|
471
|
+
}
|
|
472
|
+
}
|
|
473
|
+
else if (response.data?.finalTransactionStatus === 'Success' ||
|
|
474
|
+
response.data?.paymentStatus === 'Received' ||
|
|
475
|
+
response.data?.paymentStatus === 'Payment Received') {
|
|
476
|
+
this.paymentAuthorized.emit(this.transactionReference);
|
|
477
|
+
this.message = 'Transaction confirmed !!';
|
|
478
|
+
this.paymentReferenceStatus = 'confirmed';
|
|
479
|
+
this.isPaymentConfirmed = true;
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
else if (!response?.isSuccessful && response?.responseCode === '119') {
|
|
483
|
+
this.paymentUsed.emit(this.transactionReference);
|
|
484
|
+
this.paymentReferenceStatus = 'used';
|
|
485
|
+
this.message = response.responseMessage;
|
|
486
|
+
}
|
|
487
|
+
this.isFetchingPaymentDetails = false;
|
|
488
|
+
},
|
|
489
|
+
error: (err) => {
|
|
490
|
+
this.paymentReferenceStatus = '';
|
|
491
|
+
this.isFetchingPaymentDetails = false;
|
|
492
|
+
this.message = err.error.responseMessage || err.error.message;
|
|
493
|
+
},
|
|
494
|
+
});
|
|
495
|
+
}
|
|
52
496
|
ngOnInit() {
|
|
53
497
|
this.startTimer();
|
|
54
498
|
}
|
|
@@ -58,26 +502,210 @@ class PayByTransferComponent {
|
|
|
58
502
|
this.intervalId = null;
|
|
59
503
|
}
|
|
60
504
|
}
|
|
61
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByTransferComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
62
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
505
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByTransferComponent, deps: [{ token: i1.CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
506
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByTransferComponent, isStandalone: true, selector: "pay-by-transfer", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", paymentUsed: "paymentUsed" }, ngImport: i0, template: "<div class=\"flex flex-col gap-10\">\n <p class=\"text-sub-copy text-sm font-semibold text-center\">\n Amount to Pay {{ formatAmountHandler }}\n </p>\n\n @if (!paymentAccountDetails) {\n <form [formGroup]=\"transferForm\">\n <div class=\"flex flex-col gap-10\">\n <base-input\n formControlName=\"customerName\"\n label=\"Card Name\"\n [required]=\"true\"\n [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n ></base-input>\n\n <base-button\n [label]=\"'Pay ' + formatAmountHandler\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </div>\n </form>\n }\n\n @if (paymentAccountDetails) {\n <div class=\"flex flex-col gap-10\">\n <div class=\"bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6\">\n <base-label-info\n label=\"Bank Name\"\n [value]=\"paymentAccountDetails.bank + ' - ' + paymentAccountDetails.accountName\"\n ></base-label-info>\n <div class=\"flex items-center justify-between\">\n <base-label-info\n label=\"Account Number\"\n [value]=\"paymentAccountDetails.accountNumber\"\n ></base-label-info>\n <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n </div>\n <div class=\"flex items-center justify-between\">\n <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n </div>\n </div>\n\n <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n This account is for this transaction only and expires in\n <span class=\"text-orange-500\">{{ countDownTime }}</span>\n </p>\n\n <div class=\"flex flex-col gap-4\">\n <base-button\n label=\"I have paid the money\"\n type=\"primary\"\n customClass=\"w-full\"\n (onClick)=\"getReferenceDetails()\"\n ></base-button>\n <p class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\">\n Cancel Payment\n </p>\n </div>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: LabelInfoComponent, selector: "base-label-info", inputs: ["type", "label", "labelCustomClass", "valueImageSrc", "valueImageCustomClass", "valueImagePosition", "hasValueCopy", "value", "valueCustomClass", "alignRight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: InputComponent, selector: "base-input", inputs: ["label", "type", "placeholder", "validationError", "hint", "mask", "rules", "isAmountInput", "required", "disabled", "loading", "showCopyIcon"], outputs: ["onInputChange", "onInputBlur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
63
507
|
}
|
|
64
508
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByTransferComponent, decorators: [{
|
|
65
509
|
type: Component,
|
|
66
|
-
args: [{ selector: 'pay-by-transfer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelInfoComponent, CopyComponent, ButtonComponent], template: "<div class=\"flex flex-col gap-10\">\n <p class=\"text-sub-copy text-sm font-semibold text-center\"
|
|
67
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }]
|
|
510
|
+
args: [{ selector: 'pay-by-transfer', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LabelInfoComponent, CopyComponent, ButtonComponent, ReactiveFormsModule, InputComponent], template: "<div class=\"flex flex-col gap-10\">\n <p class=\"text-sub-copy text-sm font-semibold text-center\">\n Amount to Pay {{ formatAmountHandler }}\n </p>\n\n @if (!paymentAccountDetails) {\n <form [formGroup]=\"transferForm\">\n <div class=\"flex flex-col gap-10\">\n <base-input\n formControlName=\"customerName\"\n label=\"Card Name\"\n [required]=\"true\"\n [validationError]=\"getError('customerName', 'Customer Name') || ''\"\n ></base-input>\n\n <base-button\n [label]=\"'Pay ' + formatAmountHandler\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isMakingPayment\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </div>\n </form>\n }\n\n @if (paymentAccountDetails) {\n <div class=\"flex flex-col gap-10\">\n <div class=\"bg-[#EFF7FF] p-4 rounded-lg flex flex-col gap-6\">\n <base-label-info\n label=\"Bank Name\"\n [value]=\"paymentAccountDetails.bank + ' - ' + paymentAccountDetails.accountName\"\n ></base-label-info>\n <div class=\"flex items-center justify-between\">\n <base-label-info\n label=\"Account Number\"\n [value]=\"paymentAccountDetails.accountNumber\"\n ></base-label-info>\n <base-copy color=\"#9DBFDE\" [copyText]=\"paymentAccountDetails.accountNumber\"></base-copy>\n </div>\n <div class=\"flex items-center justify-between\">\n <base-label-info label=\"Amount\" [value]=\"formatAmountHandler\"></base-label-info>\n <base-copy color=\"#9DBFDE\" [copyText]=\"formatAmountHandler\"></base-copy>\n </div>\n </div>\n\n <p class=\"w-2/3 mx-auto text-center text-body-2xs font-medium text-sub-copy\">\n This account is for this transaction only and expires in\n <span class=\"text-orange-500\">{{ countDownTime }}</span>\n </p>\n\n <div class=\"flex flex-col gap-4\">\n <base-button\n label=\"I have paid the money\"\n type=\"primary\"\n customClass=\"w-full\"\n (onClick)=\"getReferenceDetails()\"\n ></base-button>\n <p class=\"text-heading-text text-body-2xs font-medium text-center py-2 cursor-pointer\">\n Cancel Payment\n </p>\n </div>\n </div>\n }\n</div>\n" }]
|
|
511
|
+
}], ctorParameters: () => [{ type: i1.CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
|
|
512
|
+
type: Input
|
|
513
|
+
}], environment: [{
|
|
514
|
+
type: Input
|
|
515
|
+
}], paymentObject: [{
|
|
516
|
+
type: Input
|
|
517
|
+
}], paymentAuthorized: [{
|
|
518
|
+
type: Output
|
|
519
|
+
}], paymentUsed: [{
|
|
520
|
+
type: Output
|
|
521
|
+
}] } });
|
|
68
522
|
|
|
69
523
|
class PayByStableCoinComponent {
|
|
70
|
-
|
|
524
|
+
resource;
|
|
525
|
+
checkout;
|
|
526
|
+
cdr;
|
|
527
|
+
constructor(resource, checkout, cdr) {
|
|
528
|
+
this.resource = resource;
|
|
529
|
+
this.checkout = checkout;
|
|
530
|
+
this.cdr = cdr;
|
|
531
|
+
}
|
|
532
|
+
secretKey = '';
|
|
533
|
+
environment = '';
|
|
534
|
+
paymentObject = {
|
|
535
|
+
merchantName: '',
|
|
536
|
+
amount: 0,
|
|
537
|
+
currency: '',
|
|
538
|
+
email: '',
|
|
539
|
+
phoneNumber: '',
|
|
540
|
+
narration: '',
|
|
541
|
+
redirectUrl: '',
|
|
542
|
+
};
|
|
543
|
+
paymentAuthorized = new EventEmitter();
|
|
544
|
+
paymentUsed = new EventEmitter();
|
|
545
|
+
message = '';
|
|
546
|
+
transactionReference = '';
|
|
547
|
+
paymentReferenceStatus = '';
|
|
548
|
+
generateAddressPayload = null;
|
|
549
|
+
addressDetails = null;
|
|
550
|
+
paymentReferenceDetails = null;
|
|
551
|
+
stableCoins = [];
|
|
552
|
+
networkList = [];
|
|
553
|
+
loadingStableCoins = false;
|
|
554
|
+
generatingAddress = false;
|
|
555
|
+
isConfirmingPayment = false;
|
|
556
|
+
loading = false;
|
|
557
|
+
loadingStableCoinNetworks = false;
|
|
71
558
|
formIndex = 0;
|
|
72
559
|
setFormIndex(index) {
|
|
73
560
|
this.formIndex = index;
|
|
74
561
|
}
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
562
|
+
stableCoinForm = new FormGroup({
|
|
563
|
+
stableCoin: new FormControl('', [Validators.required]),
|
|
564
|
+
network: new FormControl('', [Validators.required]),
|
|
565
|
+
});
|
|
566
|
+
getError(controlName, label) {
|
|
567
|
+
const control = this.stableCoinForm.get(controlName);
|
|
568
|
+
return getValidationErrorMessage(control, label);
|
|
78
569
|
}
|
|
79
|
-
|
|
80
|
-
|
|
570
|
+
async generatePaymentLinkHandler() {
|
|
571
|
+
if (!this.secretKey) {
|
|
572
|
+
return (this.message = 'Secret key is required.');
|
|
573
|
+
}
|
|
574
|
+
if (!checkObjectTruthy(this.paymentObject)) {
|
|
575
|
+
return (this.message = 'Kindly ensure you are passing all the required data.');
|
|
576
|
+
}
|
|
577
|
+
this.loading = true;
|
|
578
|
+
this.cdr.markForCheck();
|
|
579
|
+
this.checkout
|
|
580
|
+
.createPaymentLink(this.paymentObject, this.environment, this.secretKey)
|
|
581
|
+
.pipe(tap((res) => {
|
|
582
|
+
if (res?.isSuccessful) {
|
|
583
|
+
this.message = 'Payment link created successfully';
|
|
584
|
+
this.transactionReference = res.data.transactionReference;
|
|
585
|
+
}
|
|
586
|
+
else {
|
|
587
|
+
this.message = 'Failed to create payment link';
|
|
588
|
+
}
|
|
589
|
+
}), finalize(() => {
|
|
590
|
+
this.loading = false;
|
|
591
|
+
this.cdr.markForCheck();
|
|
592
|
+
}))
|
|
593
|
+
.subscribe();
|
|
594
|
+
}
|
|
595
|
+
async generateAddress() {
|
|
596
|
+
if (this.generateAddressPayload) {
|
|
597
|
+
this.generatingAddress = true;
|
|
598
|
+
await this.checkout
|
|
599
|
+
.generateStableCoinAddress(this.environment, this.generateAddressPayload)
|
|
600
|
+
.subscribe({
|
|
601
|
+
next: async (response) => {
|
|
602
|
+
if (response?.isSuccessful) {
|
|
603
|
+
this.addressDetails = response.data;
|
|
604
|
+
this.setFormIndex(1);
|
|
605
|
+
this.generatingAddress = false;
|
|
606
|
+
}
|
|
607
|
+
},
|
|
608
|
+
error: (err) => {
|
|
609
|
+
this.generatingAddress = false;
|
|
610
|
+
this.message = err.error.responseMessage || err.error.message;
|
|
611
|
+
},
|
|
612
|
+
});
|
|
613
|
+
}
|
|
614
|
+
}
|
|
615
|
+
async payHandler() {
|
|
616
|
+
if (this.stableCoinForm && this.stableCoinForm.valid) {
|
|
617
|
+
this.generateAddressPayload = {
|
|
618
|
+
paymentReference: this.transactionReference,
|
|
619
|
+
currency: this.stableCoinForm.get('stableCoin')?.value ?? '',
|
|
620
|
+
chain: this.stableCoinForm.get('network')?.value ?? '',
|
|
621
|
+
transactionAmount: this.paymentObject?.amount,
|
|
622
|
+
merchantId: this.secretKey,
|
|
623
|
+
};
|
|
624
|
+
await this.generateAddress();
|
|
625
|
+
}
|
|
626
|
+
else {
|
|
627
|
+
this.stableCoinForm?.markAllAsTouched();
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
async getStableCoins() {
|
|
631
|
+
this.loadingStableCoins = true;
|
|
632
|
+
await this.resource.getStableCoins(this.environment).subscribe({
|
|
633
|
+
next: async (response) => {
|
|
634
|
+
if (response?.isSuccessful) {
|
|
635
|
+
this.stableCoins =
|
|
636
|
+
response.data?.map((c) => ({
|
|
637
|
+
label: c.name,
|
|
638
|
+
value: c.name,
|
|
639
|
+
})) ?? [];
|
|
640
|
+
this.loadingStableCoins = false;
|
|
641
|
+
}
|
|
642
|
+
},
|
|
643
|
+
error: (err) => {
|
|
644
|
+
this.loadingStableCoins = false;
|
|
645
|
+
this.message = err.error.responseMessage || err.error.message;
|
|
646
|
+
},
|
|
647
|
+
});
|
|
648
|
+
}
|
|
649
|
+
async getStableCoinNetworks() {
|
|
650
|
+
const stableCoin = this.stableCoinForm.get('stableCoin')?.value;
|
|
651
|
+
this.loadingStableCoinNetworks = true;
|
|
652
|
+
await this.resource.getStableCoinNetworks(this.environment, stableCoin ?? '').subscribe({
|
|
653
|
+
next: async (response) => {
|
|
654
|
+
if (response?.isSuccessful) {
|
|
655
|
+
this.networkList =
|
|
656
|
+
response.networks?.map((n) => ({
|
|
657
|
+
label: n,
|
|
658
|
+
value: n,
|
|
659
|
+
})) ?? [];
|
|
660
|
+
this.loadingStableCoinNetworks = false;
|
|
661
|
+
}
|
|
662
|
+
},
|
|
663
|
+
error: (err) => {
|
|
664
|
+
this.loadingStableCoinNetworks = false;
|
|
665
|
+
this.message = err.error.responseMessage || err.error.message;
|
|
666
|
+
},
|
|
667
|
+
});
|
|
668
|
+
}
|
|
669
|
+
async confirmPaymentHandler() {
|
|
670
|
+
this.isConfirmingPayment = true;
|
|
671
|
+
await this.checkout
|
|
672
|
+
.getPaymentReferenceDetails(this.environment, this.transactionReference)
|
|
673
|
+
.subscribe({
|
|
674
|
+
next: async (response) => {
|
|
675
|
+
if (response?.isSuccessful) {
|
|
676
|
+
this.paymentReferenceDetails = response.data;
|
|
677
|
+
if (response.data?.finalTransactionStatus === null ||
|
|
678
|
+
response.data?.paymentStatus === null) {
|
|
679
|
+
this.message = 'Transaction not confirmed !!';
|
|
680
|
+
this.paymentReferenceStatus = 'pending';
|
|
681
|
+
}
|
|
682
|
+
else if (response.data?.finalTransactionStatus === 'Success' ||
|
|
683
|
+
response.data?.paymentStatus === 'Payment Received') {
|
|
684
|
+
this.message = 'Transaction confirmed !!';
|
|
685
|
+
this.paymentReferenceStatus = 'confirmed';
|
|
686
|
+
this.paymentAuthorized.emit(this.transactionReference);
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
else if (!response?.isSuccessful && response?.responseCode === '119') {
|
|
690
|
+
this.paymentReferenceStatus = 'used';
|
|
691
|
+
this.message = response.responseMessage;
|
|
692
|
+
this.paymentUsed.emit(this.transactionReference);
|
|
693
|
+
}
|
|
694
|
+
this.isConfirmingPayment = false;
|
|
695
|
+
},
|
|
696
|
+
error: (err) => {
|
|
697
|
+
this.paymentReferenceStatus = '';
|
|
698
|
+
this.isConfirmingPayment = false;
|
|
699
|
+
this.message = err.error.responseMessage || err.error.message;
|
|
700
|
+
},
|
|
701
|
+
});
|
|
702
|
+
}
|
|
703
|
+
async ngOnInit() {
|
|
704
|
+
await this.generatePaymentLinkHandler();
|
|
705
|
+
await this.getStableCoins();
|
|
706
|
+
}
|
|
707
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByStableCoinComponent, deps: [{ token: i1.ResourceService }, { token: i1.CheckoutService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
708
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: PayByStableCoinComponent, isStandalone: true, selector: "pay-by-stable-coin", inputs: { secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { paymentAuthorized: "paymentAuthorized", paymentUsed: "paymentUsed" }, ngImport: i0, template: "<div class=\"flex flex-col gap-6\">\n @if (formIndex === 0) {\n <form [formGroup]=\"stableCoinForm\">\n <div class=\"grid grid-cols-1 gap-6\">\n <base-select\n formControlName=\"stableCoin\"\n label=\"Select Crypto\"\n [required]=\"true\"\n [options]=\"stableCoins\"\n [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n [loading]=\"loadingStableCoins\"\n (onSelectChange)=\"getStableCoinNetworks()\"\n ></base-select>\n <base-select\n formControlName=\"network\"\n label=\"Select Network\"\n [required]=\"true\"\n [options]=\"networkList\"\n [validationError]=\"getError('network', 'Network') ?? ''\"\n [loading]=\"loadingStableCoinNetworks\"\n ></base-select>\n </div>\n\n <base-button\n label=\"Pay\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"generatingAddress\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </form>\n }\n\n @if (formIndex === 1) {\n <div class=\"flex flex-col gap-6\">\n <div class=\"mx-auto\">\n <base-image\n src=\"../../../assets/images/stable-coin-qr-code.png\"\n alt=\"QR Code\"\n [width]=\"122\"\n [height]=\"122\"\n class=\"mb-1\"\n ></base-image>\n <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\">USDC</p>\n </div>\n\n <div class=\"flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50\">\n <div class=\"border-b border-grey-border pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Network</p>\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col gap-1\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy\">\n {{ addressDetails?.chain }}\n </p>\n <div class=\"flex items-center gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">*Est. arrival = 3 mins</p>\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">|</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-3xs text-light-copy font-normal\"\n iconColorClass=\"#557591\"\n iconWidth=\"12\"\n iconHeight=\"12\"\n ></base-currency-amount>\n </div>\n </div>\n <icon-arrow-swap></icon-arrow-swap>\n </div>\n </div>\n\n <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Deposit Address ></p>\n <div class=\"flex justify-between\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\">\n {{ addressDetails?.walletAddress }}\n </p>\n <base-copy [copyText]=\"addressDetails?.walletAddress ?? ''\"></base-copy>\n </div>\n </div>\n\n <!-- <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Memo ></p>\n <div class=\"flex justify-between\">\n <p\n class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\"\n >\n 0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6\n </p>\n <app-copy\n [isCopyIcon]=\"true\"\n [copyText]=\"'0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6'\"\n ></app-copy>\n </div>\n </div> -->\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex items-center justify-between border-b border-grey-border py-3\">\n <p class=\"mb-0 text-body-2xs font-medium text-primary-black\">Network fee</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-2xs font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n ></base-currency-amount>\n </div>\n\n <div class=\"flex items-center justify-between py-4\">\n <p class=\"mb-0 text-body-lg font-semibold text-primary-black\">Pay</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.transactionAmount ?? 0\"\n textClass=\"mb-0 text-body-lg font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n iconWidth=\"20\"\n iconHeight=\"20\"\n ></base-currency-amount>\n </div>\n </div>\n\n <div class=\"flex flex-col gap-6\">\n <base-button\n label=\"Confirm Payment\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isConfirmingPayment\"\n (onClick)=\"confirmPaymentHandler()\"\n ></base-button>\n </div>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: SelectComponent, selector: "base-select", inputs: ["options", "placeholder", "hasSearch", "disabled", "loading", "validationError", "label", "hint", "required", "itemImageType"], outputs: ["onSelectChange"] }, { kind: "component", type: ButtonComponent, selector: "base-button", inputs: ["label", "type", "size", "paddingClassX", "disabled", "loading", "customClass"], outputs: ["onClick"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }, { kind: "component", type: CurrencyAmountComponent, selector: "base-currency-amount", inputs: ["currency", "amount", "textClass", "iconColorClass", "iconWidth", "iconHeight"] }, { kind: "component", type: CopyComponent, selector: "base-copy", inputs: ["copyText", "color"] }, { kind: "component", type: IconArrowSwapComponent, selector: "icon-arrow-swap", inputs: ["color", "width", "height"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
81
709
|
}
|
|
82
710
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: PayByStableCoinComponent, decorators: [{
|
|
83
711
|
type: Component,
|
|
@@ -88,8 +716,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
88
716
|
CurrencyAmountComponent,
|
|
89
717
|
CopyComponent,
|
|
90
718
|
IconArrowSwapComponent,
|
|
91
|
-
|
|
92
|
-
|
|
719
|
+
ReactiveFormsModule,
|
|
720
|
+
], template: "<div class=\"flex flex-col gap-6\">\n @if (formIndex === 0) {\n <form [formGroup]=\"stableCoinForm\">\n <div class=\"grid grid-cols-1 gap-6\">\n <base-select\n formControlName=\"stableCoin\"\n label=\"Select Crypto\"\n [required]=\"true\"\n [options]=\"stableCoins\"\n [validationError]=\"getError('stableCoin', 'Select Crypto') ?? ''\"\n [loading]=\"loadingStableCoins\"\n (onSelectChange)=\"getStableCoinNetworks()\"\n ></base-select>\n <base-select\n formControlName=\"network\"\n label=\"Select Network\"\n [required]=\"true\"\n [options]=\"networkList\"\n [validationError]=\"getError('network', 'Network') ?? ''\"\n [loading]=\"loadingStableCoinNetworks\"\n ></base-select>\n </div>\n\n <base-button\n label=\"Pay\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"generatingAddress\"\n (onClick)=\"payHandler()\"\n ></base-button>\n </form>\n }\n\n @if (formIndex === 1) {\n <div class=\"flex flex-col gap-6\">\n <div class=\"mx-auto\">\n <base-image\n src=\"../../../assets/images/stable-coin-qr-code.png\"\n alt=\"QR Code\"\n [width]=\"122\"\n [height]=\"122\"\n class=\"mb-1\"\n ></base-image>\n <p class=\"mb-0 text-body-4xs text-light-copy font-normal text-center\">USDC</p>\n </div>\n\n <div class=\"flex flex-col gap-6 border-c border-grey-100 p-4 rounded-2xl bg-light-white-50\">\n <div class=\"border-b border-grey-border pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Network</p>\n <div class=\"flex justify-between\">\n <div class=\"flex flex-col gap-1\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy\">\n {{ addressDetails?.chain }}\n </p>\n <div class=\"flex items-center gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">*Est. arrival = 3 mins</p>\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">|</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-3xs text-light-copy font-normal\"\n iconColorClass=\"#557591\"\n iconWidth=\"12\"\n iconHeight=\"12\"\n ></base-currency-amount>\n </div>\n </div>\n <icon-arrow-swap></icon-arrow-swap>\n </div>\n </div>\n\n <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Deposit Address ></p>\n <div class=\"flex justify-between\">\n <p class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\">\n {{ addressDetails?.walletAddress }}\n </p>\n <base-copy [copyText]=\"addressDetails?.walletAddress ?? ''\"></base-copy>\n </div>\n </div>\n\n <!-- <div class=\"pb-4 flex flex-col gap-2\">\n <p class=\"mb-0 text-body-3xs text-light-copy font-normal\">Memo ></p>\n <div class=\"flex justify-between\">\n <p\n class=\"mb-0 text-body-2xs font-medium text-sub-copy w-2/3 break-words\"\n >\n 0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6\n </p>\n <app-copy\n [isCopyIcon]=\"true\"\n [copyText]=\"'0j8938ysheeee8333c162883a4d4f5g6t111nhk8uey37777yt6'\"\n ></app-copy>\n </div>\n </div> -->\n </div>\n\n <div class=\"flex flex-col gap-2\">\n <div class=\"flex items-center justify-between border-b border-grey-border py-3\">\n <p class=\"mb-0 text-body-2xs font-medium text-primary-black\">Network fee</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.networkFee ?? 0\"\n textClass=\"mb-0 text-body-2xs font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n ></base-currency-amount>\n </div>\n\n <div class=\"flex items-center justify-between py-4\">\n <p class=\"mb-0 text-body-lg font-semibold text-primary-black\">Pay</p>\n <base-currency-amount\n [currency]=\"generateAddressPayload?.currency ?? ''\"\n [amount]=\"addressDetails?.transactionAmount ?? 0\"\n textClass=\"mb-0 text-body-lg font-extrabold text-primary-black\"\n iconColorClass=\"#231F20\"\n iconWidth=\"20\"\n iconHeight=\"20\"\n ></base-currency-amount>\n </div>\n </div>\n\n <div class=\"flex flex-col gap-6\">\n <base-button\n label=\"Confirm Payment\"\n type=\"primary\"\n customClass=\"w-full\"\n [loading]=\"isConfirmingPayment\"\n (onClick)=\"confirmPaymentHandler()\"\n ></base-button>\n </div>\n </div>\n }\n</div>\n" }]
|
|
721
|
+
}], ctorParameters: () => [{ type: i1.ResourceService }, { type: i1.CheckoutService }, { type: i0.ChangeDetectorRef }], propDecorators: { secretKey: [{
|
|
722
|
+
type: Input
|
|
723
|
+
}], environment: [{
|
|
724
|
+
type: Input
|
|
725
|
+
}], paymentObject: [{
|
|
726
|
+
type: Input
|
|
727
|
+
}], paymentAuthorized: [{
|
|
728
|
+
type: Output
|
|
729
|
+
}], paymentUsed: [{
|
|
93
730
|
type: Output
|
|
94
731
|
}] } });
|
|
95
732
|
|
|
@@ -98,6 +735,7 @@ class CheckoutCardComponent {
|
|
|
98
735
|
secretKey = '';
|
|
99
736
|
environment = 'sandbox';
|
|
100
737
|
paymentObject = {
|
|
738
|
+
merchantName: '',
|
|
101
739
|
amount: 0,
|
|
102
740
|
currency: '',
|
|
103
741
|
email: '',
|
|
@@ -141,7 +779,7 @@ class CheckoutCardComponent {
|
|
|
141
779
|
this.checkoutState = 'STABLE_COIN_PAYMENT';
|
|
142
780
|
}
|
|
143
781
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
144
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutCardComponent, isStandalone: true, selector: "bzp-checkout-card", inputs: { options: "options", secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { ready: "ready", validityChange: "validityChange", tokenize: "tokenize" }, ngImport: i0, template: "<base-card [showBackButton]=\"checkoutState === 'STABLE_COIN_PAYMENT'\">\n <div class=\"grid grid-cols-3\">\n @if (checkoutState === 'PAYMENT') {\n <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n <base-radio-group\n [options]=\"filteredPaymentTypeOptions\"\n (selectedChange)=\"paymentTypeHandler($event)\"\n ></base-radio-group>\n </div>\n }\n\n <div class=\"col-span-2\">\n @if (checkoutState === 'PAYMENT' || checkoutState === 'STABLE_COIN_PAYMENT') {\n @if (checkoutState === 'PAYMENT') {\n <div class=\"flex items-center justify-between px-12 py-8\">\n @if (options?.imageUrl) {\n <base-image\n [src]=\"options?.imageUrl ?? ''\"\n alt=\"Merchant Logo\"\n [width]=\"52\"\n [height]=\"52\"\n class=\"rounded-lg\"\n ></base-image>\n } @else {\n <div\n class=\"bg-heading-text rounded flex flex-col justify-center\"\n style=\"width: 52px; height: 52px\"\n >\n <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n </div>\n }\n\n <div class=\"flex flex-col gap-1\">\n <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n
|
|
782
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutCardComponent, isStandalone: true, selector: "bzp-checkout-card", inputs: { options: "options", secretKey: "secretKey", environment: "environment", paymentObject: "paymentObject" }, outputs: { ready: "ready", validityChange: "validityChange", tokenize: "tokenize" }, ngImport: i0, template: "<base-card [showBackButton]=\"checkoutState === 'STABLE_COIN_PAYMENT'\">\n <div class=\"grid grid-cols-3\">\n @if (checkoutState === 'PAYMENT') {\n <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n <base-radio-group\n [options]=\"filteredPaymentTypeOptions\"\n (selectedChange)=\"paymentTypeHandler($event)\"\n ></base-radio-group>\n </div>\n }\n\n <div class=\"col-span-2\">\n @if (checkoutState === 'PAYMENT' || checkoutState === 'STABLE_COIN_PAYMENT') {\n @if (checkoutState === 'PAYMENT') {\n <div class=\"flex items-center justify-between px-12 py-8\">\n @if (options?.imageUrl) {\n <base-image\n [src]=\"options?.imageUrl ?? ''\"\n alt=\"Merchant Logo\"\n [width]=\"52\"\n [height]=\"52\"\n class=\"rounded-lg\"\n ></base-image>\n } @else {\n <div\n class=\"bg-heading-text rounded flex flex-col justify-center\"\n style=\"width: 52px; height: 52px\"\n >\n <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n </div>\n }\n\n <div class=\"flex flex-col gap-1\">\n <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n {{ paymentObject.merchantName }}\n </p>\n <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n Pay:\n <span class=\"text-orange-500 font-extrabold\">{{ formatAmountHandler }}</span>\n </p>\n </div>\n </div>\n }\n\n <div class=\"overflow-y-scroll px-10 pb-10 pt-2\">\n @if (paymentType === 'CARD') {\n <pay-by-card [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-card>\n } @else if (paymentType === 'BANK_TRANSFER') {\n <pay-by-transfer [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-transfer>\n } @else {\n <pay-by-stable-coin\n [environment]=\"environment\"\n [secretKey]=\"secretKey\"\n (paymentAuthorized)=\"payStableCoinHandler()\"\n ></pay-by-stable-coin>\n }\n </div>\n } @else if (checkoutState === 'SUCCESS') {\n <base-success></base-success>\n }\n </div>\n </div>\n</base-card>\n", dependencies: [{ kind: "component", type: RadioGroupComponent, selector: "base-radio-group", inputs: ["options", "type"], outputs: ["selectedChange"] }, { kind: "component", type: ImageComponent, selector: "base-image", inputs: ["src", "alt", "isFullWidth", "width", "height", "customClass"], outputs: ["onClick"] }, { kind: "component", type: PayByCardComponent, selector: "pay-by-card", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized"] }, { kind: "component", type: PayByTransferComponent, selector: "pay-by-transfer", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized", "paymentUsed"] }, { kind: "component", type: PayByStableCoinComponent, selector: "pay-by-stable-coin", inputs: ["secretKey", "environment", "paymentObject"], outputs: ["paymentAuthorized", "paymentUsed"] }, { kind: "component", type: SuccessComponent, selector: "base-success" }, { kind: "component", type: CardComponent, selector: "base-card", inputs: ["showBackButton"], outputs: ["back"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
145
783
|
}
|
|
146
784
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutCardComponent, decorators: [{
|
|
147
785
|
type: Component,
|
|
@@ -153,7 +791,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImpor
|
|
|
153
791
|
PayByStableCoinComponent,
|
|
154
792
|
SuccessComponent,
|
|
155
793
|
CardComponent,
|
|
156
|
-
], template: "<base-card [showBackButton]=\"checkoutState === 'STABLE_COIN_PAYMENT'\">\n <div class=\"grid grid-cols-3\">\n @if (checkoutState === 'PAYMENT') {\n <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n <base-radio-group\n [options]=\"filteredPaymentTypeOptions\"\n (selectedChange)=\"paymentTypeHandler($event)\"\n ></base-radio-group>\n </div>\n }\n\n <div class=\"col-span-2\">\n @if (checkoutState === 'PAYMENT' || checkoutState === 'STABLE_COIN_PAYMENT') {\n @if (checkoutState === 'PAYMENT') {\n <div class=\"flex items-center justify-between px-12 py-8\">\n @if (options?.imageUrl) {\n <base-image\n [src]=\"options?.imageUrl ?? ''\"\n alt=\"Merchant Logo\"\n [width]=\"52\"\n [height]=\"52\"\n class=\"rounded-lg\"\n ></base-image>\n } @else {\n <div\n class=\"bg-heading-text rounded flex flex-col justify-center\"\n style=\"width: 52px; height: 52px\"\n >\n <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n </div>\n }\n\n <div class=\"flex flex-col gap-1\">\n <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n
|
|
794
|
+
], template: "<base-card [showBackButton]=\"checkoutState === 'STABLE_COIN_PAYMENT'\">\n <div class=\"grid grid-cols-3\">\n @if (checkoutState === 'PAYMENT') {\n <div class=\"bg-[#EFF7FF] px-6 py-8 flex flex-col gap-5 col-span-1 rounded-l-xl\">\n <p class=\"text-heading-text text-body-xs font-semibold\">Pay with</p>\n <base-radio-group\n [options]=\"filteredPaymentTypeOptions\"\n (selectedChange)=\"paymentTypeHandler($event)\"\n ></base-radio-group>\n </div>\n }\n\n <div class=\"col-span-2\">\n @if (checkoutState === 'PAYMENT' || checkoutState === 'STABLE_COIN_PAYMENT') {\n @if (checkoutState === 'PAYMENT') {\n <div class=\"flex items-center justify-between px-12 py-8\">\n @if (options?.imageUrl) {\n <base-image\n [src]=\"options?.imageUrl ?? ''\"\n alt=\"Merchant Logo\"\n [width]=\"52\"\n [height]=\"52\"\n class=\"rounded-lg\"\n ></base-image>\n } @else {\n <div\n class=\"bg-heading-text rounded flex flex-col justify-center\"\n style=\"width: 52px; height: 52px\"\n >\n <p class=\"text-white text-center text-body-2xs font-medium\">Logo</p>\n </div>\n }\n\n <div class=\"flex flex-col gap-1\">\n <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n {{ paymentObject.merchantName }}\n </p>\n <p class=\"text-body-2xs font-regular text-sub-copy text-right\">\n Pay:\n <span class=\"text-orange-500 font-extrabold\">{{ formatAmountHandler }}</span>\n </p>\n </div>\n </div>\n }\n\n <div class=\"overflow-y-scroll px-10 pb-10 pt-2\">\n @if (paymentType === 'CARD') {\n <pay-by-card [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-card>\n } @else if (paymentType === 'BANK_TRANSFER') {\n <pay-by-transfer [environment]=\"environment\" [secretKey]=\"secretKey\"></pay-by-transfer>\n } @else {\n <pay-by-stable-coin\n [environment]=\"environment\"\n [secretKey]=\"secretKey\"\n (paymentAuthorized)=\"payStableCoinHandler()\"\n ></pay-by-stable-coin>\n }\n </div>\n } @else if (checkoutState === 'SUCCESS') {\n <base-success></base-success>\n }\n </div>\n </div>\n</base-card>\n" }]
|
|
157
795
|
}], propDecorators: { options: [{
|
|
158
796
|
type: Input
|
|
159
797
|
}], secretKey: [{
|
|
@@ -194,6 +832,7 @@ class CheckoutIframeComponent {
|
|
|
194
832
|
};
|
|
195
833
|
environment = 'sandbox';
|
|
196
834
|
paymentObject = {
|
|
835
|
+
merchantName: '',
|
|
197
836
|
amount: 0,
|
|
198
837
|
currency: '',
|
|
199
838
|
email: '',
|
|
@@ -256,7 +895,7 @@ class CheckoutIframeComponent {
|
|
|
256
895
|
await this.generatePaymentLinkHandler();
|
|
257
896
|
}
|
|
258
897
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutIframeComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i1.CheckoutService }], target: i0.ɵɵFactoryTarget.Component });
|
|
259
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutIframeComponent, isStandalone: true, selector: "bzp-checkout-iframe", inputs: { secretKey: "secretKey", url: "url", style: "style", environment: "environment", paymentObject: "paymentObject" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"relative\" [ngStyle]=\"blockStyle\">\n <div #container class=\"w-full h-full\"></div>\n\n @if (loading) {\n <div class=\"absolute inset-0 grid place-items-center bg-white/60\">\n <icon-loader></icon-loader>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
898
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.1", type: CheckoutIframeComponent, isStandalone: true, selector: "bzp-checkout-iframe", inputs: { secretKey: "secretKey", url: "url", style: "style", environment: "environment", paymentObject: "paymentObject" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"relative\" [ngStyle]=\"blockStyle\">\n <div #container class=\"w-full h-full\"></div>\n\n @if (loading) {\n <div class=\"absolute inset-0 grid place-items-center bg-white/60\">\n <icon-loader></icon-loader>\n </div>\n }\n</div>\n", dependencies: [{ kind: "component", type: IconLoaderComponent, selector: "icon-loader", inputs: ["color", "size"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
260
899
|
}
|
|
261
900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.1", ngImport: i0, type: CheckoutIframeComponent, decorators: [{
|
|
262
901
|
type: Component,
|
|
@@ -291,6 +930,7 @@ class CheckoutButtonComponent {
|
|
|
291
930
|
environment = 'sandbox';
|
|
292
931
|
mode = 'redirect';
|
|
293
932
|
paymentObject = {
|
|
933
|
+
merchantName: '',
|
|
294
934
|
amount: 0,
|
|
295
935
|
currency: '',
|
|
296
936
|
email: '',
|