2018-06-29 04:27:32 +02:00
|
|
|
import {
|
|
|
|
Component,
|
2018-06-30 19:36:39 +02:00
|
|
|
Input,
|
2018-06-29 04:27:32 +02:00
|
|
|
OnInit,
|
|
|
|
} from '@angular/core';
|
|
|
|
|
2021-06-07 20:13:58 +02:00
|
|
|
import { PaymentMethodType } from 'jslib-common/enums/paymentMethodType';
|
2019-02-19 23:06:01 +01:00
|
|
|
|
2021-06-07 20:13:58 +02:00
|
|
|
import { ApiService } from 'jslib-common/abstractions/api.service';
|
2021-10-20 18:30:04 +02:00
|
|
|
import { LogService } from 'jslib-common/abstractions/log.service';
|
2021-06-07 20:13:58 +02:00
|
|
|
import { PlatformUtilsService } from 'jslib-common/abstractions/platformUtils.service';
|
2018-06-29 04:27:32 +02:00
|
|
|
|
2021-09-30 00:06:20 +02:00
|
|
|
import { ThemeType } from 'jslib-common/enums/themeType';
|
|
|
|
|
|
|
|
import ThemeVariables from 'src/scss/export.module.scss';
|
|
|
|
|
|
|
|
const lightInputColor = ThemeVariables.lightInputColor;
|
|
|
|
const lightInputPlaceholderColor = ThemeVariables.lightInputPlaceholderColor;
|
|
|
|
const darkInputColor = ThemeVariables.darkInputColor;
|
|
|
|
const darkInputPlaceholderColor = ThemeVariables.darkInputPlaceholderColor;
|
2019-02-19 05:40:04 +01:00
|
|
|
|
2018-06-29 04:27:32 +02:00
|
|
|
@Component({
|
|
|
|
selector: 'app-payment',
|
|
|
|
templateUrl: 'payment.component.html',
|
|
|
|
})
|
|
|
|
export class PaymentComponent implements OnInit {
|
2019-08-10 05:57:30 +02:00
|
|
|
@Input() showMethods = true;
|
2018-06-30 19:36:39 +02:00
|
|
|
@Input() showOptions = true;
|
2019-02-21 02:16:06 +01:00
|
|
|
@Input() method = PaymentMethodType.Card;
|
2018-07-16 23:17:07 +02:00
|
|
|
@Input() hideBank = false;
|
|
|
|
@Input() hidePaypal = false;
|
2019-02-21 02:16:06 +01:00
|
|
|
@Input() hideCredit = false;
|
2018-06-30 19:36:39 +02:00
|
|
|
|
2018-07-16 23:17:07 +02:00
|
|
|
bank: any = {
|
|
|
|
routing_number: null,
|
|
|
|
account_number: null,
|
|
|
|
account_holder_name: null,
|
|
|
|
account_holder_type: '',
|
|
|
|
currency: 'USD',
|
|
|
|
country: 'US',
|
|
|
|
};
|
2018-06-29 04:27:32 +02:00
|
|
|
|
2019-02-21 02:16:06 +01:00
|
|
|
paymentMethodType = PaymentMethodType;
|
|
|
|
|
2018-06-29 04:27:32 +02:00
|
|
|
private btScript: HTMLScriptElement;
|
|
|
|
private btInstance: any = null;
|
2019-02-19 05:40:04 +01:00
|
|
|
private stripeScript: HTMLScriptElement;
|
|
|
|
private stripe: any = null;
|
|
|
|
private stripeElements: any = null;
|
|
|
|
private stripeCardNumberElement: any = null;
|
|
|
|
private stripeCardExpiryElement: any = null;
|
|
|
|
private stripeCardCvcElement: any = null;
|
2021-09-30 00:06:20 +02:00
|
|
|
private StripeElementStyle: any;
|
|
|
|
private StripeElementClasses: any;
|
2018-06-29 04:27:32 +02:00
|
|
|
|
2021-10-20 18:30:04 +02:00
|
|
|
constructor(private platformUtilsService: PlatformUtilsService, private apiService: ApiService,
|
|
|
|
private logService: LogService) {
|
2018-06-29 04:27:32 +02:00
|
|
|
this.stripeScript = window.document.createElement('script');
|
2019-02-19 05:40:04 +01:00
|
|
|
this.stripeScript.src = 'https://js.stripe.com/v3/';
|
2018-06-29 04:27:32 +02:00
|
|
|
this.stripeScript.async = true;
|
|
|
|
this.stripeScript.onload = () => {
|
2021-09-09 23:18:46 +02:00
|
|
|
this.stripe = (window as any).Stripe(process.env.STRIPE_KEY);
|
2019-02-19 05:40:04 +01:00
|
|
|
this.stripeElements = this.stripe.elements();
|
|
|
|
this.setStripeElement();
|
2018-06-29 04:27:32 +02:00
|
|
|
};
|
|
|
|
this.btScript = window.document.createElement('script');
|
2021-07-12 09:21:30 +02:00
|
|
|
this.btScript.src = `scripts/dropin.js?cache=${process.env.CACHE_TAG}`;
|
2018-06-29 04:27:32 +02:00
|
|
|
this.btScript.async = true;
|
2021-09-30 00:06:20 +02:00
|
|
|
this.StripeElementStyle = {
|
|
|
|
base: {
|
|
|
|
color: null,
|
|
|
|
fontFamily: '"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif, ' +
|
|
|
|
'"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"',
|
|
|
|
fontSize: '14px',
|
|
|
|
fontSmoothing: 'antialiased',
|
|
|
|
'::placeholder': {
|
|
|
|
color: null,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
invalid: {
|
|
|
|
color: null,
|
|
|
|
|
|
|
|
},
|
|
|
|
};
|
|
|
|
this.StripeElementClasses = {
|
|
|
|
focus: 'is-focused',
|
|
|
|
empty: 'is-empty',
|
|
|
|
invalid: 'is-invalid',
|
|
|
|
};
|
2018-06-29 04:27:32 +02:00
|
|
|
}
|
|
|
|
|
2021-09-30 00:06:20 +02:00
|
|
|
async ngOnInit() {
|
2018-07-16 23:17:07 +02:00
|
|
|
if (!this.showOptions) {
|
2019-02-21 02:16:06 +01:00
|
|
|
this.hidePaypal = this.method !== PaymentMethodType.PayPal;
|
|
|
|
this.hideBank = this.method !== PaymentMethodType.BankAccount;
|
|
|
|
this.hideCredit = this.method !== PaymentMethodType.Credit;
|
2018-07-16 23:17:07 +02:00
|
|
|
}
|
2021-09-30 00:06:20 +02:00
|
|
|
await this.setTheme();
|
2018-06-29 04:27:32 +02:00
|
|
|
window.document.head.appendChild(this.stripeScript);
|
2018-07-16 23:17:07 +02:00
|
|
|
if (!this.hidePaypal) {
|
|
|
|
window.document.head.appendChild(this.btScript);
|
|
|
|
}
|
2018-06-29 04:27:32 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
ngOnDestroy() {
|
|
|
|
window.document.head.removeChild(this.stripeScript);
|
2019-02-19 05:40:04 +01:00
|
|
|
window.setTimeout(() => {
|
2021-02-03 18:41:33 +01:00
|
|
|
Array.from(window.document.querySelectorAll('iframe')).forEach(el => {
|
2019-02-19 05:40:04 +01:00
|
|
|
if (el.src != null && el.src.indexOf('stripe') > -1) {
|
|
|
|
try {
|
|
|
|
window.document.body.removeChild(el);
|
2021-10-20 18:30:04 +02:00
|
|
|
} catch (e) {
|
|
|
|
this.logService.error(e);
|
|
|
|
}
|
2019-02-19 05:40:04 +01:00
|
|
|
}
|
|
|
|
});
|
2019-02-21 02:16:06 +01:00
|
|
|
}, 500);
|
2018-07-16 23:17:07 +02:00
|
|
|
if (!this.hidePaypal) {
|
|
|
|
window.document.head.removeChild(this.btScript);
|
2019-02-19 05:40:04 +01:00
|
|
|
window.setTimeout(() => {
|
2021-02-03 18:41:33 +01:00
|
|
|
Array.from(window.document.head.querySelectorAll('script')).forEach(el => {
|
2019-02-19 05:40:04 +01:00
|
|
|
if (el.src != null && el.src.indexOf('paypal') > -1) {
|
|
|
|
try {
|
|
|
|
window.document.head.removeChild(el);
|
2021-10-20 18:30:04 +02:00
|
|
|
} catch (e) {
|
|
|
|
this.logService.error(e);
|
|
|
|
}
|
2019-02-19 05:40:04 +01:00
|
|
|
}
|
|
|
|
});
|
|
|
|
const btStylesheet = window.document.head.querySelector('#braintree-dropin-stylesheet');
|
|
|
|
if (btStylesheet != null) {
|
|
|
|
try {
|
|
|
|
window.document.head.removeChild(btStylesheet);
|
2021-10-20 18:30:04 +02:00
|
|
|
} catch (e) {
|
|
|
|
this.logService.error(e);
|
|
|
|
}
|
2019-02-19 05:40:04 +01:00
|
|
|
}
|
2019-02-21 02:16:06 +01:00
|
|
|
}, 500);
|
2018-07-16 23:17:07 +02:00
|
|
|
}
|
2018-06-29 04:27:32 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
changeMethod() {
|
2019-02-19 05:40:04 +01:00
|
|
|
this.btInstance = null;
|
2018-06-29 04:27:32 +02:00
|
|
|
|
2019-02-21 02:16:06 +01:00
|
|
|
if (this.method === PaymentMethodType.PayPal) {
|
2019-02-19 05:40:04 +01:00
|
|
|
window.setTimeout(() => {
|
|
|
|
(window as any).braintree.dropin.create({
|
2021-09-09 23:18:46 +02:00
|
|
|
authorization: process.env.BRAINTREE_KEY,
|
2019-02-19 05:40:04 +01:00
|
|
|
container: '#bt-dropin-container',
|
|
|
|
paymentOptionPriority: ['paypal'],
|
|
|
|
paypal: {
|
|
|
|
flow: 'vault',
|
|
|
|
buttonStyle: {
|
|
|
|
label: 'pay',
|
|
|
|
size: 'medium',
|
|
|
|
shape: 'pill',
|
|
|
|
color: 'blue',
|
2021-09-30 00:06:20 +02:00
|
|
|
tagline: 'false',
|
2019-02-19 05:40:04 +01:00
|
|
|
},
|
2018-06-29 04:27:32 +02:00
|
|
|
},
|
2019-02-19 05:40:04 +01:00
|
|
|
}, (createErr: any, instance: any) => {
|
|
|
|
if (createErr != null) {
|
|
|
|
// tslint:disable-next-line
|
|
|
|
console.error(createErr);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.btInstance = instance;
|
|
|
|
});
|
|
|
|
}, 250);
|
|
|
|
} else {
|
|
|
|
this.setStripeElement();
|
|
|
|
}
|
2018-06-29 04:27:32 +02:00
|
|
|
}
|
|
|
|
|
2019-02-19 23:06:01 +01:00
|
|
|
createPaymentToken(): Promise<[string, PaymentMethodType]> {
|
2018-06-29 04:27:32 +02:00
|
|
|
return new Promise((resolve, reject) => {
|
2019-02-21 02:39:40 +01:00
|
|
|
if (this.method === PaymentMethodType.Credit) {
|
|
|
|
resolve([null, this.method]);
|
|
|
|
} else if (this.method === PaymentMethodType.PayPal) {
|
2018-06-29 04:27:32 +02:00
|
|
|
this.btInstance.requestPaymentMethod().then((payload: any) => {
|
2019-02-21 02:16:06 +01:00
|
|
|
resolve([payload.nonce, this.method]);
|
2018-06-29 04:27:32 +02:00
|
|
|
}).catch((err: any) => {
|
|
|
|
reject(err.message);
|
|
|
|
});
|
2019-02-21 02:16:06 +01:00
|
|
|
} else if (this.method === PaymentMethodType.Card || this.method === PaymentMethodType.BankAccount) {
|
|
|
|
if (this.method === PaymentMethodType.Card) {
|
2021-02-03 18:41:33 +01:00
|
|
|
this.apiService.postSetupPayment().then(clientSecret =>
|
2020-06-13 01:33:29 +02:00
|
|
|
this.stripe.handleCardSetup(clientSecret, this.stripeCardNumberElement))
|
2019-08-10 05:57:30 +02:00
|
|
|
.then((result: any) => {
|
|
|
|
if (result.error) {
|
|
|
|
reject(result.error.message);
|
|
|
|
} else if (result.setupIntent && result.setupIntent.status === 'succeeded') {
|
|
|
|
resolve([result.setupIntent.payment_method, this.method]);
|
|
|
|
} else {
|
|
|
|
reject();
|
|
|
|
}
|
|
|
|
});
|
2019-02-19 05:40:04 +01:00
|
|
|
} else {
|
2019-08-10 05:57:30 +02:00
|
|
|
this.stripe.createToken('bank_account', this.bank).then((result: any) => {
|
|
|
|
if (result.error) {
|
|
|
|
reject(result.error.message);
|
|
|
|
} else if (result.token && result.token.id != null) {
|
|
|
|
resolve([result.token.id, this.method]);
|
|
|
|
} else {
|
|
|
|
reject();
|
|
|
|
}
|
|
|
|
});
|
2019-02-19 05:40:04 +01:00
|
|
|
}
|
2018-06-29 04:27:32 +02:00
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-08-10 05:57:30 +02:00
|
|
|
handleStripeCardPayment(clientSecret: string, successCallback: () => Promise<any>): Promise<any> {
|
2021-04-22 21:29:29 +02:00
|
|
|
return new Promise<void>((resolve, reject) => {
|
2019-08-10 05:57:30 +02:00
|
|
|
if (this.showMethods && this.stripeCardNumberElement == null) {
|
|
|
|
reject();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
const handleCardPayment = () => this.showMethods ?
|
2020-06-13 01:33:29 +02:00
|
|
|
this.stripe.handleCardSetup(clientSecret, this.stripeCardNumberElement) :
|
|
|
|
this.stripe.handleCardSetup(clientSecret);
|
2019-08-10 05:57:30 +02:00
|
|
|
return handleCardPayment().then(async (result: any) => {
|
|
|
|
if (result.error) {
|
|
|
|
reject(result.error.message);
|
|
|
|
} else if (result.paymentIntent && result.paymentIntent.status === 'succeeded') {
|
|
|
|
if (successCallback != null) {
|
|
|
|
await successCallback();
|
|
|
|
}
|
|
|
|
resolve();
|
|
|
|
} else {
|
|
|
|
reject();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2019-02-19 05:40:04 +01:00
|
|
|
private setStripeElement() {
|
|
|
|
window.setTimeout(() => {
|
2019-08-10 05:57:30 +02:00
|
|
|
if (this.showMethods && this.method === PaymentMethodType.Card) {
|
2019-02-19 05:40:04 +01:00
|
|
|
if (this.stripeCardNumberElement == null) {
|
|
|
|
this.stripeCardNumberElement = this.stripeElements.create('cardNumber', {
|
2021-09-30 00:06:20 +02:00
|
|
|
style: this.StripeElementStyle,
|
|
|
|
classes: this.StripeElementClasses,
|
2019-02-19 05:40:04 +01:00
|
|
|
placeholder: '',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
if (this.stripeCardExpiryElement == null) {
|
|
|
|
this.stripeCardExpiryElement = this.stripeElements.create('cardExpiry', {
|
2021-09-30 00:06:20 +02:00
|
|
|
style: this.StripeElementStyle,
|
|
|
|
classes: this.StripeElementClasses,
|
2019-02-19 05:40:04 +01:00
|
|
|
});
|
|
|
|
}
|
|
|
|
if (this.stripeCardCvcElement == null) {
|
|
|
|
this.stripeCardCvcElement = this.stripeElements.create('cardCvc', {
|
2021-09-30 00:06:20 +02:00
|
|
|
style: this.StripeElementStyle,
|
|
|
|
classes: this.StripeElementClasses,
|
2019-02-19 05:40:04 +01:00
|
|
|
placeholder: '',
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.stripeCardNumberElement.mount('#stripe-card-number-element');
|
|
|
|
this.stripeCardExpiryElement.mount('#stripe-card-expiry-element');
|
|
|
|
this.stripeCardCvcElement.mount('#stripe-card-cvc-element');
|
|
|
|
}
|
|
|
|
}, 50);
|
2018-06-29 04:27:32 +02:00
|
|
|
}
|
2021-09-30 00:06:20 +02:00
|
|
|
|
|
|
|
private async setTheme() {
|
|
|
|
const theme = await this.platformUtilsService.getEffectiveTheme();
|
|
|
|
if (theme === ThemeType.Dark) {
|
|
|
|
this.StripeElementStyle.base.color = darkInputColor;
|
|
|
|
this.StripeElementStyle.base['::placeholder'].color = darkInputPlaceholderColor;
|
|
|
|
this.StripeElementStyle.invalid.color = darkInputColor;
|
|
|
|
} else {
|
|
|
|
this.StripeElementStyle.base.color = lightInputColor;
|
|
|
|
this.StripeElementStyle.base['::placeholder'].color = lightInputPlaceholderColor;
|
|
|
|
this.StripeElementStyle.invalid.color = lightInputColor;
|
|
|
|
}
|
|
|
|
}
|
2018-06-29 04:27:32 +02:00
|
|
|
}
|