mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 07:43:35 +00:00
Move braintree.service and stripe.service from jslib-services.module into web (#10923)
This commit is contained in:
Alex Morask
GitHub
@@ -0,0 +1,4 @@
|
||||
import { NgModule } from "@angular/core";
|
||||
|
||||
@NgModule({})
|
||||
export class BillingServicesModule {}
|
||||
112
apps/web/src/app/billing/services/braintree.service.ts
Normal file
112
apps/web/src/app/billing/services/braintree.service.ts
Normal file
@@ -0,0 +1,112 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
|
||||
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 containerId: string;
|
||||
|
||||
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() {
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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) {
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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> {
|
||||
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);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
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);
|
||||
}
|
||||
}
|
||||
3
apps/web/src/app/billing/services/index.ts
Normal file
3
apps/web/src/app/billing/services/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export * from "./billing-services.module";
|
||||
export * from "./braintree.service";
|
||||
export * from "./stripe.service";
|
||||
173
apps/web/src/app/billing/services/stripe.service.ts
Normal file
173
apps/web/src/app/billing/services/stripe.service.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
import { Injectable } from "@angular/core";
|
||||
|
||||
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 elements: any;
|
||||
private elementIds: {
|
||||
cardNumber: string;
|
||||
cardExpiry: string;
|
||||
cardCvc: string;
|
||||
};
|
||||
|
||||
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(
|
||||
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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 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() {
|
||||
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);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 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(
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* 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> {
|
||||
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;
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes {@link https://docs.stripe.com/js} from the <head> element of the current page as well as all
|
||||
* Stripe-managed <iframe> elements.
|
||||
*/
|
||||
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;
|
||||
}
|
||||
}
|
||||
@@ -3,15 +3,12 @@ import { FormControl, FormGroup, Validators } from "@angular/forms";
|
||||
import { Subject } from "rxjs";
|
||||
import { takeUntil } from "rxjs/operators";
|
||||
|
||||
import {
|
||||
BillingApiServiceAbstraction,
|
||||
BraintreeServiceAbstraction,
|
||||
StripeServiceAbstraction,
|
||||
} from "@bitwarden/common/billing/abstractions";
|
||||
import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions";
|
||||
import { PaymentMethodType } from "@bitwarden/common/billing/enums";
|
||||
import { TokenizedPaymentSourceRequest } from "@bitwarden/common/billing/models/request/tokenized-payment-source.request";
|
||||
|
||||
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,
|
||||
@@ -23,7 +20,7 @@ import { SharedModule } from "../../../shared";
|
||||
selector: "app-payment-v2",
|
||||
templateUrl: "./payment-v2.component.html",
|
||||
standalone: true,
|
||||
imports: [SharedModule],
|
||||
imports: [BillingServicesModule, SharedModule],
|
||||
})
|
||||
export class PaymentV2Component implements OnInit, OnDestroy {
|
||||
/** Show account credit as a payment option. */
|
||||
@@ -56,8 +53,8 @@ export class PaymentV2Component implements OnInit, OnDestroy {
|
||||
|
||||
constructor(
|
||||
private billingApiService: BillingApiServiceAbstraction,
|
||||
private braintreeService: BraintreeServiceAbstraction,
|
||||
private stripeService: StripeServiceAbstraction,
|
||||
private braintreeService: BraintreeService,
|
||||
private stripeService: StripeService,
|
||||
) {}
|
||||
|
||||
ngOnInit(): void {
|
||||
|
||||
Reference in New Issue
Block a user