@internetarchive/donation-monthly-portal 0.0.0-payment-method-alpha1 → 0.0.0-payment-method-alpha2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -3,6 +3,7 @@ import { LitElement, html, css } from 'lit';
|
|
|
3
3
|
import { customElement, property, state } from 'lit/decorators.js';
|
|
4
4
|
import { HostedFieldContainer, HostedFieldName } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-providers/credit-card/hosted-field-container';
|
|
5
5
|
import { BraintreeManager } from '@internetarchive/donation-form';
|
|
6
|
+
import '@internetarchive/lazy-loader-service';
|
|
6
7
|
import creditCardImg from '@internetarchive/icon-credit-card/index.js';
|
|
7
8
|
import calendarImg from '@internetarchive/icon-calendar/index.js';
|
|
8
9
|
import lockImg from '@internetarchive/icon-lock/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"braintree-manager.js","sourceRoot":"","sources":["../../../../src/form-sections/parts/braintree-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { HostedFieldContainer, HostedFieldName } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-providers/credit-card/hosted-field-container';\nimport { BraintreeManager, BraintreeManagerInterface, HostingEnvironment } from '@internetarchive/donation-form';\nimport type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';\nimport type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';\n\nimport creditCardImg from '@internetarchive/icon-credit-card/index.js';\nimport calendarImg from '@internetarchive/icon-calendar/index.js';\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport type { MonthlyPlan } from '../../models/plan';\n\n\ntype PaymentConfig = {\n braintreeAuthToken?: string;\n endpointManager?: BraintreeEndpointManagerInterface;\n paymentClients?: PaymentClientsInterface;\n environment?: HostingEnvironment;\n venmoProfileId?: string;\n googlePayMerchantId?: string;\n};\n\ntype PaymentMethodTypes = 'credit-card' | 'paypal' | 'venmo' | 'google-pay';\n\n@customElement('ia-mgc-braintree-manager')\nexport class MGCBraintreeManager extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n @property({ type: Boolean, reflect: true }) displayCreditCard: boolean = false;\n\n @property({ type: String }) patronEmail: string = '';\n\n @property({ type: Object}) paymentConfig?: PaymentConfig;\n\n @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n @state() private elementConnected: boolean = false;\n\n get braintreeInputs(): { errorMessage: HTMLDivElement | null; number: HTMLDivElement | null; cvv: HTMLDivElement | null; expirationDate: HTMLDivElement | null } {\n return {\n errorMessage: this.querySelector('#braintree-error-message') as HTMLDivElement | null,\n number: this.querySelector('#braintree-creditcard') as HTMLDivElement | null,\n cvv: this.querySelector('#braintree-cvv') as HTMLDivElement | null,\n expirationDate: this.querySelector('#braintree-expiration') as HTMLDivElement | null,\n };\n }\n\n createRenderRoot() {\n return this;\n }\n\n disconnectedCallback(): void {\n this.elementConnected = false;\n }\n\n connectedCallback(): void {\n // eslint-disable-next-line wc/guard-super-call\n super.connectedCallback();\n\n console.log('connectedCallback', { paymentConfig: this.paymentConfig });\n\n this.elementConnected = true;\n }\n\n protected updated(changed: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n const elementHasConnectedToDOM = changed.has('elementConnected') && this.elementConnected;\n if (elementHasConnectedToDOM) {\n if (this.paymentConfig) {\n const { braintreeAuthToken, endpointManager, paymentClients, environment } = this.paymentConfig || {};\n \n const needsBraintreeManager = !this.braintreeManager &&\n braintreeAuthToken &&\n endpointManager &&\n paymentClients &&\n environment;\n if (needsBraintreeManager) {\n this.setupBraintreeManager();\n }\n\n }\n }\n\n if (this.braintreeManager && (changed.has('displayCreditCard') && this.displayCreditCard)) {\n this.setupCreditCardHandler();\n }\n }\n\n async validateCreditCardFields() {\n const handler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n let tokenized = false;\n let hostedFieldsResponse = null;\n try {\n hostedFieldsResponse = await handler?.tokenizeHostedFields();\n tokenized = true;\n } catch (e) {\n const error = e as unknown as any;\n\n handler?.showErrorMessage();\n\n // todo: move these codes to an enum/type\n switch (error.code) {\n case 'HOSTED_FIELDS_FIELDS_EMPTY':\n // occurs when none of the fields are filled in\n handler?.markFieldErrors([\n HostedFieldName.Number,\n HostedFieldName.CVV,\n HostedFieldName.ExpirationDate,\n ]);\n break;\n case 'HOSTED_FIELDS_FIELDS_INVALID':\n // occurs when certain fields do not pass client side validationto\n // Object.keys(.details.invalidFields).forEach(key => {\n // handler?.markFieldErrors([key as HostedFieldName]);\n // });\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':\n // occurs when: \n // * the client token used for client authorization was generated\n // with a customer ID and the fail on duplicate payment method\n // option is set to true\n // * the card being tokenized has previously been vaulted (with any customer)\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':\n // occurs when:\n // * the client token used for client authorization was generated\n // with a customer ID and the verify card option is set to true\n // and you have credit card verification turned on in the Braintree\n // control panel\n // * the cvv does not pass verfication\n handler?.markFieldErrors([HostedFieldName.CVV]);\n break;\n case 'HOSTED_FIELDS_FAILED_TOKENIZATION':\n // occurs for any other tokenization error on the server\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':\n // occurs when the Braintree gateway cannot be contacted\n break;\n default:\n // something else happened\n break;\n }\n }\n\n\n if (!tokenized) {\n return false;\n }\n\n return hostedFieldsResponse;\n }\n\n async setupCreditCardHandler() {\n // braintree turn on hosted fields\n const handler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n try {\n await handler?.tokenizeHostedFields();\n } catch (e) {\n // todo: show error message only about fields not loading\n }\n\n handler?.removeFieldErrors([\n HostedFieldName.Number,\n HostedFieldName.CVV,\n HostedFieldName.ExpirationDate,\n ]);\n }\n\n render() {\n return html`\n <div>${this.creditCardTemplate}</div>\n `;\n }\n\n lightDomCSS(): CSSResult {\n return css`\n contact-form form badged-input {\n width: 100%;\n }\n\n #ia-mgc-cc-area .braintree-input {\n width: 100%;\n display: block;\n height: stretch;\n height: -webkit-fill-available;\n }\n `;\n };\n\n get creditCardTemplate() {\n return html`\n <div id=\"ia-mgc-cc-area\" style=\"border: 1px sold red;\">\n <style>\n ${this.lightDomCSS()}\n </style>\n <div id=\"braintree-error-message\"></div>\n <div class=\"braintree-row\">\n <badged-input .icon=${creditCardImg} ?required=${true} class=\"creditcard\">\n <div class=\"braintree-input\" id=\"braintree-creditcard\"></div>\n </badged-input>\n </div>\n <div class=\"braintree-row\">\n <badged-input .icon=${calendarImg} ?required=${true} class=\"expiration\">\n <div class=\"braintree-input\" id=\"braintree-expiration\"></div>\n </badged-input>\n <badged-input .icon=${lockImg} ?required=${true} class=\"cvv\">\n <div class=\"braintree-input\" id=\"braintree-cvv\"></div>\n </badged-input>\n </div>\n </div>\n `;\n }\n\n private async setupBraintreeManager(): Promise<void> {\n this.braintreeManager = new BraintreeManager({\n paymentClients: this.paymentConfig?.paymentClients ?? ({} as PaymentClientsInterface),\n endpointManager: this.paymentConfig?.endpointManager as BraintreeEndpointManagerInterface,\n authorizationToken: this.paymentConfig?.braintreeAuthToken ?? '',\n venmoProfileId: this.paymentConfig?.venmoProfileId,\n googlePayMerchantId: this.paymentConfig?.googlePayMerchantId,\n hostedFieldConfig: {\n hostedFieldStyle: {}, // Provide your custom style object here\n hostedFieldFieldOptions: {\n number: {\n selector: '#braintree-creditcard',\n placeholder: 'Card number',\n },\n cvv: {\n selector: '#braintree-cvv',\n placeholder: 'CVC',\n },\n expirationDate: {\n selector: '#braintree-expiration',\n placeholder: 'MM / YY',\n },\n }, // Provide your custom field options here\n hostedFieldContainer: new HostedFieldContainer({\n number: this.braintreeInputs.number as HTMLDivElement,\n cvv: this.braintreeInputs.cvv as HTMLDivElement,\n expirationDate: this.braintreeInputs.expirationDate as HTMLDivElement,\n errorContainer: this.braintreeInputs.errorMessage as HTMLDivElement,\n }),\n },\n hostingEnvironment: this.paymentConfig?.environment as HostingEnvironment,\n referrer: window.location.href,\n loggedInUser: this.patronEmail,\n origin: window.location.origin,\n });\n\n this.braintreeManager.on('paymentProvidersHostedFieldsRetry', (retryNumber: number) => {\n const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {\n detail: { retryNumber },\n });\n this.dispatchEvent(event);\n });\n\n this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error: unknown) => {\n const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {\n detail: { error },\n });\n this.dispatchEvent(event);\n });\n }\n\n get contactForm(): HTMLFormElement | null {\n return this.querySelector('form[name=\"contact-form\"]');\n }\n\n\n /*\n Check and collect data\n */\n paymentMethodChangeRequested() {\n \n // // \n // const { creditCardHandler } = this.braintreeManager?.paymentProviders ?? {};\n\n // const contactFormIsValid = this.contactForm?.reportValidity();\n // if (!contactFormIsValid) {\n // console.log('form is invalid');\n // return;\n // }\n\n // // if ()\n // // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n // console.log(\"CC hostedFieldsResponse\", hostedFieldsResponse);\n }\n\n async setupPaymentHandlers() {\n // const creditCardFlowHandler = this.paymentConfig?.paymentFlowHandlers?.creditCardHandler;\n const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n creditCardHandler?.hideErrorMessage();\n // const valid = this.contactForm?.reportValidity();\n // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n // console.log(\"CC hostedFieldsResponse\", hostedFieldsResponse);\n debugger;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"braintree-manager.js","sourceRoot":"","sources":["../../../../src/form-sections/parts/braintree-manager.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, css, CSSResult, PropertyValueMap } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\nimport { HostedFieldContainer, HostedFieldName } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-providers/credit-card/hosted-field-container';\nimport { BraintreeManager, BraintreeManagerInterface, HostingEnvironment } from '@internetarchive/donation-form';\nimport type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';\nimport type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';\nimport { LazyLoaderService } from '@internetarchive/lazy-loader-service';\n\nimport creditCardImg from '@internetarchive/icon-credit-card/index.js';\nimport calendarImg from '@internetarchive/icon-calendar/index.js';\nimport lockImg from '@internetarchive/icon-lock/index.js';\n\nimport type { MonthlyPlan } from '../../models/plan';\n\n\ntype PaymentConfig = {\n braintreeAuthToken?: string;\n endpointManager?: BraintreeEndpointManagerInterface;\n paymentClients?: PaymentClientsInterface;\n environment?: HostingEnvironment;\n venmoProfileId?: string;\n googlePayMerchantId?: string;\n};\n\ntype PaymentMethodTypes = 'credit-card' | 'paypal' | 'venmo' | 'google-pay';\n\n@customElement('ia-mgc-braintree-manager')\nexport class MGCBraintreeManager extends LitElement {\n @property({ type: Object }) plan?: MonthlyPlan;\n\n @property({ type: Boolean, reflect: true }) displayCreditCard: boolean = false;\n\n @property({ type: String }) patronEmail: string = '';\n\n @property({ type: Object}) paymentConfig?: PaymentConfig;\n\n @property({ type: Object }) braintreeManager?: BraintreeManagerInterface;\n\n @state() private elementConnected: boolean = false;\n\n get braintreeInputs(): { errorMessage: HTMLDivElement | null; number: HTMLDivElement | null; cvv: HTMLDivElement | null; expirationDate: HTMLDivElement | null } {\n return {\n errorMessage: this.querySelector('#braintree-error-message') as HTMLDivElement | null,\n number: this.querySelector('#braintree-creditcard') as HTMLDivElement | null,\n cvv: this.querySelector('#braintree-cvv') as HTMLDivElement | null,\n expirationDate: this.querySelector('#braintree-expiration') as HTMLDivElement | null,\n };\n }\n\n createRenderRoot() {\n return this;\n }\n\n disconnectedCallback(): void {\n this.elementConnected = false;\n }\n\n connectedCallback(): void {\n // eslint-disable-next-line wc/guard-super-call\n super.connectedCallback();\n\n console.log('connectedCallback', { paymentConfig: this.paymentConfig });\n\n this.elementConnected = true;\n }\n\n protected updated(changed: PropertyValueMap<any> | Map<PropertyKey, unknown>): void {\n const elementHasConnectedToDOM = changed.has('elementConnected') && this.elementConnected;\n if (elementHasConnectedToDOM) {\n if (this.paymentConfig) {\n const { braintreeAuthToken, endpointManager, paymentClients, environment } = this.paymentConfig || {};\n \n const needsBraintreeManager = !this.braintreeManager &&\n braintreeAuthToken &&\n endpointManager &&\n paymentClients &&\n environment;\n if (needsBraintreeManager) {\n this.setupBraintreeManager();\n }\n\n }\n }\n\n if (this.braintreeManager && (changed.has('displayCreditCard') && this.displayCreditCard)) {\n this.setupCreditCardHandler();\n }\n }\n\n async validateCreditCardFields() {\n const handler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n let tokenized = false;\n let hostedFieldsResponse = null;\n try {\n hostedFieldsResponse = await handler?.tokenizeHostedFields();\n tokenized = true;\n } catch (e) {\n const error = e as unknown as any;\n\n handler?.showErrorMessage();\n\n // todo: move these codes to an enum/type\n switch (error.code) {\n case 'HOSTED_FIELDS_FIELDS_EMPTY':\n // occurs when none of the fields are filled in\n handler?.markFieldErrors([\n HostedFieldName.Number,\n HostedFieldName.CVV,\n HostedFieldName.ExpirationDate,\n ]);\n break;\n case 'HOSTED_FIELDS_FIELDS_INVALID':\n // occurs when certain fields do not pass client side validationto\n // Object.keys(.details.invalidFields).forEach(key => {\n // handler?.markFieldErrors([key as HostedFieldName]);\n // });\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_FAIL_ON_DUPLICATE':\n // occurs when: \n // * the client token used for client authorization was generated\n // with a customer ID and the fail on duplicate payment method\n // option is set to true\n // * the card being tokenized has previously been vaulted (with any customer)\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_CVV_VERIFICATION_FAILED':\n // occurs when:\n // * the client token used for client authorization was generated\n // with a customer ID and the verify card option is set to true\n // and you have credit card verification turned on in the Braintree\n // control panel\n // * the cvv does not pass verfication\n handler?.markFieldErrors([HostedFieldName.CVV]);\n break;\n case 'HOSTED_FIELDS_FAILED_TOKENIZATION':\n // occurs for any other tokenization error on the server\n break;\n case 'HOSTED_FIELDS_TOKENIZATION_NETWORK_ERROR':\n // occurs when the Braintree gateway cannot be contacted\n break;\n default:\n // something else happened\n break;\n }\n }\n\n\n if (!tokenized) {\n return false;\n }\n\n return hostedFieldsResponse;\n }\n\n async setupCreditCardHandler() {\n // braintree turn on hosted fields\n const handler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n try {\n await handler?.tokenizeHostedFields();\n } catch (e) {\n // todo: show error message only about fields not loading\n }\n\n handler?.removeFieldErrors([\n HostedFieldName.Number,\n HostedFieldName.CVV,\n HostedFieldName.ExpirationDate,\n ]);\n }\n\n render() {\n return html`\n <div>${this.creditCardTemplate}</div>\n `;\n }\n\n lightDomCSS(): CSSResult {\n return css`\n contact-form form badged-input {\n width: 100%;\n }\n\n #ia-mgc-cc-area .braintree-input {\n width: 100%;\n display: block;\n height: stretch;\n height: -webkit-fill-available;\n }\n `;\n };\n\n get creditCardTemplate() {\n return html`\n <div id=\"ia-mgc-cc-area\" style=\"border: 1px sold red;\">\n <style>\n ${this.lightDomCSS()}\n </style>\n <div id=\"braintree-error-message\"></div>\n <div class=\"braintree-row\">\n <badged-input .icon=${creditCardImg} ?required=${true} class=\"creditcard\">\n <div class=\"braintree-input\" id=\"braintree-creditcard\"></div>\n </badged-input>\n </div>\n <div class=\"braintree-row\">\n <badged-input .icon=${calendarImg} ?required=${true} class=\"expiration\">\n <div class=\"braintree-input\" id=\"braintree-expiration\"></div>\n </badged-input>\n <badged-input .icon=${lockImg} ?required=${true} class=\"cvv\">\n <div class=\"braintree-input\" id=\"braintree-cvv\"></div>\n </badged-input>\n </div>\n </div>\n `;\n }\n\n private async setupBraintreeManager(): Promise<void> {\n this.braintreeManager = new BraintreeManager({\n paymentClients: this.paymentConfig?.paymentClients ?? ({} as PaymentClientsInterface),\n endpointManager: this.paymentConfig?.endpointManager as BraintreeEndpointManagerInterface,\n authorizationToken: this.paymentConfig?.braintreeAuthToken ?? '',\n venmoProfileId: this.paymentConfig?.venmoProfileId,\n googlePayMerchantId: this.paymentConfig?.googlePayMerchantId,\n hostedFieldConfig: {\n hostedFieldStyle: {}, // Provide your custom style object here\n hostedFieldFieldOptions: {\n number: {\n selector: '#braintree-creditcard',\n placeholder: 'Card number',\n },\n cvv: {\n selector: '#braintree-cvv',\n placeholder: 'CVC',\n },\n expirationDate: {\n selector: '#braintree-expiration',\n placeholder: 'MM / YY',\n },\n }, // Provide your custom field options here\n hostedFieldContainer: new HostedFieldContainer({\n number: this.braintreeInputs.number as HTMLDivElement,\n cvv: this.braintreeInputs.cvv as HTMLDivElement,\n expirationDate: this.braintreeInputs.expirationDate as HTMLDivElement,\n errorContainer: this.braintreeInputs.errorMessage as HTMLDivElement,\n }),\n },\n hostingEnvironment: this.paymentConfig?.environment as HostingEnvironment,\n referrer: window.location.href,\n loggedInUser: this.patronEmail,\n origin: window.location.origin,\n });\n\n this.braintreeManager.on('paymentProvidersHostedFieldsRetry', (retryNumber: number) => {\n const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {\n detail: { retryNumber },\n });\n this.dispatchEvent(event);\n });\n\n this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error: unknown) => {\n const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {\n detail: { error },\n });\n this.dispatchEvent(event);\n });\n }\n\n get contactForm(): HTMLFormElement | null {\n return this.querySelector('form[name=\"contact-form\"]');\n }\n\n\n /*\n Check and collect data\n */\n paymentMethodChangeRequested() {\n \n // // \n // const { creditCardHandler } = this.braintreeManager?.paymentProviders ?? {};\n\n // const contactFormIsValid = this.contactForm?.reportValidity();\n // if (!contactFormIsValid) {\n // console.log('form is invalid');\n // return;\n // }\n\n // // if ()\n // // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n // console.log(\"CC hostedFieldsResponse\", hostedFieldsResponse);\n }\n\n async setupPaymentHandlers() {\n // const creditCardFlowHandler = this.paymentConfig?.paymentFlowHandlers?.creditCardHandler;\n const creditCardHandler = await this.braintreeManager?.paymentProviders.creditCardHandler.get();\n creditCardHandler?.hideErrorMessage();\n // const valid = this.contactForm?.reportValidity();\n // const hostedFieldsResponse = await creditCardFlowHandler?.tokenizeFields();\n // console.log(\"CC hostedFieldsResponse\", hostedFieldsResponse);\n debugger;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -5,6 +5,7 @@ import { HostedFieldContainer, HostedFieldName } from '@internetarchive/donation
|
|
|
5
5
|
import { BraintreeManager, BraintreeManagerInterface, HostingEnvironment } from '@internetarchive/donation-form';
|
|
6
6
|
import type { BraintreeEndpointManagerInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/braintree-interfaces.js';
|
|
7
7
|
import type { PaymentClientsInterface } from '@internetarchive/donation-form/dist/src/braintree-manager/payment-clients.js';
|
|
8
|
+
import { LazyLoaderService } from '@internetarchive/lazy-loader-service';
|
|
8
9
|
|
|
9
10
|
import creditCardImg from '@internetarchive/icon-credit-card/index.js';
|
|
10
11
|
import calendarImg from '@internetarchive/icon-calendar/index.js';
|