Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-09-23 03:22:50 +02:00
Code Issues Projects 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
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 73 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/src/app/billing/services/billing-services.module.ts Normal file
View File

@ -0,0 +1,4 @@
import { NgModule } from "@angular/core";
@NgModule({})
export class BillingServicesModule {}

29
libs/common/src/billing/services/payment-processors/braintree.service.ts → apps/web/src/app/billing/services/braintree.service.ts
View File

@ -1,12 +1,19 @@
import { LogService } from "../../../platform/abstractions/log.service"; import { Injectable } from "@angular/core";
import { BraintreeServiceAbstraction } from "../../abstractions";
export class BraintreeService implements BraintreeServiceAbstraction { import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { BillingServicesModule } from "./billing-services.module";
@Injectable({ providedIn: BillingServicesModule })
export class BraintreeService {
private braintree: any; private braintree: any;
private containerId: string; private containerId: string;
constructor(private logService: LogService) {} constructor(private logService: LogService) {}
/**
* 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() { createDropin() {
window.setTimeout(() => { window.setTimeout(() => {
const window$ = window as any; const window$ = window as any;
@ -37,6 +44,12 @@ export class BraintreeService implements BraintreeServiceAbstraction {
}, 250); }, 250);
} }
/**
* 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) { loadBraintree(containerId: string, autoCreateDropin: boolean) {
const script = window.document.createElement("script"); const script = window.document.createElement("script");
script.id = "dropin-script"; script.id = "dropin-script";
@ -49,6 +62,10 @@ export class BraintreeService implements BraintreeServiceAbstraction {
window.document.head.appendChild(script); window.document.head.appendChild(script);
} }
/**
* 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> { requestPaymentMethod(): Promise<string> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
this.braintree.requestPaymentMethod((error: any, payload: any) => { this.braintree.requestPaymentMethod((error: any, payload: any) => {
@ -62,6 +79,12 @@ export class BraintreeService implements BraintreeServiceAbstraction {
}); });
} }
/**
* 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() { unloadBraintree() {
const script = window.document.getElementById("dropin-script"); const script = window.document.getElementById("dropin-script");
window.document.head.removeChild(script); window.document.head.removeChild(script);

3
apps/web/src/app/billing/services/index.ts Normal file
View File

@ -0,0 +1,3 @@
export * from "./billing-services.module";
export * from "./braintree.service";
export * from "./stripe.service";

39
libs/common/src/billing/services/payment-processors/stripe.service.ts → apps/web/src/app/billing/services/stripe.service.ts
View File

@ -1,8 +1,12 @@
import { LogService } from "../../../platform/abstractions/log.service"; import { Injectable } from "@angular/core";
import { StripeServiceAbstraction } from "../../abstractions";
import { BankAccount } from "../../models/domain";
export class StripeService implements StripeServiceAbstraction { import { BankAccount } from "@bitwarden/common/billing/models/domain";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { BillingServicesModule } from "./billing-services.module";
@Injectable({ providedIn: BillingServicesModule })
export class StripeService {
private stripe: any; private stripe: any;
private elements: any; private elements: any;
private elementIds: { private elementIds: {
@ -13,6 +17,13 @@ export class StripeService implements StripeServiceAbstraction {
constructor(private logService: LogService) {} constructor(private logService: LogService) {}
/**
* 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.
* @param autoMount - A flag indicating whether you want to immediately mount the Stripe credit card elements.
*/
loadStripe( loadStripe(
elementIds: { cardNumber: string; cardExpiry: string; cardCvc: string }, elementIds: { cardNumber: string; cardExpiry: string; cardCvc: string },
autoMount: boolean, autoMount: boolean,
@ -39,6 +50,10 @@ export class StripeService implements StripeServiceAbstraction {
window.document.head.appendChild(script); window.document.head.appendChild(script);
} }
/**
* 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() { mountElements() {
setTimeout(() => { setTimeout(() => {
const cardNumber = this.elements.getElement("cardNumber"); const cardNumber = this.elements.getElement("cardNumber");
@ -50,6 +65,12 @@ export class StripeService implements StripeServiceAbstraction {
}); });
} }
/**
* 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.
*/
async setupBankAccountPaymentMethod( async setupBankAccountPaymentMethod(
clientSecret: string, clientSecret: string,
{ accountHolderName, routingNumber, accountNumber, accountHolderType }: BankAccount, { accountHolderName, routingNumber, accountNumber, accountHolderType }: BankAccount,
@ -73,6 +94,12 @@ export class StripeService implements StripeServiceAbstraction {
return result.setupIntent.payment_method as string; return result.setupIntent.payment_method as 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.
*/
async setupCardPaymentMethod(clientSecret: string): Promise<string> { async setupCardPaymentMethod(clientSecret: string): Promise<string> {
const cardNumber = this.elements.getElement("cardNumber"); const cardNumber = this.elements.getElement("cardNumber");
const result = await this.stripe.confirmCardSetup(clientSecret, { const result = await this.stripe.confirmCardSetup(clientSecret, {
@ -87,6 +114,10 @@ export class StripeService implements StripeServiceAbstraction {
return result.setupIntent.payment_method as string; return result.setupIntent.payment_method as 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() { unloadStripe() {
const script = window.document.getElementById("stripe-script"); const script = window.document.getElementById("stripe-script");
window.document.head.removeChild(script); window.document.head.removeChild(script);

13
apps/web/src/app/billing/shared/payment/payment-v2.component.ts
View File

@ -3,15 +3,12 @@ import { FormControl, FormGroup, Validators } from "@angular/forms";
import { Subject } from "rxjs"; import { Subject } from "rxjs";
import { takeUntil } from "rxjs/operators"; import { takeUntil } from "rxjs/operators";
import { import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
BillingApiServiceAbstraction,
BraintreeServiceAbstraction,
StripeServiceAbstraction,
} from "@bitwarden/common/billing/abstractions";
import { PaymentMethodType } from "@bitwarden/common/billing/enums"; import { PaymentMethodType } from "@bitwarden/common/billing/enums";
import { TokenizedPaymentSourceRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-source.request"; import { TokenizedPaymentSourceRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-source.request";
import { SharedModule } from "../../../shared"; import { SharedModule } from "../../../shared";
import { BillingServicesModule, BraintreeService, StripeService } from "../../services";
/** /**
* Render a form that allows the user to enter their payment method, tokenize it against one of our payment providers and, * Render a form that allows the user to enter their payment method, tokenize it against one of our payment providers and,
@ -23,7 +20,7 @@ import { SharedModule } from "../../../shared";
selector: "app-payment-v2", selector: "app-payment-v2",
templateUrl: "./payment-v2.component.html", templateUrl: "./payment-v2.component.html",
standalone: true, standalone: true,
imports: [SharedModule], imports: [BillingServicesModule, SharedModule],
}) })
export class PaymentV2Component implements OnInit, OnDestroy { export class PaymentV2Component implements OnInit, OnDestroy {
/** Show account credit as a payment option. */ /** Show account credit as a payment option. */
@ -56,8 +53,8 @@ export class PaymentV2Component implements OnInit, OnDestroy {
constructor( constructor(
private billingApiService: BillingApiServiceAbstraction, private billingApiService: BillingApiServiceAbstraction,
private braintreeService: BraintreeServiceAbstraction, private braintreeService: BraintreeService,
private stripeService: StripeServiceAbstraction, private stripeService: StripeService,
) {} ) {}
ngOnInit(): void { ngOnInit(): void {

14
libs/angular/src/services/jslib-services.module.ts
View File

@ -123,16 +123,12 @@ import {
} from "@bitwarden/common/autofill/services/domain-settings.service"; } from "@bitwarden/common/autofill/services/domain-settings.service";
import { import {
BillingApiServiceAbstraction, BillingApiServiceAbstraction,
BraintreeServiceAbstraction,
OrganizationBillingServiceAbstraction, OrganizationBillingServiceAbstraction,
StripeServiceAbstraction,
} from "@bitwarden/common/billing/abstractions"; } from "@bitwarden/common/billing/abstractions";
import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service"; import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
import { DefaultBillingAccountProfileStateService } from "@bitwarden/common/billing/services/account/billing-account-profile-state.service"; import { DefaultBillingAccountProfileStateService } from "@bitwarden/common/billing/services/account/billing-account-profile-state.service";
import { BillingApiService } from "@bitwarden/common/billing/services/billing-api.service"; import { BillingApiService } from "@bitwarden/common/billing/services/billing-api.service";
import { OrganizationBillingService } from "@bitwarden/common/billing/services/organization-billing.service"; import { OrganizationBillingService } from "@bitwarden/common/billing/services/organization-billing.service";
import { BraintreeService } from "@bitwarden/common/billing/services/payment-processors/braintree.service";
import { StripeService } from "@bitwarden/common/billing/services/payment-processors/stripe.service";
import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/platform/abstractions/app-id.service"; import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/platform/abstractions/app-id.service";
import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service"; import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service";
import { BulkEncryptService } from "@bitwarden/common/platform/abstractions/bulk-encrypt.service"; import { BulkEncryptService } from "@bitwarden/common/platform/abstractions/bulk-encrypt.service";
@ -1255,16 +1251,6 @@ const safeProviders: SafeProvider[] = [
useClass: KdfConfigService, useClass: KdfConfigService,
deps: [StateProvider], deps: [StateProvider],
}), }),
safeProvider({
provide: BraintreeServiceAbstraction,
useClass: BraintreeService,
deps: [LogService],
}),
safeProvider({
provide: StripeServiceAbstraction,
useClass: StripeService,
deps: [LogService],
}),
safeProvider({ safeProvider({
provide: SetPasswordJitService, provide: SetPasswordJitService,
useClass: DefaultSetPasswordJitService, useClass: DefaultSetPasswordJitService,

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

@ -1,6 +1,4 @@
export * from "./account/billing-account-profile-state.service"; export * from "./account/billing-account-profile-state.service";
export * from "./billing-api.service.abstraction"; export * from "./billing-api.service.abstraction";
export * from "./organization-billing.service"; 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"; 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;
}