bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-01-08 19:43:45 +00:00
Code Issues Releases Wiki Activity

Move braintree.service and stripe.service from jslib-services.module into web (#10923)

Browse Source
This commit is contained in:
Alex Morask
2024-09-06 09:51:00 -04:00
committed by GitHub
parent fb1a294c97
commit 2aa4b07d68
9 changed files with 73 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
libs/common/src/billing/services/payment-processors/braintree.service.ts
View File

@@ -1,89 +0,0 @@
import { LogService } from "../../../platform/abstractions/log.service";
import { BraintreeServiceAbstraction } from "../../abstractions";
export class BraintreeService implements BraintreeServiceAbstraction {
private braintree: any;
private containerId: string;
constructor(private logService: LogService) {}
createDropin() {
window.setTimeout(() => {
const window$ = window as any;
window$.braintree.dropin.create(
{
authorization: process.env.BRAINTREE_KEY,
container: this.containerId,
paymentOptionPriority: ["paypal"],
paypal: {
flow: "vault",
buttonStyle: {
label: "pay",
size: "medium",
shape: "pill",
color: "blue",
tagline: "false",
},
},
},
(error: any, instance: any) => {
if (error != null) {
this.logService.error(error);
return;
}
this.braintree = instance;
},
);
}, 250);
}
loadBraintree(containerId: string, autoCreateDropin: boolean) {
const script = window.document.createElement("script");
script.id = "dropin-script";
script.src = `scripts/dropin.js?cache=${process.env.CACHE_TAG}`;
script.async = true;
if (autoCreateDropin) {
script.onload = () => this.createDropin();
}
this.containerId = containerId;
window.document.head.appendChild(script);
}
requestPaymentMethod(): Promise<string> {
return new Promise((resolve, reject) => {
this.braintree.requestPaymentMethod((error: any, payload: any) => {
if (error) {
this.logService.error(error);
reject(error.message);
} else {
resolve(payload.nonce as string);
}
});
});
}
unloadBraintree() {
const script = window.document.getElementById("dropin-script");
window.document.head.removeChild(script);
window.setTimeout(() => {
const scripts = Array.from(window.document.head.querySelectorAll("script")).filter(
(script) => script.src != null && script.src.indexOf("paypal") > -1,
);
scripts.forEach((script) => {
try {
window.document.head.removeChild(script);
} catch (error) {
this.logService.error(error);
}
});
const stylesheet = window.document.head.querySelector("#braintree-dropin-stylesheet");
if (stylesheet != null) {
try {
window.document.head.removeChild(stylesheet);
} catch (error) {
this.logService.error(error);
}
}
}, 500);
}
}

142
libs/common/src/billing/services/payment-processors/stripe.service.ts
View File

@@ -1,142 +0,0 @@
import { LogService } from "../../../platform/abstractions/log.service";
import { StripeServiceAbstraction } from "../../abstractions";
import { BankAccount } from "../../models/domain";
export class StripeService implements StripeServiceAbstraction {
private stripe: any;
private elements: any;
private elementIds: {
cardNumber: string;
cardExpiry: string;
cardCvc: string;
};
constructor(private logService: LogService) {}
loadStripe(
elementIds: { cardNumber: string; cardExpiry: string; cardCvc: string },
autoMount: boolean,
) {
this.elementIds = elementIds;
const script = window.document.createElement("script");
script.id = "stripe-script";
script.src = "https://js.stripe.com/v3?advancedFraudSignals=false";
script.onload = () => {
const window$ = window as any;
this.stripe = window$.Stripe(process.env.STRIPE_KEY);
this.elements = this.stripe.elements();
const options = this.getElementOptions();
setTimeout(() => {
this.elements.create("cardNumber", options);
this.elements.create("cardExpiry", options);
this.elements.create("cardCvc", options);
if (autoMount) {
this.mountElements();
}
}, 50);
};
window.document.head.appendChild(script);
}
mountElements() {
setTimeout(() => {
const cardNumber = this.elements.getElement("cardNumber");
const cardExpiry = this.elements.getElement("cardExpiry");
const cardCvc = this.elements.getElement("cardCvc");
cardNumber.mount(this.elementIds.cardNumber);
cardExpiry.mount(this.elementIds.cardExpiry);
cardCvc.mount(this.elementIds.cardCvc);
});
}
async setupBankAccountPaymentMethod(
clientSecret: string,
{ accountHolderName, routingNumber, accountNumber, accountHolderType }: BankAccount,
): Promise<string> {
const result = await this.stripe.confirmUsBankAccountSetup(clientSecret, {
payment_method: {
us_bank_account: {
routing_number: routingNumber,
account_number: accountNumber,
account_holder_type: accountHolderType,
},
billing_details: {
name: accountHolderName,
},
},
});
if (result.error || (result.setupIntent && result.setupIntent.status !== "requires_action")) {
this.logService.error(result.error);
throw result.error;
}
return result.setupIntent.payment_method as string;
}
async setupCardPaymentMethod(clientSecret: string): Promise<string> {
const cardNumber = this.elements.getElement("cardNumber");
const result = await this.stripe.confirmCardSetup(clientSecret, {
payment_method: {
card: cardNumber,
},
});
if (result.error || (result.setupIntent && result.setupIntent.status !== "succeeded")) {
this.logService.error(result.error);
throw result.error;
}
return result.setupIntent.payment_method as string;
}
unloadStripe() {
const script = window.document.getElementById("stripe-script");
window.document.head.removeChild(script);
window.setTimeout(() => {
const iFrames = Array.from(window.document.querySelectorAll("iframe")).filter(
(element) => element.src != null && element.src.indexOf("stripe") > -1,
);
iFrames.forEach((iFrame) => {
try {
window.document.body.removeChild(iFrame);
} catch (error) {
this.logService.error(error);
}
});
}, 500);
}
private getElementOptions(): any {
const options: any = {
style: {
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,
},
},
classes: {
focus: "is-focused",
empty: "is-empty",
invalid: "is-invalid",
},
};
const style = getComputedStyle(document.documentElement);
options.style.base.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
options.style.base["::placeholder"].color = `rgb(${style.getPropertyValue(
"--color-text-muted",
)})`;
options.style.invalid.color = `rgb(${style.getPropertyValue("--color-text-main")})`;
options.style.invalid.borderColor = `rgb(${style.getPropertyValue("--color-danger-600")})`;
return options;
}
}