@internetarchive/donation-form 0.5.8 → 0.5.9-alpha.1

package/dist/test/tests/form-elements/payment-selector.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"payment-selector.test.js","sourceRoot":"","sources":["../../../../test/tests/form-elements/payment-selector.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, fixture, expect, elementUpdated, oneEvent } from '@open-wc/testing';\nimport { PaymentSelector } from '../../../src/form-elements/payment-selector';\nimport '../../../src/form-elements/payment-selector';\nimport { MockPaymentProviders } from '../../mocks/payment-providers/mock-payment-providers';\nimport { promisedSleep } from '../../helpers/promisedSleep';\n\ndescribe('Payment Selector', () => {\n  it('shows Venmo if it is available', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n\n    const paymentProviders = new MockPaymentProviders();\n    el.paymentProviders = paymentProviders;\n    await elementUpdated(el);\n    await promisedSleep(250);\n\n    const venmoButton = el.shadowRoot?.querySelector('.venmo.provider-button');\n    expect(venmoButton?.classList.contains('available')).to.be.true;\n  });\n\n  it('can show PayPal when called', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    el.showPaypalButton();\n    await elementUpdated(el);\n    const paypalButton = el.shadowRoot?.querySelector('.paypal-container.provider-button');\n    expect(paypalButton?.classList.contains('available')).to.be.true;\n  });\n\n  it('emits paypalBlockerSelected event when paypal is selected in an error state', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    const paypalBlocker = el.shadowRoot?.querySelector('.paypal-local-button');\n    const clickEvent = new MouseEvent('click');\n    setTimeout(() => {\n      paypalBlocker?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'paypalBlockerSelected');\n    expect(response).to.exist;\n  });\n\n  it('emits applePaySelected event with original click event when ApplePay is selected', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    const paypalBlocker = el.shadowRoot?.querySelector('.applepay.provider-button');\n    const clickEvent = new MouseEvent('click');\n    setTimeout(() => {\n      paypalBlocker?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'applePaySelected');\n    const event = response.detail.originalEvent;\n    expect(event).to.equal(clickEvent);\n  });\n\n  it('emits googlePaySelected when GooglePay is selected', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    const paypalBlocker = el.shadowRoot?.querySelector('.googlepay.provider-button');\n    const clickEvent = new MouseEvent('click');\n    setTimeout(() => {\n      paypalBlocker?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'googlePaySelected');\n    expect(response).to.exist;\n  });\n});\n"]}
+{"version":3,"file":"payment-selector.test.js","sourceRoot":"","sources":["../../../../test/tests/form-elements/payment-selector.test.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEnF,OAAO,6CAA6C,CAAC;AACrD,OAAO,EAAE,oBAAoB,EAAE,MAAM,sDAAsD,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAEhE,QAAQ,CAAC,kBAAkB,EAAE,GAAG,EAAE;IAChC,EAAE,CAAC,gCAAgC,EAAE,GAAS,EAAE;;QAC9C,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAoB,CAAC;QAEvB,MAAM,gBAAgB,GAAG,IAAI,oBAAoB,EAAE,CAAC;QACpD,EAAE,CAAC,gBAAgB,GAAG,gBAAgB,CAAC;QACvC,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,aAAa,CAAC,GAAG,CAAC,CAAC;QAEzB,MAAM,WAAW,SAAG,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,wBAAwB,CAAC,CAAC;QAC3E,MAAM,CAAC,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IAClE,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,6BAA6B,EAAE,GAAS,EAAE;;QAC3C,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAoB,CAAC;QACvB,EAAE,CAAC,gBAAgB,EAAE,CAAC;QACtB,MAAM,cAAc,CAAC,EAAE,CAAC,CAAC;QACzB,MAAM,YAAY,SAAG,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,mCAAmC,CAAC,CAAC;QACvF,MAAM,CAAC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAC;IACnE,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,6EAA6E,EAAE,GAAS,EAAE;;QAC3F,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAoB,CAAC;QACvB,MAAM,aAAa,SAAG,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,sBAAsB,CAAC,CAAC;QAC3E,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,UAAU,CAAC,GAAG,EAAE;YACd,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC,UAAU,EAAE;QAC3C,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,uBAAuB,CAAC,CAAC;QAC7D,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC5B,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,kFAAkF,EAAE,GAAS,EAAE;;QAChG,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAoB,CAAC;QACvB,MAAM,aAAa,SAAG,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,2BAA2B,CAAC,CAAC;QAChF,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,UAAU,CAAC,GAAG,EAAE;YACd,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC,UAAU,EAAE;QAC3C,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,kBAAkB,CAAC,CAAC;QACxD,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,CAAC,aAAa,CAAC;QAC5C,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IACrC,CAAC,CAAA,CAAC,CAAC;IAEH,EAAE,CAAC,oDAAoD,EAAE,GAAS,EAAE;;QAClE,MAAM,EAAE,GAAG,CAAC,MAAM,OAAO,CAAC,IAAI,CAAA;;KAE7B,CAAC,CAAoB,CAAC;QACvB,MAAM,aAAa,SAAG,EAAE,CAAC,UAAU,0CAAE,aAAa,CAAC,4BAA4B,CAAC,CAAC;QACjF,MAAM,UAAU,GAAG,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC;QAC3C,UAAU,CAAC,GAAG,EAAE;YACd,aAAa,aAAb,aAAa,uBAAb,aAAa,CAAE,aAAa,CAAC,UAAU,EAAE;QAC3C,CAAC,CAAC,CAAC;QACH,MAAM,QAAQ,GAAG,MAAM,QAAQ,CAAC,EAAE,EAAE,mBAAmB,CAAC,CAAC;QACzD,MAAM,CAAC,QAAQ,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC;IAC5B,CAAC,CAAA,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, fixture, expect, elementUpdated, oneEvent } from '@open-wc/testing';\nimport { PaymentSelector } from '../../../src/form-elements/payment-selector';\nimport '../../../src/form-elements/payment-selector';\nimport { MockPaymentProviders } from '../../mocks/payment-providers/mock-payment-providers';\nimport { promisedSleep } from '../../../src/util/promisedSleep';\n\ndescribe('Payment Selector', () => {\n  it('shows Venmo if it is available', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n\n    const paymentProviders = new MockPaymentProviders();\n    el.paymentProviders = paymentProviders;\n    await elementUpdated(el);\n    await promisedSleep(250);\n\n    const venmoButton = el.shadowRoot?.querySelector('.venmo.provider-button');\n    expect(venmoButton?.classList.contains('available')).to.be.true;\n  });\n\n  it('can show PayPal when called', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    el.showPaypalButton();\n    await elementUpdated(el);\n    const paypalButton = el.shadowRoot?.querySelector('.paypal-container.provider-button');\n    expect(paypalButton?.classList.contains('available')).to.be.true;\n  });\n\n  it('emits paypalBlockerSelected event when paypal is selected in an error state', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    const paypalBlocker = el.shadowRoot?.querySelector('.paypal-local-button');\n    const clickEvent = new MouseEvent('click');\n    setTimeout(() => {\n      paypalBlocker?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'paypalBlockerSelected');\n    expect(response).to.exist;\n  });\n\n  it('emits applePaySelected event with original click event when ApplePay is selected', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    const paypalBlocker = el.shadowRoot?.querySelector('.applepay.provider-button');\n    const clickEvent = new MouseEvent('click');\n    setTimeout(() => {\n      paypalBlocker?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'applePaySelected');\n    const event = response.detail.originalEvent;\n    expect(event).to.equal(clickEvent);\n  });\n\n  it('emits googlePaySelected when GooglePay is selected', async () => {\n    const el = (await fixture(html`\n      <payment-selector></payment-selector>\n    `)) as PaymentSelector;\n    const paypalBlocker = el.shadowRoot?.querySelector('.googlepay.provider-button');\n    const clickEvent = new MouseEvent('click');\n    setTimeout(() => {\n      paypalBlocker?.dispatchEvent(clickEvent);\n    });\n    const response = await oneEvent(el, 'googlePaySelected');\n    expect(response).to.exist;\n  });\n});\n"]}

