bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 01:33:33 +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

2
libs/common/src/billing/abstractions/index.ts
View File

@@ -1,6 +1,4 @@
export * from "./account/billing-account-profile-state.service";
export * from "./billing-api.service.abstraction";
export * from "./organization-billing.service";
export * from "./payment-processors/braintree.service.abstraction";
export * from "./payment-processors/stripe.service.abstraction";
export * from "./provider-billing.service.abstraction";

28
libs/common/src/billing/abstractions/payment-processors/braintree.service.abstraction.ts
View File

@@ -1,28 +0,0 @@
export abstract class BraintreeServiceAbstraction {
/**
* Utilizes the Braintree SDK to create a [Braintree drop-in]{@link https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html} instance attached to the container ID specified as part of the {@link loadBraintree} method.
*/
createDropin: () => void;
/**
* Loads the Bitwarden dropin.js script in the <head> element of the current page.
* This script attaches the Braintree SDK to the window.
* @param containerId - The ID of the HTML element where the Braintree drop-in will be loaded at.
* @param autoCreateDropin - Specifies whether the Braintree drop-in should be created when dropin.js loads.
*/
loadBraintree: (containerId: string, autoCreateDropin: boolean) => void;
/**
* Invokes the Braintree [requestPaymentMethod]{@link https://braintree.github.io/braintree-web-drop-in/docs/current/Dropin.html#requestPaymentMethod} method
* in order to generate a payment method token using the active Braintree drop-in.
*/
requestPaymentMethod: () => Promise<string>;
/**
* Removes the following elements from the <head> of the current page:
* - The Bitwarden dropin.js script
* - Any <script> elements that contain the word "paypal"
* - The Braintree drop-in stylesheet
*/
unloadBraintree: () => void;
}

45
libs/common/src/billing/abstractions/payment-processors/stripe.service.abstraction.ts
View File

@@ -1,45 +0,0 @@
import { BankAccount } from "@bitwarden/common/billing/models/domain";
export abstract class StripeServiceAbstraction {
/**
* Loads [Stripe JS]{@link https://docs.stripe.com/js} in the <head> element of the current page and mounts
* Stripe credit card [elements]{@link https://docs.stripe.com/js/elements_object/create} into the HTML elements with the provided element IDS.
* We do this to avoid having to load the Stripe JS SDK on every page of the Web Vault given many pages contain sensitive information.
* @param elementIds - The ID attributes of the HTML elements used to load the Stripe JS credit card elements.
*/
loadStripe: (
elementIds: { cardNumber: string; cardExpiry: string; cardCvc: string },
autoMount: boolean,
) => void;
/**
* Re-mounts previously created Stripe credit card [elements]{@link https://docs.stripe.com/js/elements_object/create} into the HTML elements
* specified during the {@link loadStripe} call. This is useful for when those HTML elements are removed from the DOM by Angular.
*/
mountElements: () => void;
/**
* Creates a Stripe [SetupIntent]{@link https://docs.stripe.com/api/setup_intents} and uses the resulting client secret
* to invoke the Stripe JS [confirmUsBankAccountSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_us_bank_account_setup} method,
* thereby creating and storing a Stripe [PaymentMethod]{@link https://docs.stripe.com/api/payment_methods}.
* @returns The ID of the newly created PaymentMethod.
*/
setupBankAccountPaymentMethod: (
clientSecret: string,
bankAccount: BankAccount,
) => Promise<string>;
/**
* Creates a Stripe [SetupIntent]{@link https://docs.stripe.com/api/setup_intents} and uses the resulting client secret
* to invoke the Stripe JS [confirmCardSetup]{@link https://docs.stripe.com/js/setup_intents/confirm_card_setup} method,
* thereby creating and storing a Stripe [PaymentMethod]{@link https://docs.stripe.com/api/payment_methods}.
* @returns The ID of the newly created PaymentMethod.
*/
setupCardPaymentMethod: (clientSecret: string) => Promise<string>;
/**
* Removes {@link https://docs.stripe.com/js} from the <head> element of the current page as well as all
* Stripe-managed <iframe> elements.
*/
unloadStripe: () => void;
}

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;
}
}