@internetarchive/donation-form 0.5.11-alpha.2 → 0.5.12-a2

package/dist/test/mocks/flow-handlers/mock-payment-flow-handlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"mock-payment-flow-handlers.js","sourceRoot":"","sources":["../../../../test/mocks/flow-handlers/mock-payment-flow-handlers.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,mDAAmD,CAAC;AAG7F,MAAM,OAAO,uBAAuB;IAApC;QAWE,kBAAa,GAAG,KAAK,CAAC;QAKtB,sBAAiB,GAA8B,IAAI,yBAAyB,EAAE,CAAC;QAC/E,kBAAa,GAA0B,IAAI,qBAAqB,EAAE,CAAC;QACnE,oBAAe,GAA4B,IAAI,uBAAuB,EAAE,CAAC;QACzE,iBAAY,GAAyB,IAAI,oBAAoB,EAAE,CAAC;QAChE,qBAAgB,GAA6B,IAAI,wBAAwB,EAAE,CAAC;IAC9E,CAAC;IApBC,eAAe,CAAC,OAOf;QACC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IAEK,OAAO;;;YACX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,MAAA,IAAI,CAAC,YAAY,0CAAE,OAAO,GAAG;;KAC9B;CAMF","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { PaymentFlowHandlersInterface } from '../../../src/payment-flow-handlers/payment-flow-handlers';\nimport { MockCreditCardFlowHandler } from './individual-handlers/mock-creditcard-flow-handler';\nimport { MockPayPalFlowHandler } from './individual-handlers/mock-paypal-flow-handler';\nimport { MockApplePayFlowHandler } from './individual-handlers/mock-applepay-flow-handler';\nimport { MockVenmoFlowHandler } from './individual-handlers/mock-venmo-flow-handler';\nimport { MockGooglePayFlowHandler } from './individual-handlers/mock-googlepay-flow-handler';\nimport { UpsellModalCTAMode } from '../../../src/modals/upsell-modal-content';\n\nexport class MockPaymentFlowHandlers implements PaymentFlowHandlersInterface {\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    ctaMode?: UpsellModalCTAMode;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n  }): Promise<void> {\n    throw new Error('Method not implemented.');\n  }\n  startupCalled = false;\n  async startup(): Promise<void> {\n    this.startupCalled = true;\n    this.venmoHandler?.startup();\n  }\n  creditCardHandler: MockCreditCardFlowHandler = new MockCreditCardFlowHandler();\n  paypalHandler: MockPayPalFlowHandler = new MockPayPalFlowHandler();\n  applePayHandler: MockApplePayFlowHandler = new MockApplePayFlowHandler();\n  venmoHandler: MockVenmoFlowHandler = new MockVenmoFlowHandler();\n  googlePayHandler: MockGooglePayFlowHandler = new MockGooglePayFlowHandler();\n}\n"]}
+{"version":3,"file":"mock-payment-flow-handlers.js","sourceRoot":"","sources":["../../../../test/mocks/flow-handlers/mock-payment-flow-handlers.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,yBAAyB,EAAE,MAAM,oDAAoD,CAAC;AAC/F,OAAO,EAAE,qBAAqB,EAAE,MAAM,gDAAgD,CAAC;AACvF,OAAO,EAAE,uBAAuB,EAAE,MAAM,kDAAkD,CAAC;AAC3F,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,wBAAwB,EAAE,MAAM,mDAAmD,CAAC;AAI7F,MAAM,OAAO,uBAAuB;IAApC;QAkBE,kBAAa,GAAG,KAAK,CAAC;QAKtB,sBAAiB,GAA8B,IAAI,yBAAyB,EAAE,CAAC;QAC/E,kBAAa,GAA0B,IAAI,qBAAqB,EAAE,CAAC;QACnE,oBAAe,GAA4B,IAAI,uBAAuB,EAAE,CAAC;QACzE,iBAAY,GAAyB,IAAI,oBAAoB,EAAE,CAAC;QAChE,qBAAgB,GAA6B,IAAI,wBAAwB,EAAE,CAAC;IAC9E,CAAC;IA3BC,eAAe,CAAC,OAOf;QACC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IACD,yBAAyB,CAAC,OAIzB;QACC,MAAM,IAAI,KAAK,CAAC,yBAAyB,CAAC,CAAC;IAC7C,CAAC;IAEK,OAAO;;;YACX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;YAC1B,MAAA,IAAI,CAAC,YAAY,0CAAE,OAAO,GAAG;;KAC9B;CAMF","sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\nimport { PaymentFlowHandlersInterface } from '../../../src/payment-flow-handlers/payment-flow-handlers';\nimport { MockCreditCardFlowHandler } from './individual-handlers/mock-creditcard-flow-handler';\nimport { MockPayPalFlowHandler } from './individual-handlers/mock-paypal-flow-handler';\nimport { MockApplePayFlowHandler } from './individual-handlers/mock-applepay-flow-handler';\nimport { MockVenmoFlowHandler } from './individual-handlers/mock-venmo-flow-handler';\nimport { MockGooglePayFlowHandler } from './individual-handlers/mock-googlepay-flow-handler';\nimport { UpsellModalCTAMode } from '../../../src/modals/upsell-modal-content';\nimport { DonationType } from '@internetarchive/donation-form-data-models';\n\nexport class MockPaymentFlowHandlers implements PaymentFlowHandlersInterface {\n  showUpsellModal(options: {\n    oneTimeAmount: number;\n    ctaMode?: UpsellModalCTAMode;\n    yesSelected?: (amount: number) => void;\n    noSelected?: () => void;\n    amountChanged?: (amount: number) => void;\n    userClosedModalCallback?: () => void;\n  }): Promise<void> {\n    throw new Error('Method not implemented.');\n  }\n  showConfirmationStepModal(options: {\n    amount: number;\n    donationType: DonationType;\n    currencyType: string;\n  }): Promise<void> {\n    throw new Error('Method not implemented.');\n  }\n  startupCalled = false;\n  async startup(): Promise<void> {\n    this.startupCalled = true;\n    this.venmoHandler?.startup();\n  }\n  creditCardHandler: MockCreditCardFlowHandler = new MockCreditCardFlowHandler();\n  paypalHandler: MockPayPalFlowHandler = new MockPayPalFlowHandler();\n  applePayHandler: MockApplePayFlowHandler = new MockApplePayFlowHandler();\n  venmoHandler: MockVenmoFlowHandler = new MockVenmoFlowHandler();\n  googlePayHandler: MockGooglePayFlowHandler = new MockGooglePayFlowHandler();\n}\n"]}