package/dist/test/tests/payment-providers/creditcard.test.js

@@ -6,8 +6,13 @@ import { mockHostedFieldTokenizePayload } from '../../mocks/payment-clients/mock
 import { CreditCardHandler } from '../../../src/braintree-manager/payment-providers/credit-card/credit-card';
 import { MockHostedFieldContainer } from '../../mocks/mock-hosted-fields-container';
 import { HostedFieldConfiguration } from '../../../src/braintree-manager/payment-providers/credit-card/hosted-field-configuration';
+import Sinon from 'sinon';
 import { mockHostedFieldStyle, mockHostedFieldFieldOptions, mockHostedFieldConfig, } from '../../mocks/mock-hosted-fields-config';
+const sandbox = Sinon.createSandbox();
 describe('CreditCardHandler', () => {
+    afterEach(() => {
+        sandbox.restore();
+    });
     it('can tokenize the hosted fields', () => __awaiter(void 0, void 0, void 0, function* () {
         const braintreeManager = new MockBraintreeManager();
         const client = new MockHostedFieldsClient({
@@ -89,5 +94,101 @@ describe('CreditCardHandler', () => {
         handler.hideErrorMessage();
         expect(mockHostedFieldContainer.hideErrorMessageCalled).to.be.true;
     }));
+    it('retries the expected number of times before failure', () => __awaiter(void 0, void 0, void 0, function* () {
+        const braintreeManager = new MockBraintreeManager();
+        const client = new MockHostedFieldsClient();
+        let retryCount = 0;
+        Sinon.stub(client, 'create').callsFake(() => {
+            retryCount++;
+            throw new Error('Error');
+        });
+        const mockHostedFieldContainer = new MockHostedFieldContainer();
+        const hostedFieldsSpy = Sinon.spy(mockHostedFieldContainer, 'resetHostedFields');
+        const mockHostedFieldConfig = new HostedFieldConfiguration({
+            hostedFieldStyle: mockHostedFieldStyle,
+            hostedFieldFieldOptions: mockHostedFieldFieldOptions,
+            hostedFieldContainer: mockHostedFieldContainer,
+        });
+        const handler = new CreditCardHandler({
+            braintreeManager: braintreeManager,
+            hostedFieldClient: client,
+            hostedFieldConfig: mockHostedFieldConfig,
+            retryInverval: 0.01,
+            maxRetryCount: 3,
+            loadTimeout: 0.01,
+        });
+        try {
+            yield handler.instance.get();
+            expect.fail('Should have thrown an error');
+        }
+        catch (e) { }
+        // initial call + 3 retries
+        expect(retryCount).to.equal(4);
+        expect(hostedFieldsSpy.callCount).to.equal(4);
+    }));
+    it('retries creating the hosted fields if they fail', () => __awaiter(void 0, void 0, void 0, function* () {
+        const braintreeManager = new MockBraintreeManager();
+        const client = new MockHostedFieldsClient();
+        let retryCount = 0;
+        Sinon.stub(client, 'create').callsFake(() => {
+            if (retryCount < 2) {
+                retryCount++;
+                throw new Error('Error');
+            }
+            return Promise.resolve(client);
+        });
+        const mockHostedFieldContainer = new MockHostedFieldContainer();
+        const mockHostedFieldConfig = new HostedFieldConfiguration({
+            hostedFieldStyle: mockHostedFieldStyle,
+            hostedFieldFieldOptions: mockHostedFieldFieldOptions,
+            hostedFieldContainer: mockHostedFieldContainer,
+        });
+        const handler = new CreditCardHandler({
+            braintreeManager: braintreeManager,
+            hostedFieldClient: client,
+            hostedFieldConfig: mockHostedFieldConfig,
+            retryInverval: 0.01,
+            maxRetryCount: 3,
+            loadTimeout: 0.01,
+        });
+        const instance = yield handler.instance.get();
+        expect(instance).to.not.be.null;
+        expect(retryCount).to.equal(2);
+    }));
+    it('emits an event when retrying or failing', () => __awaiter(void 0, void 0, void 0, function* () {
+        const braintreeManager = new MockBraintreeManager();
+        const client = new MockHostedFieldsClient();
+        Sinon.stub(client, 'create').callsFake(() => {
+            throw new Error('Error');
+        });
+        const mockHostedFieldContainer = new MockHostedFieldContainer();
+        const mockHostedFieldConfig = new HostedFieldConfiguration({
+            hostedFieldStyle: mockHostedFieldStyle,
+            hostedFieldFieldOptions: mockHostedFieldFieldOptions,
+            hostedFieldContainer: mockHostedFieldContainer,
+        });
+        const handler = new CreditCardHandler({
+            braintreeManager: braintreeManager,
+            hostedFieldClient: client,
+            hostedFieldConfig: mockHostedFieldConfig,
+            retryInverval: 0.01,
+            maxRetryCount: 3,
+            loadTimeout: 0.01,
+        });
+        let retryCountEvent = 0;
+        let retryFailedEvent = 0;
+        handler.on('hostedFieldsRetry', () => {
+            retryCountEvent++;
+        });
+        handler.on('hostedFieldsFailed', () => {
+            retryFailedEvent++;
+        });
+        try {
+            yield handler.instance.get();
+        }
+        catch (e) { }
+        expect(retryCountEvent).to.equal(3);
+        expect(retryFailedEvent).to.equal(1);
+    }));
 });
 //# sourceMappingURL=creditcard.test.js.map

package/dist/test/tests/payment-providers/creditcard.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"creditcard.test.js","sourceRoot":"","sources":["../../../../test/tests/payment-providers/creditcard.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { MockBraintreeManager } from '../../mocks/mock-braintree-manager';\nimport { MockHostedFieldsClient } from '../../mocks/payment-clients/mock-hostedfields-client';\nimport { mockHostedFieldTokenizePayload } from '../../mocks/payment-clients/mock-hostedfieldtokenizepayload';\nimport { CreditCardHandler } from '../../../src/braintree-manager/payment-providers/credit-card/credit-card';\nimport { MockHostedFieldContainer } from '../../mocks/mock-hosted-fields-container';\nimport { HostedFieldConfiguration } from '../../../src/braintree-manager/payment-providers/credit-card/hosted-field-configuration';\nimport {\n  mockHostedFieldStyle,\n  mockHostedFieldFieldOptions,\n  mockHostedFieldConfig,\n} from '../../mocks/mock-hosted-fields-config';\n\ndescribe('CreditCardHandler', () => {\n  it('can tokenize the hosted fields', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient({\n      mockHostedFieldTokenizePayload: mockHostedFieldTokenizePayload,\n    });\n\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n\n    const payload = await handler.tokenizeHostedFields();\n\n    expect(payload?.nonce).to.equal(mockHostedFieldTokenizePayload.nonce);\n  });\n\n  it('can mark field errors', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.markFieldErrors([]);\n    expect(mockHostedFieldContainer.markErrorsCalled).to.be.true;\n  });\n\n  it('can remove field errors', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.removeFieldErrors([]);\n    expect(mockHostedFieldContainer.removeErrorsCalled).to.be.true;\n  });\n\n  it('can show the error message', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.showErrorMessage();\n    expect(mockHostedFieldContainer.showErrorMessageCalled).to.be.true;\n  });\n\n  it('can hide the error message', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.hideErrorMessage();\n    expect(mockHostedFieldContainer.hideErrorMessageCalled).to.be.true;\n  });\n});\n"]}
+{"version":3,"file":"creditcard.test.js","sourceRoot":"","sources":["../../../../test/tests/payment-providers/creditcard.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { expect } from '@open-wc/testing';\nimport { MockBraintreeManager } from '../../mocks/mock-braintree-manager';\nimport { MockHostedFieldsClient } from '../../mocks/payment-clients/mock-hostedfields-client';\nimport { mockHostedFieldTokenizePayload } from '../../mocks/payment-clients/mock-hostedfieldtokenizepayload';\nimport { CreditCardHandler } from '../../../src/braintree-manager/payment-providers/credit-card/credit-card';\nimport { MockHostedFieldContainer } from '../../mocks/mock-hosted-fields-container';\nimport { HostedFieldConfiguration } from '../../../src/braintree-manager/payment-providers/credit-card/hosted-field-configuration';\nimport Sinon from 'sinon';\nimport {\n  mockHostedFieldStyle,\n  mockHostedFieldFieldOptions,\n  mockHostedFieldConfig,\n} from '../../mocks/mock-hosted-fields-config';\n\nconst sandbox = Sinon.createSandbox();\n\ndescribe('CreditCardHandler', () => {\n  afterEach(() => {\n    sandbox.restore();\n  });\n\n  it('can tokenize the hosted fields', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient({\n      mockHostedFieldTokenizePayload: mockHostedFieldTokenizePayload,\n    });\n\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n\n    const payload = await handler.tokenizeHostedFields();\n\n    expect(payload?.nonce).to.equal(mockHostedFieldTokenizePayload.nonce);\n  });\n\n  it('can mark field errors', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.markFieldErrors([]);\n    expect(mockHostedFieldContainer.markErrorsCalled).to.be.true;\n  });\n\n  it('can remove field errors', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.removeFieldErrors([]);\n    expect(mockHostedFieldContainer.removeErrorsCalled).to.be.true;\n  });\n\n  it('can show the error message', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.showErrorMessage();\n    expect(mockHostedFieldContainer.showErrorMessageCalled).to.be.true;\n  });\n\n  it('can hide the error message', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n    });\n    handler.hideErrorMessage();\n    expect(mockHostedFieldContainer.hideErrorMessageCalled).to.be.true;\n  });\n\n  it('retries the expected number of times before failure', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n\n    let retryCount = 0;\n    Sinon.stub(client, 'create').callsFake(() => {\n      retryCount++;\n      throw new Error('Error');\n    });\n\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const hostedFieldsSpy = Sinon.spy(mockHostedFieldContainer, 'resetHostedFields');\n\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n      retryInverval: 0.01,\n      maxRetryCount: 3,\n      loadTimeout: 0.01,\n    });\n\n    try {\n      await handler.instance.get();\n      expect.fail('Should have thrown an error');\n    } catch (e) {}\n\n    // initial call + 3 retries\n    expect(retryCount).to.equal(4);\n    expect(hostedFieldsSpy.callCount).to.equal(4);\n  });\n\n  it('retries creating the hosted fields if they fail', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n\n    let retryCount = 0;\n    Sinon.stub(client, 'create').callsFake(() => {\n      if (retryCount < 2) {\n        retryCount++;\n        throw new Error('Error');\n      }\n      return Promise.resolve(client);\n    });\n\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n      retryInverval: 0.01,\n      maxRetryCount: 3,\n      loadTimeout: 0.01,\n    });\n\n    const instance = await handler.instance.get();\n    expect(instance).to.not.be.null;\n    expect(retryCount).to.equal(2);\n  });\n\n  it('emits an event when retrying or failing', async () => {\n    const braintreeManager = new MockBraintreeManager();\n    const client = new MockHostedFieldsClient();\n\n    Sinon.stub(client, 'create').callsFake(() => {\n      throw new Error('Error');\n    });\n\n    const mockHostedFieldContainer = new MockHostedFieldContainer();\n    const mockHostedFieldConfig: HostedFieldConfiguration = new HostedFieldConfiguration({\n      hostedFieldStyle: mockHostedFieldStyle,\n      hostedFieldFieldOptions: mockHostedFieldFieldOptions,\n      hostedFieldContainer: mockHostedFieldContainer,\n    });\n    const handler = new CreditCardHandler({\n      braintreeManager: braintreeManager,\n      hostedFieldClient: client,\n      hostedFieldConfig: mockHostedFieldConfig,\n      retryInverval: 0.01,\n      maxRetryCount: 3,\n      loadTimeout: 0.01,\n    });\n\n    let retryCountEvent = 0;\n    let retryFailedEvent = 0;\n    handler.on('hostedFieldsRetry', () => {\n      retryCountEvent++;\n    });\n    handler.on('hostedFieldsFailed', () => {\n      retryFailedEvent++;\n    });\n\n    try {\n      await handler.instance.get();\n    } catch (e) {}\n\n    expect(retryCountEvent).to.equal(3);\n    expect(retryFailedEvent).to.equal(1);\n  });\n});\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-form",
-  "version": "0.5.8",
+  "version": "0.5.9-alpha.1",
   "description": "The Internet Archive Donation Form",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
@@ -72,6 +72,7 @@
     "lit-html": "^2.0.2",
     "madge": "^4.0.1",
     "polymer-cli": "^1.9.11",
+    "sinon": "^12.0.1",
     "typescript": "^3.9.5",
     "webpack-merge": "^4.1.5"
   },

package/src/braintree-manager/braintree-interfaces.ts

@@ -8,8 +8,14 @@ import {
   BillingInfo,
 } from '@internetarchive/donation-form-data-models';
 import { PromisedSingleton } from '@internetarchive/promised-singleton';
+import { Unsubscribe } from 'nanoevents';
 import { PaymentProvidersInterface } from './payment-providers-interface';
 
+export interface BraintreeManagerEvents {
+  paymentProvidersHostedFieldsRetry: (retryNumber: number) => void;
+  paymentProvidersHostedFieldsFailed: (error: unknown) => void;
+}
+
 /**
  * The BraintreeManager is the main entrypoint for much of the common braintree functionality.
  *
@@ -19,6 +25,11 @@ import { PaymentProvidersInterface } from './payment-providers-interface';
  * @interface BraintreeManagerInterface
  */
 export interface BraintreeManagerInterface {
+  on<E extends keyof BraintreeManagerEvents>(
+    event: E,
+    callback: BraintreeManagerEvents[E],
+  ): Unsubscribe;
+
   /**
    * The PaymentProviders class contains the IA-specific handlers for each of the
    * different payment providers.

package/src/braintree-manager/braintree-manager.ts

@@ -16,10 +16,12 @@ import {
   BraintreeManagerInterface,
   BraintreeEndpointManagerInterface,
   HostingEnvironment,
+  BraintreeManagerEvents,
 } from './braintree-interfaces';
 import { HostedFieldConfiguration } from './payment-providers/credit-card/hosted-field-configuration';
 import { PromisedSingleton } from '@internetarchive/promised-singleton';
 import { PaymentProvidersInterface } from './payment-providers-interface';
+import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';
 
 /** @inheritdoc */
 export class BraintreeManager implements BraintreeManagerInterface {
@@ -58,6 +60,15 @@ export class BraintreeManager implements BraintreeManagerInterface {
    */
   private deviceData?: string;
 
+  private emitter = createNanoEvents<BraintreeManagerEvents>();
+
+  on<E extends keyof BraintreeManagerEvents>(
+    event: E,
+    callback: BraintreeManagerEvents[E],
+  ): Unsubscribe {
+    return this.emitter.on(event, callback);
+  }
+
   /** @inheritdoc */
   paymentProviders: PaymentProvidersInterface;
 
@@ -245,6 +256,14 @@ export class BraintreeManager implements BraintreeManagerInterface {
       hostingEnvironment: options.hostingEnvironment,
       hostedFieldConfig: options.hostedFieldConfig,
     });
+
+    this.paymentProviders.on('hostedFieldsRetry', (retryNumber: number) => {
+      this.emitter.emit('paymentProvidersHostedFieldsRetry', retryNumber);
+    });
+
+    this.paymentProviders.on('hostedFieldsFailed', (error: unknown) => {
+      this.emitter.emit('paymentProvidersHostedFieldsFailed', error);
+    });
   }
 
   /** @inheritdoc */

package/src/braintree-manager/payment-providers/credit-card/credit-card-interface.ts

@@ -1,6 +1,12 @@
 import { PromisedSingleton } from '@internetarchive/promised-singleton';
+import { Unsubscribe } from 'nanoevents';
 import { HostedFieldName } from './hosted-field-container';
 
+export interface CreditCardHandlerEvents {
+  hostedFieldsRetry: (retryNumber: number) => void;
+  hostedFieldsFailed: (error: unknown) => void;
+}
+
 export interface CreditCardHandlerInterface {
   instance: PromisedSingleton<braintree.HostedFields | undefined>;
   tokenizeHostedFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined>;
@@ -8,4 +14,8 @@ export interface CreditCardHandlerInterface {
   removeFieldErrors(fields: HostedFieldName[]): void;
   showErrorMessage(message?: string): void;
   hideErrorMessage(): void;
+  on<E extends keyof CreditCardHandlerEvents>(
+    event: E,
+    callback: CreditCardHandlerEvents[E],
+  ): Unsubscribe;
 }

package/src/braintree-manager/payment-providers/credit-card/credit-card.ts

@@ -2,35 +2,102 @@ import { PromisedSingleton } from '@internetarchive/promised-singleton';
 import { BraintreeManagerInterface } from '../../braintree-interfaces';
 import { HostedFieldConfiguration } from './hosted-field-configuration';
 import { HostedFieldName } from './hosted-field-container';
-import { CreditCardHandlerInterface } from './credit-card-interface';
+import { CreditCardHandlerEvents, CreditCardHandlerInterface } from './credit-card-interface';
+import { promisedSleep } from '../../../util/promisedSleep';
+import { createNanoEvents, Unsubscribe } from 'nanoevents';
 
 export class CreditCardHandler implements CreditCardHandlerInterface {
-  instance: PromisedSingleton<braintree.HostedFields | undefined>;
+  on<E extends keyof CreditCardHandlerEvents>(
+    event: E,
+    callback: CreditCardHandlerEvents[E],
+  ): Unsubscribe {
+    return this.emitter.on(event, callback);
+  }
+
+  instance = new PromisedSingleton<braintree.HostedFields | undefined>({
+    generator: async (): Promise<braintree.HostedFields | undefined> => {
+      const braintreeClient = await this.braintreeManager.instance.get();
+      const hostedFields = await this.createHostedFields(braintreeClient);
+      return hostedFields;
+    },
+  });
+
+  private emitter = createNanoEvents<CreditCardHandlerEvents>();
+
+  private maxRetryCount: number;
+
+  private retryInverval: number;
+
+  private loadTimeout: number;
 
   constructor(options: {
     braintreeManager: BraintreeManagerInterface;
     hostedFieldClient: braintree.HostedFields;
     hostedFieldConfig: HostedFieldConfiguration;
+    maxRetryCount?: number;
+    retryInverval?: number;
+    loadTimeout?: number;
   }) {
     this.braintreeManager = options.braintreeManager;
     this.hostedFieldClient = options.hostedFieldClient;
     this.hostedFieldConfig = options.hostedFieldConfig;
+    this.maxRetryCount = options.maxRetryCount ?? 2;
+    this.retryInverval = (options.retryInverval ?? 1) * 1000;
+    this.loadTimeout = (options.loadTimeout ?? 6) * 1000;
+  }
+
+  private braintreeManager: BraintreeManagerInterface;
+  private hostedFieldClient: braintree.HostedFields;
+  private hostedFieldConfig: HostedFieldConfiguration;
+
+  private async createHostedFields(
+    braintreeClient: braintree.Client,
+    retryCount = 0,
+  ): Promise<braintree.HostedFields | undefined> {
+    // we mainly want to do this for retry events, but it doesn't
+    // hurt to do it on the first try
+    this.hostedFieldConfig.hostedFieldContainer.resetHostedFields();
+    try {
+      // The hosted fields have a 60 second timeout internally, but braintree
+      // support recommended setting a shorter timeout because 99% of users
+      // load the hosted fields in under 4 seconds.
+      // What we're doing here is creating a "timeout" promise
+      // and a "create hosted fields" promise and doing a `Promise.race()` to
+      // resolve when the first one finishes. If the timeout finishes first,
+      // we throw an error to trigger the retry logic. If the hosted fields
+      // finishes first, we cancel the timeout promise since we're done.
+      let timeout: number;
+      const timeoutPromise = new Promise<void>((resolve, reject) => {
+        timeout = window.setTimeout(() => {
+          reject(new Error('Timeout loading Hosted Fields'));
+        }, this.loadTimeout);
+      });
 
-    this.instance = new PromisedSingleton<braintree.HostedFields | undefined>({
-      generator: async (): Promise<braintree.HostedFields | undefined> => {
-        const braintreeClient = await this.braintreeManager.instance.get();
-        return this.hostedFieldClient.create({
+      const hostedFieldsPromise = new Promise<braintree.HostedFields | undefined>(async resolve => {
+        const fields = await this.hostedFieldClient.create({
           client: braintreeClient,
           styles: this.hostedFieldConfig.hostedFieldStyle,
           fields: this.hostedFieldConfig.hostedFieldFieldOptions,
         });
-      },
-    });
-  }
+        // clear the timeout when this finishes so we don't also get the timeout rejection
+        window.clearTimeout(timeout);
+        resolve(fields);
+      });
 
-  private braintreeManager: BraintreeManagerInterface;
-  private hostedFieldClient: braintree.HostedFields;
-  private hostedFieldConfig: HostedFieldConfiguration;
+      const result = await Promise.race([timeoutPromise, hostedFieldsPromise]);
+
+      return result as braintree.HostedFields;
+    } catch (error) {
+      if (retryCount >= this.maxRetryCount) {
+        this.emitter.emit('hostedFieldsFailed', error);
+        throw error;
+      }
+      await promisedSleep(this.retryInverval); // wait before retrying
+      const newRetryCount = retryCount + 1;
+      this.emitter.emit('hostedFieldsRetry', newRetryCount);
+      return this.createHostedFields(braintreeClient, newRetryCount);
+    }
+  }
 
   async tokenizeHostedFields(): Promise<braintree.HostedFieldsTokenizePayload | undefined> {
     const hostedFields = await this.instance.get();

package/src/braintree-manager/payment-providers/credit-card/hosted-field-container.ts

@@ -7,23 +7,33 @@ export enum HostedFieldName {
 }
 
 export interface HostedFieldContainerInterface {
-  fieldFor(field: HostedFieldName): HTMLInputElement;
+  fieldFor(field: HostedFieldName): HTMLDivElement;
   markFieldErrors(fields: HostedFieldName[]): void;
   removeFieldErrors(fields: HostedFieldName[]): void;
   showErrorMessage(message?: string): void;
   hideErrorMessage(): void;
+  /**
+   * Determine if the hosted fields have loaded.
+   *
+   * This is used to detect timeouts on the credit card hosted fields.
+   */
+  allHostedFieldsAreLoaded(): boolean;
+  /**
+   * Reset the hosted fields to retry in case of timeout
+   */
+  resetHostedFields(): void;
 }
 
 export class HostedFieldContainer implements HostedFieldContainerInterface {
-  private number: HTMLInputElement;
+  private number: HTMLDivElement;
 
-  private cvv: HTMLInputElement;
+  private cvv: HTMLDivElement;
 
-  private expirationDate: HTMLInputElement;
+  private expirationDate: HTMLDivElement;
 
   private errorContainer: HTMLDivElement;
 
-  fieldFor(field: HostedFieldName): HTMLInputElement {
+  fieldFor(field: HostedFieldName): HTMLDivElement {
     switch (field) {
       case HostedFieldName.Number:
         return this.number;
@@ -58,10 +68,27 @@ export class HostedFieldContainer implements HostedFieldContainerInterface {
     this.errorContainer.style.display = 'none';
   }
 
+  /** @inheritdoc */
+  allHostedFieldsAreLoaded(): boolean {
+    const elements = [this.number, this.cvv, this.expirationDate];
+    return elements.every(element => {
+      return element.firstChild !== null;
+    });
+  }
+
+  resetHostedFields(): void {
+    const elements = [this.number, this.cvv, this.expirationDate];
+    elements.forEach(element => {
+      while (element.firstChild) {
+        element.firstChild.remove();
+      }
+    });
+  }
+
   constructor(options: {
-    number: HTMLInputElement;
-    cvv: HTMLInputElement;
-    expirationDate: HTMLInputElement;
+    number: HTMLDivElement;
+    cvv: HTMLDivElement;
+    expirationDate: HTMLDivElement;
     errorContainer: HTMLDivElement;
   }) {
     this.number = options.number;

package/src/braintree-manager/payment-providers-interface.ts

@@ -1,11 +1,22 @@
 import { PromisedSingleton } from '@internetarchive/promised-singleton';
 import { ApplePayHandlerInterface } from './payment-providers/apple-pay/apple-pay-interface';
-import { CreditCardHandlerInterface } from './payment-providers/credit-card/credit-card-interface';
+import {
+  CreditCardHandlerEvents,
+  CreditCardHandlerInterface,
+} from './payment-providers/credit-card/credit-card-interface';
 import { VenmoHandlerInterface } from './payment-providers/venmo-interface';
 import { PayPalHandlerInterface } from './payment-providers/paypal/paypal-interface';
 import { GooglePayHandlerInterface } from './payment-providers/google-pay-interface';
+import { Unsubscribe } from 'nanoevents';
+
+// this will bubble up child events
+export type PaymentProvidersEvents = CreditCardHandlerEvents;
 
 export interface PaymentProvidersInterface {
+  on<E extends keyof PaymentProvidersEvents>(
+    event: E,
+    callback: PaymentProvidersEvents[E],
+  ): Unsubscribe;
   creditCardHandler: PromisedSingleton<CreditCardHandlerInterface>;
   applePayHandler: PromisedSingleton<ApplePayHandlerInterface>;
   venmoHandler: PromisedSingleton<VenmoHandlerInterface | undefined>;

package/src/braintree-manager/payment-providers.ts

@@ -9,12 +9,13 @@ import { PaymentClientsInterface } from './payment-clients';
 import { GooglePayHandler } from './payment-providers/google-pay';
 import { BraintreeManagerInterface, HostingEnvironment } from './braintree-interfaces';
 import { HostedFieldConfiguration } from './payment-providers/credit-card/hosted-field-configuration';
-import { PaymentProvidersInterface } from './payment-providers-interface';
+import { PaymentProvidersEvents, PaymentProvidersInterface } from './payment-providers-interface';
 import { ApplePayHandlerInterface } from './payment-providers/apple-pay/apple-pay-interface';
 import { CreditCardHandlerInterface } from './payment-providers/credit-card/credit-card-interface';
 import { VenmoHandlerInterface } from './payment-providers/venmo-interface';
 import { PayPalHandlerInterface } from './payment-providers/paypal/paypal-interface';
 import { GooglePayHandlerInterface } from './payment-providers/google-pay-interface';
+import { createNanoEvents, Emitter, Unsubscribe } from 'nanoevents';
 
 /**
  * The PaymentProviders class contains the IA-specific handlers for each of the
@@ -28,14 +29,31 @@ import { GooglePayHandlerInterface } from './payment-providers/google-pay-interf
  * @implements {PaymentProvidersInterface}
  */
 export class PaymentProviders implements PaymentProvidersInterface {
+  on<E extends keyof PaymentProvidersEvents>(
+    event: E,
+    callback: PaymentProvidersEvents[E],
+  ): Unsubscribe {
+    return this.emitter.on(event, callback);
+  }
+
   creditCardHandler = new PromisedSingleton<CreditCardHandlerInterface>({
     generator: async (): Promise<CreditCardHandlerInterface> => {
       const client = await this.paymentClients.hostedFields.get();
-      return new CreditCardHandler({
+      const handler = new CreditCardHandler({
         braintreeManager: this.braintreeManager,
         hostedFieldClient: client,
         hostedFieldConfig: this.hostedFieldConfig,
       });
+
+      handler.on('hostedFieldsRetry', (retryNumber: number) => {
+        this.emitter.emit('hostedFieldsRetry', retryNumber);
+      });
+
+      handler.on('hostedFieldsFailed', (error: unknown) => {
+        this.emitter.emit('hostedFieldsFailed', error);
+      });
+
+      return handler;
     },
   });
 
@@ -109,6 +127,8 @@ export class PaymentProviders implements PaymentProvidersInterface {
 
   private paymentClients: PaymentClientsInterface;
 
+  private emitter = createNanoEvents<PaymentProvidersEvents>();
+
   constructor(options: {
     braintreeManager: BraintreeManagerInterface;
     paymentClients: PaymentClientsInterface;

package/src/donation-form-controller.ts

@@ -109,11 +109,11 @@ export class DonationFormController extends LitElement {
 
   @query('donation-form') private donationForm!: DonationForm;
 
-  @query('#braintree-creditcard') private braintreeNumberInput!: HTMLInputElement;
+  @query('#braintree-creditcard') private braintreeNumberInput!: HTMLDivElement;
 
-  @query('#braintree-cvv') private braintreeCVVInput!: HTMLInputElement;
+  @query('#braintree-cvv') private braintreeCVVInput!: HTMLDivElement;
 
-  @query('#braintree-expiration') private braintreeExpirationDateInput!: HTMLInputElement;
+  @query('#braintree-expiration') private braintreeExpirationDateInput!: HTMLDivElement;
 
   @query('#braintree-error-message') private braintreeErrorMessage!: HTMLDivElement;
 
@@ -195,6 +195,20 @@ export class DonationFormController extends LitElement {
         loggedInUser: this.loggedInUser,
         origin: this.origin,
       });
+
+      this.braintreeManager.on('paymentProvidersHostedFieldsRetry', (retryNumber: number) => {
+        const event = new CustomEvent('paymentProvidersHostedFieldsRetry', {
+          detail: { retryNumber },
+        });
+        this.dispatchEvent(event);
+      });
+
+      this.braintreeManager.on('paymentProvidersHostedFieldsFailed', (error: unknown) => {
+        const event = new CustomEvent('paymentProvidersHostedFieldsFailed', {
+          detail: { error },
+        });
+        this.dispatchEvent(event);
+      });
     }
   }
 

package/src/util/promisedSleep.ts

@@ -0,0 +1,3 @@
+export function promisedSleep(ms: number): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}