package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.d.ts

@@ -22,6 +22,7 @@ export declare class MockPayPalButtonDataSourceDelegate implements PayPalButtonD
     };
     payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;
     payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
+    payPalPaymentConfirmed(dataSource: PayPalButtonDataSourceInterface, payload: paypal.TokenizePayload): Promise<void>;
     payPalPaymentCancelled(dataSource: PayPalButtonDataSourceInterface, data: object): Promise<void>;
     payPalPaymentError(dataSource: PayPalButtonDataSourceInterface, error: string): Promise<void>;
 }

package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.js

@@ -28,6 +28,13 @@ export class MockPayPalButtonDataSourceDelegate {
             this.paymentAuthorizedResults.payload = payload;
         });
     }
+    payPalPaymentConfirmed(dataSource, payload) {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.paymentAuthorizedResults.called = true;
+            this.paymentAuthorizedResults.datasource = dataSource;
+            this.paymentAuthorizedResults.payload = payload;
+        });
+    }
     payPalPaymentCancelled(dataSource, data) {
         return __awaiter(this, void 0, void 0, function* () {
             this.paymentCancelledResults.called = true;

package/dist/test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.js.map

@@ -1 +1 @@
-{"version":3,"file":"mock-paypal-button-datasource-delegate.js","sourceRoot":"","sources":["../../../../../test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.ts"],"names":[],"mappings":";AAKA,MAAM,OAAO,kCAAkC;IAA/C;QACE,0BAAqB,GAIjB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,6BAAwB,GAIpB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,4BAAuB,GAInB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,wBAAmB,GAIf;YACF,MAAM,EAAE,KAAK;SACd,CAAC;IAqCJ,CAAC;IAnCO,oBAAoB,CACxB,UAA2C,EAC3C,OAAe;;YAEf,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,IAAI,CAAC;YACzC,IAAI,CAAC,qBAAqB,CAAC,UAAU,GAAG,UAAU,CAAC;YACnD,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/C,CAAC;KAAA;IAEK,uBAAuB,CAC3B,UAA2C,EAC3C,OAA+B;;YAE/B,IAAI,CAAC,wBAAwB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC5C,IAAI,CAAC,wBAAwB,CAAC,UAAU,GAAG,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,CAAC;KAAA;IAEK,sBAAsB,CAC1B,UAA2C,EAC3C,IAAY;;YAEZ,IAAI,CAAC,uBAAuB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC3C,IAAI,CAAC,uBAAuB,CAAC,UAAU,GAAG,UAAU,CAAC;YACrD,IAAI,CAAC,uBAAuB,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,CAAC;KAAA;IAEK,kBAAkB,CACtB,UAA2C,EAC3C,KAAa;;YAEb,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,IAAI,CAAC;YACvC,IAAI,CAAC,mBAAmB,CAAC,UAAU,GAAG,UAAU,CAAC;YACjD,IAAI,CAAC,mBAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;QACzC,CAAC;KAAA;CACF","sourcesContent":["import {\n  PayPalButtonDataSourceDelegate,\n  PayPalButtonDataSourceInterface,\n} from '../../../../src/braintree-manager/payment-providers/paypal/paypal-button-datasource';\n\nexport class MockPayPalButtonDataSourceDelegate implements PayPalButtonDataSourceDelegate {\n  paymentStartedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    options?: object;\n  } = {\n    called: false,\n  };\n\n  paymentAuthorizedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    payload?: paypal.TokenizePayload;\n  } = {\n    called: false,\n  };\n\n  paymentCancelledResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    data?: object;\n  } = {\n    called: false,\n  };\n\n  paymentErrorResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    error?: string;\n  } = {\n    called: false,\n  };\n\n  async payPalPaymentStarted(\n    dataSource: PayPalButtonDataSourceInterface,\n    options: object,\n  ): Promise<void> {\n    this.paymentStartedResults.called = true;\n    this.paymentStartedResults.datasource = dataSource;\n    this.paymentStartedResults.options = options;\n  }\n\n  async payPalPaymentAuthorized(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.paymentAuthorizedResults.called = true;\n    this.paymentAuthorizedResults.datasource = dataSource;\n    this.paymentAuthorizedResults.payload = payload;\n  }\n\n  async payPalPaymentCancelled(\n    dataSource: PayPalButtonDataSourceInterface,\n    data: object,\n  ): Promise<void> {\n    this.paymentCancelledResults.called = true;\n    this.paymentCancelledResults.datasource = dataSource;\n    this.paymentCancelledResults.data = data;\n  }\n\n  async payPalPaymentError(\n    dataSource: PayPalButtonDataSourceInterface,\n    error: string,\n  ): Promise<void> {\n    this.paymentErrorResults.called = true;\n    this.paymentErrorResults.datasource = dataSource;\n    this.paymentErrorResults.error = error;\n  }\n}\n"]}
+{"version":3,"file":"mock-paypal-button-datasource-delegate.js","sourceRoot":"","sources":["../../../../../test/mocks/payment-providers/individual-providers/mock-paypal-button-datasource-delegate.ts"],"names":[],"mappings":";AAKA,MAAM,OAAO,kCAAkC;IAA/C;QACE,0BAAqB,GAIjB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,6BAAwB,GAIpB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,4BAAuB,GAInB;YACF,MAAM,EAAE,KAAK;SACd,CAAC;QAEF,wBAAmB,GAIf;YACF,MAAM,EAAE,KAAK;SACd,CAAC;IA8CJ,CAAC;IA5CO,oBAAoB,CACxB,UAA2C,EAC3C,OAAe;;YAEf,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,IAAI,CAAC;YACzC,IAAI,CAAC,qBAAqB,CAAC,UAAU,GAAG,UAAU,CAAC;YACnD,IAAI,CAAC,qBAAqB,CAAC,OAAO,GAAG,OAAO,CAAC;QAC/C,CAAC;KAAA;IAEK,uBAAuB,CAC3B,UAA2C,EAC3C,OAA+B;;YAE/B,IAAI,CAAC,wBAAwB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC5C,IAAI,CAAC,wBAAwB,CAAC,UAAU,GAAG,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,CAAC;KAAA;IAEK,sBAAsB,CAC1B,UAA2C,EAC3C,OAA+B;;YAE/B,IAAI,CAAC,wBAAwB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC5C,IAAI,CAAC,wBAAwB,CAAC,UAAU,GAAG,UAAU,CAAC;YACtD,IAAI,CAAC,wBAAwB,CAAC,OAAO,GAAG,OAAO,CAAC;QAClD,CAAC;KAAA;IAEK,sBAAsB,CAC1B,UAA2C,EAC3C,IAAY;;YAEZ,IAAI,CAAC,uBAAuB,CAAC,MAAM,GAAG,IAAI,CAAC;YAC3C,IAAI,CAAC,uBAAuB,CAAC,UAAU,GAAG,UAAU,CAAC;YACrD,IAAI,CAAC,uBAAuB,CAAC,IAAI,GAAG,IAAI,CAAC;QAC3C,CAAC;KAAA;IAEK,kBAAkB,CACtB,UAA2C,EAC3C,KAAa;;YAEb,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,IAAI,CAAC;YACvC,IAAI,CAAC,mBAAmB,CAAC,UAAU,GAAG,UAAU,CAAC;YACjD,IAAI,CAAC,mBAAmB,CAAC,KAAK,GAAG,KAAK,CAAC;QACzC,CAAC;KAAA;CACF","sourcesContent":["import {\n  PayPalButtonDataSourceDelegate,\n  PayPalButtonDataSourceInterface,\n} from '../../../../src/braintree-manager/payment-providers/paypal/paypal-button-datasource';\n\nexport class MockPayPalButtonDataSourceDelegate implements PayPalButtonDataSourceDelegate {\n  paymentStartedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    options?: object;\n  } = {\n    called: false,\n  };\n\n  paymentAuthorizedResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    payload?: paypal.TokenizePayload;\n  } = {\n    called: false,\n  };\n\n  paymentCancelledResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    data?: object;\n  } = {\n    called: false,\n  };\n\n  paymentErrorResults: {\n    called: boolean;\n    datasource?: PayPalButtonDataSourceInterface;\n    error?: string;\n  } = {\n    called: false,\n  };\n\n  async payPalPaymentStarted(\n    dataSource: PayPalButtonDataSourceInterface,\n    options: object,\n  ): Promise<void> {\n    this.paymentStartedResults.called = true;\n    this.paymentStartedResults.datasource = dataSource;\n    this.paymentStartedResults.options = options;\n  }\n\n  async payPalPaymentAuthorized(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.paymentAuthorizedResults.called = true;\n    this.paymentAuthorizedResults.datasource = dataSource;\n    this.paymentAuthorizedResults.payload = payload;\n  }\n\n  async payPalPaymentConfirmed(\n    dataSource: PayPalButtonDataSourceInterface,\n    payload: paypal.TokenizePayload,\n  ): Promise<void> {\n    this.paymentAuthorizedResults.called = true;\n    this.paymentAuthorizedResults.datasource = dataSource;\n    this.paymentAuthorizedResults.payload = payload;\n  }\n\n  async payPalPaymentCancelled(\n    dataSource: PayPalButtonDataSourceInterface,\n    data: object,\n  ): Promise<void> {\n    this.paymentCancelledResults.called = true;\n    this.paymentCancelledResults.datasource = dataSource;\n    this.paymentCancelledResults.data = data;\n  }\n\n  async payPalPaymentError(\n    dataSource: PayPalButtonDataSourceInterface,\n    error: string,\n  ): Promise<void> {\n    this.paymentErrorResults.called = true;\n    this.paymentErrorResults.datasource = dataSource;\n    this.paymentErrorResults.error = error;\n  }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@internetarchive/donation-form",
-  "version": "0.5.11-alpha.2",
+  "version": "0.5.12-a2",
   "description": "The Internet Archive Donation Form",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",

package/src/braintree-manager/payment-providers/paypal/paypal-button-datasource.ts

@@ -92,7 +92,7 @@ export interface PayPalButtonDataSourceDelegate {
   payPalPaymentStarted(dataSource: PayPalButtonDataSourceInterface, options: object): Promise<void>;
 
   /**
-   * Payment has been authorized
+   * Payment has been authorized by patron and submits to PayPal
    *
    * @param {PayPalButtonDataSourceInterface} dataSource
    * @param {paypal.TokenizePayload} payload
@@ -104,6 +104,19 @@ export interface PayPalButtonDataSourceDelegate {
     payload: paypal.TokenizePayload,
   ): Promise<void>;
 
+  /**
+   * Payment has been authorized
+   *
+   * @param {PayPalButtonDataSourceInterface} dataSource
+   * @param {paypal.TokenizePayload} payload
+   * @returns {Promise<void>}
+   * @memberof PayPalButtonDataSourceDelegate
+   */
+   payPalPaymentConfirmed(
+    dataSource: PayPalButtonDataSourceInterface,
+    payload: paypal.TokenizePayload,
+  ): Promise<void>;
+
   /**
    * Payment has been cancelled
    *
@@ -185,6 +198,13 @@ export class PayPalButtonDataSource implements PayPalButtonDataSourceInterface {
     return payload;
   }
 
+  async onConfirm(data: paypal.AuthorizationData): Promise<paypal.TokenizePayload> {
+    const payload: paypal.TokenizePayload = await this.paypalInstance.tokenizePayment(data);
+    this.delegate?.payPalPaymentConfirmed(this, payload);
+
+    return payload;
+  }
+
   /** @inheritdoc */
   onCancel(data: object): void {
     this.delegate?.payPalPaymentCancelled(this, data);

package/src/donation-form-controller.ts

@@ -164,6 +164,16 @@ export class DonationFormController extends LitElement {
     }
   }
 
+  async showConfirmationStepDev(options: {
+    donationType: DonationType;
+    amount: number;
+    currencyType: string;
+    cancelDonationCB: Function;
+    confirmDonationCB: Function;
+  }): Promise<void> {
+    this.donationForm.showConfirmationModalDev(options);
+  }
+
   async showUpsellModalDev(options: {
     oneTimeAmount: number;
     ctaMode?: UpsellModalCTAMode;
@@ -319,7 +329,7 @@ export class DonationFormController extends LitElement {
     this.donationForm.paymentFlowHandlers = this.paymentFlowHandlers;
 
     this.braintreeManager.startup();
-    this.paymentFlowHandlers.startup();
+    this.paymentFlowHandlers?.startup();
     this.recaptchaManager.setup(this.recaptchaElement, 1, 'light', 'image');
   }
 

package/src/donation-form.ts

@@ -121,6 +121,16 @@ export class DonationForm extends LitElement {
     `;
   }
 
+    async showConfirmationModalDev(options: {
+      donationType: DonationType;
+      amount: number;
+      currencyType: string;
+      cancelDonationCB: Function;
+      confirmDonationCB: Function;
+    }): Promise<void> {
+      this.paymentFlowHandlers?.showConfirmationStepModal(options);
+    }
+
   /**
    * This is a developer convenience method that allows us to show the upsell modal without going
    * through the purchasing flow. If it's showing the PayPal button, it will trigger

package/src/modals/confirm-donation-modal-content.ts

@@ -0,0 +1,160 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { LitElement, html, TemplateResult, css, CSSResultGroup, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { DonationType } from '@internetarchive/donation-form-data-models';
+import currency from 'currency.js';
+
+/**
+ * This is the content that we show in the upsell modal.
+ *
+ * It has an amount input, "Yes" and "No Thanks" options and a switch to optionally
+ * show the PayPal upsell button.
+ *
+ * @export
+ * @class ConfirmDonationContent
+ * @extends {LitElement}
+ */
+@customElement('confirm-donation-modal')
+export class ConfirmDonationContent extends LitElement {
+  @property({ type: Number }) amount = 5;
+
+  @property({ type: String }) currencyType = '$';
+
+  @property({ type: String }) donationType: DonationType = DonationType.OneTime;
+
+  @property({ type: Function }) confirmDonation: Function = (): void => {};
+
+  @property({ type: Function }) cancelDonation: Function= (): void => {};
+
+  get confirmationText(): TemplateResult {
+    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+    return html`
+    <p>You are about to make a <b>${this.donationType}</b> donation of <b>${amount} ${this.currencyType}</b> to the Internet Archive.</p>
+    `;
+  }
+
+  get confirmUpsellText(): TemplateResult {
+    const amount = currency(this.amount, { symbol: this.currencySymbol }).format();
+    return html`<p>You are about to begin making <b>monthly</b> donations of <b>${amount} ${this.currencyType}</b> to the Internet Archive starting next month.</p>`;
+  }
+
+  confirm(): void {
+    this?.confirmDonation();
+  }
+
+  cancel(): void {
+    this?.cancelDonation();
+  }
+
+  get confirmCTA(): string {
+    return this.donationType === DonationType.Upsell ? 'Start Monthly Donation' : 'Confirm Donation';
+  }
+
+  /** @inheritdoc */
+  render(): TemplateResult {
+    return html`
+      ${this.donationType === DonationType.Upsell ? this.confirmUpsellText : this.confirmationText}
+
+      <div class="cta-group">
+        <button id="confirm" @click=${(): void => this.confirm()}>${this.confirmCTA}</button>
+        <button id="cancel" @click=${(): void => this.cancel()}>Cancel</button>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResultGroup {
+    const ctaButtonColor = css`var(--upsellCTAButtonColor, #194880)`;
+    const ctaButtonDisabledColor = css`var(--upsellCTAButtonDisabledColor, rgba(109,148,201,0.5))`;
+
+    return css`
+      :host {
+        display: block;
+      }
+
+      button {
+        outline: none;
+        cursor: pointer;
+      }
+
+      button#confirm {
+        font-size: 2rem;
+        display: block;
+        width: 100%;
+        margin-top: 0.5rem;
+        padding: 1rem 2rem;
+        background-color: ${ctaButtonColor};
+        color: #fff;
+        border-radius: 5px;
+        border: 0;
+        font-weight: bold;
+        line-height: normal;
+      }
+
+      button#cancel {
+        margin-top: 1rem;
+        border: 0;
+        text-decoration: underline;
+        background-color: transparent;
+      }
+
+      button:disabled {
+        background-color: ${ctaButtonDisabledColor};
+        cursor: not-allowed;
+      }
+    }`;
+  }
+
+  /**
+   * https://developer.paypal.com/docs/reports/reference/paypal-supported-currencies/
+   */
+   get currencySymbol(): string {
+    switch(this.currencyType) {
+      case 'AUD':
+        return 'AU$';
+      case 'BRL':
+        return 'R$';
+      case 'CAD':
+        return 'CA$';
+      case 'CHF':
+        return 'Fr';
+      case 'CNY':
+        return '¥';
+      case 'CZK':
+        return 'Kč';
+      case 'DKK':
+        return 'Kr';
+      case 'EUR':
+        return '€';
+      case 'GBP':
+        return '£';
+      case 'HKD':
+        return 'HK$';
+      case 'HUF':
+        return 'Ft';
+      case 'ILS':
+        return '₪';
+      case 'JPY':
+        return '¥';
+      case 'MXN':
+        return 'MX$';
+      case 'MYR':
+        return 'RM';
+      case 'NOK':
+        return 'kr';
+      case 'PLN':
+        return 'zł';
+      case 'RUB':
+        return '₽';
+      case 'SEK':
+        return 'kr';
+      case 'SGD':
+        return 'S$';
+      case 'THB':
+        return '฿';
+      case 'TYD':
+        return 'NT$';
+      default:
+        return '$'; // $ as default USD, NZD
+    }
+  }
+}

package/src/payment-flow-handlers/donation-flow-modal-manager.ts

@@ -1,6 +1,7 @@
 import { html } from 'lit';
 import { ModalConfig, ModalManagerInterface } from '@internetarchive/modal-manager';
 import { UpsellModalCTAMode } from '../modals/upsell-modal-content';
+import '../modals/confirm-donation-modal-content';
 import { BraintreeManagerInterface } from '../braintree-manager/braintree-interfaces';
 import {
   SuccessResponse,
@@ -32,6 +33,13 @@ enum ModalHeaderColor {
  * @interface DonationFlowModalManagerInterface
  */
 export interface DonationFlowModalManagerInterface {
+  showConfirmationStepModal(options: {
+    amount: number;
+    donationType: DonationType;
+    currencyType: string;
+    confirmDonationCB: Function;
+    cancelDonationCB: Function;
+  }): Promise<void>;
   /**
    * Close the modal
    *
@@ -212,6 +220,43 @@ export class DonationFlowModalManager implements DonationFlowModalManagerInterfa
     });
   }
 
+  showConfirmationStepModal(options: {
+    amount: number;
+    donationType: DonationType;
+    currencyType: string;
+    confirmDonationCB: Function;
+    cancelDonationCB: Function;
+  }): Promise<void> {
+    const confirmDonation = (): void => {
+      options?.confirmDonationCB();
+    };
+    const cancelDonation = (): void => {
+      options?.cancelDonationCB();
+    };
+    const modalTitle = options.donationType === DonationType.Upsell
+      ? 'Confirm monthly donations'
+      : 'Confirm donation';
+
+    const modalConfig = new ModalConfig({
+      closeOnBackdropClick: false,
+      headerColor: ModalHeaderColor.Green,
+      title: html`${modalTitle}`,
+      message: html`
+        <confirm-donation-modal
+          .amount="${options.amount}"
+          .currencyType="${options.currencyType}"
+          .donationType="${options.donationType}"
+          .confirmDonation=${confirmDonation}
+          .cancelDonation=${cancelDonation}
+        ></confirm-donation-modal>
+      `,
+    });
+    return this.modalManager.showModal({
+      config: modalConfig,
+      userClosedModalCallback: cancelDonation
+    });
+  }
+
   /** @inheritdoc */
   showUpsellModal(options: {
     oneTimeAmount: number;

package/src/payment-flow-handlers/handlers/paypal-flow-handler.ts

@@ -112,10 +112,39 @@ export class PayPalFlowHandler
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     options: object,
   ): Promise<void> {
+    console.log('payPalPaymentStarted *******', { dataSource, options });
     this.emitter.emit('payPalPaymentStarted', dataSource, options);
   }
 
-  async payPalPaymentAuthorized(
+  async payPalPaymentAuthorized(dataSource: PayPalButtonDataSourceInterface,
+    payload: paypal.TokenizePayload
+    ): Promise<void> {
+
+      // we got dataSource & payload
+      // we need to send it to `payPalPaymentConfirmed`
+      // after patron confirms the payment
+    console.log('payPalPaymentAuthorized *******', { dataSource, payload });
+
+    const { donationType, amount } = dataSource.donationInfo;
+    this.donationFlowModalManager.showConfirmationStepModal({
+      donationType,
+      amount,
+      currencyType: 'USD', // defaults to USD for now
+      confirmDonationCB: () => {
+        this.payPalPaymentConfirmed(dataSource, payload);
+      },
+      cancelDonationCB: () => {
+        this.donationFlowModalManager.closeModal();
+        this.payPalPaymentCancelled(dataSource, {});
+      }
+    });
+
+    // cancel payment on modal X
+    // cancel payment on cancel
+    
+  }
+
+  async payPalPaymentConfirmed(
     dataSource: PayPalButtonDataSourceInterface,
     payload: paypal.TokenizePayload,
   ): Promise<void> {

package/src/payment-flow-handlers/payment-flow-handlers.ts

@@ -21,6 +21,7 @@ import {
   GooglePayFlowHandler,
 } from './handlers/googlepay-flow-handler';
 import { UpsellModalCTAMode } from '../modals/upsell-modal-content';
+import { DonationType } from '@internetarchive/donation-form-data-models';
 
 export interface PaymentFlowHandlersInterface {
   startup(): Promise<void>;
@@ -46,6 +47,14 @@ export interface PaymentFlowHandlersInterface {
     userClosedModalCallback?: () => void;
   }): Promise<void>;
 
+  showConfirmationStepModal(options: {
+    amount: number;
+    donationType: DonationType;
+    currencyType: string;
+    confirmDonationCB: Function;
+    cancelDonationCB: Function;
+  }): Promise<void>;
+
   creditCardHandler: CreditCardFlowHandlerInterface | undefined;
   paypalHandler: PayPalFlowHandlerInterface | undefined;
   applePayHandler: ApplePayFlowHandlerInterface | undefined;
@@ -90,6 +99,17 @@ export class PaymentFlowHandlers implements PaymentFlowHandlersInterface {
     return this.donationFlowModalManager.showUpsellModal(options);
   }
 
+    /** @inheritdoc */
+  showConfirmationStepModal(options: {
+    amount: number;
+    donationType: DonationType;
+    currencyType: string;
+    confirmDonationCB: Function;
+    cancelDonationCB: Function;
+  }): Promise<void> {
+    return this.donationFlowModalManager.showConfirmationStepModal(options);
+  }
+
   get creditCardHandler(): CreditCardFlowHandlerInterface | undefined {
     if (this.creditCardHandlerCache) {
       return this.creditCardHandlerCache;

package/dist/src/models/donation-form-config.d.ts

@@ -1,6 +0,0 @@
-export declare class DonationFormConfig {
-    showCreditCardButtonText: boolean;
-    constructor(options: {
-        showCreditCardButtonText: boolean;
-    });
-}

package/dist/src/models/donation-form-config.js

@@ -1,6 +0,0 @@
-export class DonationFormConfig {
-    constructor(options) {
-        this.showCreditCardButtonText = options.showCreditCardButtonText;
-    }
-}
-//# sourceMappingURL=donation-form-config.js.map

package/dist/src/models/donation-form-config.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"donation-form-config.js","sourceRoot":"","sources":["../../../src/models/donation-form-config.ts"],"names":[],"mappings":"AAAA,MAAM,OAAO,kBAAkB;IAG7B,YAAY,OAA8C;QACxD,IAAI,CAAC,wBAAwB,GAAG,OAAO,CAAC,wBAAwB,CAAC;IACnE,CAAC;CACF","sourcesContent":["export class DonationFormConfig {\n  showCreditCardButtonText: boolean;\n\n  constructor(options: { showCreditCardButtonText: boolean }) {\n    this.showCreditCardButtonText = options.showCreditCardButtonText;\n  }\n}\n"]}

package/dist/test/helpers/promisedSleep.d.ts

@@ -1 +0,0 @@
-export declare function promisedSleep(ms: number): Promise<void>;

package/dist/test/helpers/promisedSleep.js

@@ -1,4 +0,0 @@
-export function promisedSleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
-//# sourceMappingURL=promisedSleep.js.map

package/dist/test/helpers/promisedSleep.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"promisedSleep.js","sourceRoot":"","sources":["../../../test/helpers/promisedSleep.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,aAAa,CAAC,EAAU;IACtC,OAAO,IAAI,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AACzD,CAAC","sourcesContent":["export function promisedSleep(ms: number): Promise<void> {\n  return new Promise(resolve => setTimeout(resolve, ms));\n}\n"]}