@paypal/checkout-components 5.0.344 → 5.0.345-alpha-bb62853.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.344",
+  "version": "5.0.345-alpha-bb62853.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/lib/security.js

@@ -2,7 +2,8 @@
 
 import { isSameDomain } from "@krakenjs/cross-domain-utils/src";
 import { supportsPopups } from "@krakenjs/belter/src";
-import { isPayPalDomain } from "@paypal/sdk-client/src";
+import { getEnv, isPayPalDomain } from "@paypal/sdk-client/src";
+import { ENV } from "@paypal/sdk-constants/src";
 
 export function allowIframe(): boolean {
   if (!isPayPalDomain()) {
@@ -28,3 +29,13 @@ export function allowIframe(): boolean {
 export const protectedExport = (unprotectedExport) =>
   isPayPalDomain() ? unprotectedExport : undefined;
 /* eslint-enable no-confusing-arrow */
+
+// $FlowIssue
+export const localOrStageExport = (unprotectedExport) => {
+  const env = getEnv();
+  if (env === ENV.LOCAL || env === ENV.STAGE) {
+    return unprotectedExport;
+  } else {
+    return undefined;
+  }
+};

package/src/three-domain-secure/component.jsx

@@ -1,17 +1,25 @@
 /* @flow */
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals, promise/no-native */
 import { type LoggerType } from "@krakenjs/beaver-logger/src";
+import { type ZoidComponent } from "@krakenjs/zoid/src";
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-import { create, type ZoidComponent } from "@krakenjs/zoid/src";
 import { FPTI_KEY } from "@paypal/sdk-constants/src";
 
 import { ValidationError } from "../lib";
 
-type SdkConfig = {|
-  sdkToken: ?string,
-|};
+import {
+  requestData,
+  responseBody,
+  Request,
+  MerchantPayloadData,
+  SdkConfig,
+  threeDSResponse,
+} from "./types";
+import { getThreeDomainSecureComponent } from "./utils";
 
 const parseSdkConfig = ({ sdkConfig, logger }): SdkConfig => {
-  if (!sdkConfig.sdkToken) {
+  if (!sdkConfig.authenticationToken) {
     throw new ValidationError(
       `script data attribute sdk-client-token is required but was not passed`
     );
@@ -23,32 +31,127 @@ const parseSdkConfig = ({ sdkConfig, logger }): SdkConfig => {
 
   return sdkConfig;
 };
+
+const parseMerchantPayload = ({
+  merchantPayload,
+}: {|
+  merchantPayload: MerchantPayloadData,
+|}): requestData => {
+  const { threeDSRequested, amount, currency, nonce, transactionContext } =
+    merchantPayload;
+
+  return {
+    intent: "THREE_DS_VERIFICATION",
+    payment_source: {
+      card: {
+        single_use_token: nonce,
+        verification_method: threeDSRequested
+          ? "SCA_ALWAYS"
+          : "SCA_WHEN_REQUIRED",
+      },
+    },
+    amount: {
+      currency_code: currency,
+      value: amount,
+    },
+    ...transactionContext,
+  };
+};
+
 export interface ThreeDomainSecureComponentInterface {
-  isEligible(): ZalgoPromise<boolean>;
-  show(): ZoidComponent<void>;
+  isEligible(): Promise<boolean>;
+  show(): Promise<threeDSResponse>;
 }
 export class ThreeDomainSecureComponent {
   logger: LoggerType;
+  request: Request;
   sdkConfig: SdkConfig;
-
+  authenticationURL: string;
+  threeDSIframe: ZoidComponent;
   constructor({
     logger,
+    request,
     sdkConfig,
   }: {|
     logger: LoggerType,
+    request: Request,
     sdkConfig: SdkConfig,
   |}) {
     this.logger = logger;
+    this.request = request;
     this.sdkConfig = parseSdkConfig({ sdkConfig, logger });
   }
 
-  isEligible(): ZalgoPromise<boolean> {
-    return new ZalgoPromise((resolve) => {
-      resolve(false);
-    });
+  async isEligible(merchantPayload: MerchantPayloadData): Promise<boolean> {
+    const data = parseMerchantPayload({ merchantPayload });
+    try {
+      // $FlowFixMe
+      const { status, links } = await this.request<requestData, responseBody>({
+        method: "POST",
+        url: `https://te-test-qa.qa.paypal.com:12326/v2/payments/payment`,
+        data,
+        accessToken: this.sdkConfig.authenticationToken,
+      });
+
+      let responseStatus = false;
+
+      if (status === "PAYER_ACTION_REQUIRED") {
+        this.authenticationURL = links.find(
+          (link) => link.rel === "payer-action"
+        ).href;
+        responseStatus = true;
+        this.threeDSIframe = getThreeDomainSecureComponent(
+          this.authenticationURL
+        );
+      }
+      return responseStatus;
+    } catch (error) {
+      this.logger.warn(error);
+      throw error;
+    }
   }
 
-  show() {
-    create({ tag: "", url: "" });
+  show(): Promise<threeDSResponse> {
+    if (!this.threeDSIframe) {
+      throw new ValidationError(`Ineligible for three domain secure`);
+      return;
+    }
+    const promise = new ZalgoPromise();
+    const cancelThreeDS = () => {
+      return ZalgoPromise.try(() => {
+        // eslint-disable-next-line no-console
+        console.log("cancelled");
+      }).then(() => {
+        // eslint-disable-next-line no-use-before-define
+        instance.close();
+      });
+    };
+
+    const instance = this.threeDSIframe({
+      onSuccess: (data) => {
+        // const {threeDSRefID, authentication_status, liability_shift } = data;
+        // let enrichedNonce;
+        // if(threeDSRefID) {
+        //   enrichedNonce = await updateNonceWith3dsData(threeDSRefID, this.fastlaneNonce)
+        // }
+
+        return promise.resolve(data);
+      },
+      onClose: cancelThreeDS,
+      onError: (err) => {
+        return promise.reject(
+          new Error(
+            `Error with obtaining 3DS contingency, ${JSON.stringify(err)}`
+          )
+        );
+      },
+    });
+    const TARGET_ELEMENT = {
+      BODY: "body",
+    };
+    return instance
+      .renderTo(window.parent, TARGET_ELEMENT.BODY)
+      .then(() => promise)
+      .finally(instance.close);
   }
 }

package/src/three-domain-secure/component.test.js

@@ -1,14 +1,32 @@
 /* @flow */
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals, promise/no-native, compat/compat */
 import { describe, expect, vi } from "vitest";
 
 import { ThreeDomainSecureComponent } from "./component";
 
 const defaultSdkConfig = {
-  sdkToken: "sdk-client-token",
+  authenticationToken: "sdk-client-token",
+};
+
+const defaultEligibilityResponse = {
+  status: "PAYER_ACTION_REQUIRED",
+  links: [{ href: "https://testurl.com", rel: "payer-action" }],
+};
+
+const defaultMerchantPayload = {
+  amount: "1.00",
+  currency: "USD",
+  nonce: "test-nonce",
+};
+
+const mockEligibilityRequest = (body = defaultEligibilityResponse) => {
+  return vi.fn().mockResolvedValue(body);
 };
 
 const createThreeDomainSecureComponent = ({
   sdkConfig = defaultSdkConfig,
+  request = mockEligibilityRequest(),
   logger = {
     info: vi.fn().mockReturnThis(),
     warn: vi.fn().mockReturnThis(),
@@ -18,8 +36,11 @@ const createThreeDomainSecureComponent = ({
   },
 } = {}) =>
   new ThreeDomainSecureComponent({
+    // $FlowFixMe
     sdkConfig,
     // $FlowIssue
+    request,
+    // $FlowIssue
     logger,
   });
 
@@ -28,17 +49,87 @@ afterEach(() => {
 });
 
 describe("three domain secure component - isEligible method", () => {
-  test("should return false", async () => {
-    const threeDomainSecuretClient = createThreeDomainSecureComponent();
-    const eligibility = await threeDomainSecuretClient.isEligible();
+  test("should return true if payer action required", async () => {
+    const threeDomainSecureClient = createThreeDomainSecureComponent();
+    const eligibility = await threeDomainSecureClient.isEligible(
+      defaultMerchantPayload
+    );
+    expect(eligibility).toEqual(true);
+  });
+
+  test("should return false if payer action is not returned", async () => {
+    const threeDomainSecureClient = createThreeDomainSecureComponent({
+      request: () =>
+        Promise.resolve({ ...defaultEligibilityResponse, status: "SUCCESS" }),
+    });
+    const eligibility = await threeDomainSecureClient.isEligible(
+      defaultMerchantPayload
+    );
     expect(eligibility).toEqual(false);
   });
+
+  test("should assign correct URL to authenticationURL", async () => {
+    const threeDomainSecureClient = createThreeDomainSecureComponent({
+      request: () =>
+        Promise.resolve({
+          ...defaultEligibilityResponse,
+          links: [
+            { href: "https://not-payer-action.com", rel: "not-payer-action" },
+            ...defaultEligibilityResponse.links,
+          ],
+        }),
+    });
+    await threeDomainSecureClient.isEligible(defaultMerchantPayload);
+    expect(threeDomainSecureClient.authenticationURL).toEqual(
+      "https://testurl.com"
+    );
+  });
+
+  test("create payload with correctly parameters", async () => {
+    const mockedRequest = mockEligibilityRequest();
+    const threeDomainSecureClient = createThreeDomainSecureComponent({
+      request: mockedRequest,
+    });
+
+    await threeDomainSecureClient.isEligible(defaultMerchantPayload);
+
+    expect(mockedRequest).toHaveBeenCalledWith(
+      expect.objectContaining({
+        data: expect.objectContaining({
+          intent: "THREE_DS_VERIFICATION",
+          payment_source: expect.objectContaining({
+            card: expect.objectContaining({
+              single_use_token: defaultMerchantPayload.nonce,
+              verification_method: "SCA_WHEN_REQUIRED",
+            }),
+          }),
+          amount: expect.objectContaining({
+            currency_code: defaultMerchantPayload.currency,
+            value: defaultMerchantPayload.amount,
+          }),
+        }),
+      })
+    );
+  });
+
+  test("catch errors from the API", async () => {
+    const mockRequest = vi.fn().mockRejectedValue(new Error("Error with API"));
+    const threeDomainSecureClient = createThreeDomainSecureComponent({
+      request: mockRequest,
+    });
+
+    expect.assertions(2);
+    await expect(() =>
+      threeDomainSecureClient.isEligible(defaultMerchantPayload)
+    ).rejects.toThrow(new Error("Error with API"));
+    expect(mockRequest).toHaveBeenCalled();
+  });
 });
 
 describe("three domain descure component - show method", () => {
-  test.skip("should return a zoid component", () => {
-    const threeDomainSecuretClient = createThreeDomainSecureComponent();
-    threeDomainSecuretClient.show();
+  test.todo("should return a zoid component", () => {
+    const threeDomainSecureClient = createThreeDomainSecureComponent();
+    threeDomainSecureClient.show();
     // create test for zoid component
   });
 });
@@ -49,7 +140,7 @@ describe("three domain secure component - initialization", () => {
       createThreeDomainSecureComponent({
         sdkConfig: {
           ...defaultSdkConfig,
-          sdkToken: "",
+          authenticationToken: "",
         },
       })
     ).toThrowError(

package/src/three-domain-secure/interface.js

@@ -1,8 +1,12 @@
 /* @flow */
-import { getLogger, getSDKToken } from "@paypal/sdk-client/src";
+import {
+  getLogger,
+  getPayPalAPIDomain,
+  getUserIDToken,
+} from "@paypal/sdk-client/src";
 
+import { callRestAPI, localOrStageExport } from "../lib";
 import type { LazyExport } from "../types";
-import { protectedExport } from "../lib";
 
 import {
   ThreeDomainSecureComponent,
@@ -14,12 +18,15 @@ export const ThreeDomainSecureClient: LazyExport<ThreeDomainSecureComponentInter
     __get__: () => {
       const threeDomainSecureInstance = new ThreeDomainSecureComponent({
         logger: getLogger(),
+        // $FlowIssue ZalgoPromise vs Promise
+        request: callRestAPI,
         sdkConfig: {
-          sdkToken: getSDKToken(),
+          authenticationToken: getUserIDToken(),
+          paypalApiDomain: getPayPalAPIDomain(),
         },
       });
-      return protectedExport({
-        isEligible: () => threeDomainSecureInstance.isEligible(),
+      return localOrStageExport({
+        isEligible: (payload) => threeDomainSecureInstance.isEligible(payload),
         show: () => threeDomainSecureInstance.show(),
       });
     },

package/src/three-domain-secure/types.js

@@ -0,0 +1,77 @@
+/* @flow */
+/* eslint-disable no-restricted-globals, promise/no-native */
+export type MerchantPayloadData = {|
+  amount: string,
+  currency: string,
+  nonce: string,
+  threeDSRequested?: boolean,
+  transactionContext?: Object,
+|};
+
+// eslint-disable-next-line no-undef
+export type Request = <TRequestData, TResponse>({|
+  method?: string,
+  url: string,
+  // eslint-disable-next-line no-undef
+  data: TRequestData,
+  accessToken: ?string,
+  // eslint-disable-next-line no-undef
+|}) => Promise<TResponse>;
+
+export type requestData = {|
+  intent: "THREE_DS_VERIFICATION",
+  payment_source: {|
+    card: {|
+      single_use_token: string,
+      verification_method: string,
+    |},
+  |},
+  amount: {|
+    currency_code: string,
+    value: string,
+  |},
+  transaction_context?: {|
+    soft_descriptor?: string,
+  |},
+|};
+
+export type responseBody = {|
+  payment_id: string,
+  status: string,
+  intent: string,
+  payment_source: {|
+    card: {|
+      last_digits: string,
+      type: string,
+      name: string,
+      expiry: string,
+    |},
+  |},
+  amount: {|
+    currency_code: string,
+    value: string,
+  |},
+  transaction_context: {|
+    soft_descriptor: string,
+  |},
+  links: $ReadOnlyArray<{|
+    href: string,
+    rel: string,
+    method: string,
+  |}>,
+|};
+
+export type SdkConfig = {|
+  authenticationToken: ?string,
+  paypalApiDomain: string,
+|};
+
+export type threeDSResponse = {|
+  liabilityShift: string,
+  authenticationStatus: string,
+  nonce?: string,
+|};
+
+export type TDSResult = {||};
+
+/* eslint-enable no-restricted-globals, promise/no-native */

package/src/three-domain-secure/utils.jsx

@@ -0,0 +1,108 @@
+/* @flow */
+/** @jsx node */
+/* eslint max-lines: 0 */
+
+import { node, dom } from "@krakenjs/jsx-pragmatic/src";
+import { create, type ZoidComponent } from "@krakenjs/zoid/src";
+import { inlineMemoize, noop } from "@krakenjs/belter/src";
+import { getCSPNonce } from "@paypal/sdk-client/src";
+
+import { Overlay } from "../ui/overlay";
+
+import { threeDSResponse } from "./types";
+
+export type TDSProps = {|
+  action: string,
+  xcomponent: string,
+  flow: string,
+  orderID: string,
+  onSuccess: (threeDSResponse) => void,
+  onError: (mixed) => void,
+  sdkMeta: string,
+  content?: void | {|
+    windowMessage?: string,
+    continueMessage?: string,
+    cancelMessage?: string,
+    interrogativeMessage?: string,
+  |},
+  nonce: string,
+|};
+
+export type TDSComponent = ZoidComponent<TDSProps>;
+
+export function getThreeDomainSecureComponent(payerActionUrll): TDSComponent {
+  return inlineMemoize(getThreeDomainSecureComponent, () => {
+    const component = create({
+      tag: "three-domain-secure-client",
+      url: payerActionUrll,
+
+      attributes: {
+        iframe: {
+          scrolling: "no",
+        },
+      },
+
+      containerTemplate: ({
+        context,
+        focus,
+        close,
+        frame,
+        prerenderFrame,
+        doc,
+        event,
+        props,
+      }) => {
+        return (
+          <Overlay
+            context={context}
+            close={close}
+            focus={focus}
+            event={event}
+            frame={frame}
+            prerenderFrame={prerenderFrame}
+            content={props.content}
+            nonce={props.nonce}
+          />
+        ).render(dom({ doc }));
+      },
+
+      props: {
+        xcomponent: {
+          type: "string",
+          queryParam: true,
+          value: () => "1",
+        },
+        onSuccess: {
+          type: "function",
+          alias: "onContingencyResult",
+          decorate: ({ value, onError }) => {
+            return (err, result) => {
+              if (err) {
+                return onError(err);
+              }
+
+              return value(result);
+            };
+          },
+        },
+        content: {
+          type: "object",
+          required: false,
+        },
+        nonce: {
+          type: "string",
+          default: getCSPNonce,
+        },
+      },
+    });
+
+    if (component.isChild()) {
+      window.xchild = {
+        props: component.xprops,
+        close: noop,
+      };
+    }
+
+    return component;
+  });
+}

package/src/ui/overlay/index.jsx

@@ -0,0 +1,3 @@
+/* @flow */
+
+export * from "./overlay";

package/src/ui/overlay/overlay.jsx

@@ -0,0 +1,228 @@
+/* @flow */
+/** @jsx node */
+/* eslint max-lines: off, react/jsx-max-depth: off */
+
+import {
+  isIos,
+  isIpadOs,
+  isFirefox,
+  animate,
+  noop,
+  destroyElement,
+  uniqueID,
+  supportsPopups,
+  type EventEmitterType,
+  toCSS,
+} from "@krakenjs/belter/src";
+import { EVENT, CONTEXT } from "@krakenjs/zoid/src";
+import { node, type ElementNode } from "@krakenjs/jsx-pragmatic/src";
+import { LOGO_COLOR, PPLogo, PayPalLogo } from "@paypal/sdk-logos/src";
+import { type ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+
+import { getContainerStyle, getSandboxStyle, CLASS } from "./style";
+
+export type OverlayProps = {|
+  context: $Values<typeof CONTEXT>,
+  close: () => ZalgoPromise<void>,
+  focus: () => ZalgoPromise<void>,
+  event: EventEmitterType,
+  frame: ?HTMLElement,
+  prerenderFrame: ?HTMLElement,
+  content?: void | {|
+    windowMessage?: string,
+    continueMessage?: string,
+    cancelMessage?: string,
+    interrogativeMessage?: string,
+  |},
+  autoResize?: boolean,
+  hideCloseButton?: boolean,
+  nonce: string,
+  fullScreen?: boolean,
+|};
+export function Overlay({
+  context,
+  close,
+  focus,
+  event,
+  frame,
+  prerenderFrame,
+  content = {},
+  autoResize,
+  hideCloseButton,
+  nonce,
+  fullScreen = false,
+}: OverlayProps): ElementNode {
+  const uid = `paypal-overlay-${uniqueID()}`;
+  const overlayIframeName = `__paypal_checkout_sandbox_${uid}__`;
+
+  function closeCheckout(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    close();
+  }
+
+  function displayFocusWarning() {
+    const overlayIframe: ?HTMLIFrameElement =
+      //  $FlowFixMe
+      document.getElementsByName(overlayIframeName)?.[0];
+    const iframeDocument = overlayIframe?.contentWindow.document;
+    const warningElement = iframeDocument?.getElementsByClassName(
+      "paypal-checkout-focus-warning"
+    )?.[0];
+
+    if (!warningElement) {
+      return;
+    }
+    warningElement.innerText = `Still can't see it? Select "Window" in your toolbar to find "Log in to your PayPal account"`;
+  }
+
+  function focusCheckout(e) {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (!supportsPopups()) {
+      return;
+    }
+
+    if (isIos() || isIpadOs()) {
+      // Note: alerts block the event loop until they are closed.
+      // eslint-disable-next-line no-alert
+      window.alert("Please switch tabs to reactivate the PayPal window");
+    } else if (isFirefox()) {
+      displayFocusWarning();
+    }
+    focus();
+  }
+
+  const setupAnimations = (name) => {
+    return (el) => {
+      const showContainer = () => animate(el, `show-${name}`, noop);
+      const hideContainer = () => animate(el, `hide-${name}`, noop);
+      event.on(EVENT.DISPLAY, showContainer);
+      event.on(EVENT.CLOSE, hideContainer);
+    };
+  };
+
+  const setupAutoResize = (el) => {
+    event.on(EVENT.RESIZE, ({ width: newWidth, height: newHeight }) => {
+      if (typeof newWidth === "number") {
+        el.style.width = toCSS(newWidth);
+      }
+
+      if (typeof newHeight === "number") {
+        el.style.height = toCSS(newHeight);
+      }
+    });
+  };
+
+  const outletOnRender = (el) => {
+    setupAnimations("component")(el);
+    if (autoResize) {
+      setupAutoResize(el);
+    }
+  };
+
+  let outlet;
+
+  if (frame && prerenderFrame) {
+    frame.classList.add(CLASS.COMPONENT_FRAME);
+    prerenderFrame.classList.add(CLASS.PRERENDER_FRAME);
+
+    prerenderFrame.classList.add(CLASS.VISIBLE);
+    frame.classList.add(CLASS.INVISIBLE);
+
+    event.on(EVENT.RENDERED, () => {
+      prerenderFrame.classList.remove(CLASS.VISIBLE);
+      prerenderFrame.classList.add(CLASS.INVISIBLE);
+
+      frame.classList.remove(CLASS.INVISIBLE);
+      frame.classList.add(CLASS.VISIBLE);
+
+      setTimeout(() => {
+        destroyElement(prerenderFrame);
+      }, 1);
+    });
+
+    outlet = (
+      <div class={CLASS.OUTLET} onRender={outletOnRender}>
+        <node el={frame} />
+        <node el={prerenderFrame} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      id={uid}
+      onRender={setupAnimations("container")}
+      class="paypal-checkout-sandbox"
+    >
+      <style nonce={nonce}>{getSandboxStyle({ uid })}</style>
+      <iframe
+        title="PayPal Checkout Overlay"
+        name={overlayIframeName}
+        scrolling="no"
+        class={`paypal-checkout-sandbox-iframe${fullScreen ? "-full" : ""}`}
+      >
+        <html>
+          <body>
+            <div
+              dir="auto"
+              id={uid}
+              onClick={focusCheckout}
+              class={`paypal-overlay-context-${context} paypal-checkout-overlay`}
+            >
+              {!hideCloseButton && (
+                <a
+                  href="#"
+                  class="paypal-checkout-close"
+                  onClick={closeCheckout}
+                  aria-label="close"
+                  role="button"
+                />
+              )}
+              {!fullScreen && (
+                <div class="paypal-checkout-modal">
+                  <div class="paypal-checkout-logo" dir="ltr">
+                    <PPLogo logoColor={LOGO_COLOR.WHITE} />
+                    <PayPalLogo logoColor={LOGO_COLOR.WHITE} />
+                  </div>
+                  {content.windowMessage && (
+                    <div class="paypal-checkout-message">
+                      {content.windowMessage}
+                    </div>
+                  )}
+                  <div class="paypal-checkout-focus-warning" />
+                  {content.continueMessage && (
+                    <div class="paypal-checkout-continue">
+                      {/* This handler should be guarded with e.stopPropagation. 
+                          This will stop the event from bubbling up to the overlay click handler
+                          and causing unexpected behavior. */}
+                      <a onClick={focusCheckout} href="#">
+                        {content.continueMessage}
+                      </a>
+                    </div>
+                  )}
+                  <div class="paypal-checkout-loader">
+                    <div class="paypal-spinner" />
+                  </div>
+                </div>
+              )}
+              <div
+                class={
+                  fullScreen
+                    ? "paypal-checkout-iframe-container-full"
+                    : "paypal-checkout-iframe-container"
+                }
+              >
+                {outlet}
+              </div>
+
+              <style nonce={nonce}>{getContainerStyle({ uid })}</style>
+            </div>
+          </body>
+        </html>
+      </iframe>
+    </div>
+  );
+}

package/src/ui/overlay/style.jsx

@@ -0,0 +1,380 @@
+/* @flow */
+
+import { CONTEXT } from "@krakenjs/zoid/src";
+
+export const CLASS = {
+  OUTLET: "outlet",
+  VISIBLE: "visible",
+  INVISIBLE: "invisible",
+  COMPONENT_FRAME: "component-frame",
+  PRERENDER_FRAME: "prerender-frame",
+};
+
+export function getSandboxStyle({ uid }: {| uid: string |}): string {
+  return `
+        #${uid}.paypal-checkout-sandbox {
+            display: block;
+            position: fixed;
+            top: 0;
+            left: 0;
+
+            width: 100%;
+            height: 100%;
+            width: 100vw;
+            height: 100vh;
+            max-width: 100%;
+            max-height: 100%;
+            min-width: 100%;
+            min-height: 100%;
+
+            z-index: 2147483647;
+
+            animation-duration: 0.3s;
+            animation-iteration-count: 1;
+            animation-fill-mode: forwards !important;
+            opacity: 0;
+        }
+
+        #${uid}.paypal-checkout-sandbox .paypal-checkout-sandbox-iframe {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        #${uid}.paypal-checkout-sandbox .paypal-checkout-sandbox-iframe-full {
+            border: 0;
+            height: 100%;
+            width: 100vw;
+        }
+
+        @keyframes show-container {
+            from {
+                opacity: 0;
+            }
+
+            to {
+                opacity: 1;
+            }
+        }
+
+        @keyframes hide-container {
+            from {
+                opacity: 1;
+            }
+
+            50% {
+                opacity: 1;
+            }
+
+            to {
+                opacity: 0;
+            }
+        }
+    `;
+}
+
+export function getContainerStyle({ uid }: {| uid: string |}): string {
+  return `
+        #${uid} {
+            position: absolute;
+            z-index: 2147483647;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+
+            transform: translate3d(0, 0, 0);
+
+            background-color: black;
+            background-color: rgba(0, 0, 0, 0.8);
+            background: radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,0.6) 1%, rgba(0,0,0,0.8) 100%);
+
+            color: #fff;
+        }
+
+        #${uid} a {
+            color: #fff;
+        }
+
+        #${uid} .paypal-checkout-close:before,
+        #${uid} .paypal-checkout-close:after {
+            background-color: #fff;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.POPUP} {
+            cursor: pointer;
+        }
+
+        #${uid} a {
+            text-decoration: none;
+        }
+
+        #${uid} .paypal-checkout-modal {
+            font-family: "HelveticaNeue", "HelveticaNeue-Light", "Helvetica Neue Light", helvetica, arial, sans-serif;
+            font-size: 14px;
+            text-align: center;
+
+            box-sizing: border-box;
+            max-width: 350px;
+            top: 50%;
+            left: 50%;
+            position: absolute;
+            transform: translateX(-50%) translateY(-50%);
+            cursor: pointer;
+            text-align: center;
+        }
+
+        #${uid}.paypal-overlay-loading .paypal-checkout-message, #${uid}.paypal-overlay-loading .paypal-checkout-continue {
+            display: none;
+        }
+
+        .paypal-checkout-loader {
+            display: none;
+        }
+
+        #${uid}.paypal-overlay-loading .paypal-checkout-loader {
+            display: block;
+        }
+
+        #${uid} .paypal-checkout-modal .paypal-checkout-logo {
+            cursor: pointer;
+            margin-bottom: 30px;
+            display: inline-block;
+        }
+
+        #${uid} .paypal-checkout-modal .paypal-checkout-logo img {
+            height: 36px;
+        }
+
+        #${uid} .paypal-checkout-modal .paypal-checkout-logo img.paypal-checkout-logo-pp {
+            margin-right: 10px;
+        }
+
+        #${uid} .paypal-checkout-modal .paypal-checkout-message {
+            font-size: 15px;
+            line-height: 1.5;
+            padding: 10px 0;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-message, #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-continue {
+            display: none;
+        }
+
+        #${uid} .paypal-checkout-modal .paypal-checkout-continue {
+            font-size: 15px;
+            line-height: 1.35;
+            padding: 10px 0;
+            font-weight: bold;
+        }
+
+        #${uid} .paypal-checkout-modal .paypal-checkout-continue a {
+            border-bottom: 1px solid white;
+        }
+
+        #${uid} .paypal-checkout-close {
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            width: 16px;
+            height: 16px;
+            opacity: 0.6;
+        }
+
+        #${uid}.paypal-overlay-loading .paypal-checkout-close {
+            display: none;
+        }
+
+        #${uid} .paypal-checkout-close:hover {
+            opacity: 1;
+        }
+
+        #${uid} .paypal-checkout-close:before, .paypal-checkout-close:after {
+            position: absolute;
+            left: 8px;
+            content: ' ';
+            height: 16px;
+            width: 2px;
+        }
+
+        #${uid} .paypal-checkout-close:before {
+            transform: rotate(45deg);
+        }
+
+        #${uid} .paypal-checkout-close:after {
+            transform: rotate(-45deg);
+        }
+
+        #${uid} .paypal-checkout-focus-warning {
+            font-size: 14px;
+            line-height: 1.35;
+            padding: 10px 0;
+        }
+
+        #${uid} .paypal-checkout-iframe-container {
+            display: none;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container,
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container > .${CLASS.OUTLET},
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container > .${CLASS.OUTLET} > iframe {
+            max-height: 95vh;
+            max-width: 95vw;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container-full,
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container-full > .${CLASS.OUTLET},
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container-full > .${CLASS.OUTLET} > iframe {
+            height: 100vh;
+            max-width: 100vw;
+            width: 100vw;
+        }
+
+        @media screen and (max-width: 470px) {
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container,
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container > .${CLASS.OUTLET},
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container > .${CLASS.OUTLET} > iframe {
+                max-height: 85vh;
+            }
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container-full,
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container-full > .${CLASS.OUTLET},
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container-full > .${CLASS.OUTLET} > iframe {
+                height: 100vh;
+            }
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container {
+
+            display: block;
+
+            position: absolute;
+
+            top: 50%;
+            left: 50%;
+
+            min-width: 450px;
+
+            transform: translate(-50%, -50%);
+            transform: translate3d(-50%, -50%, 0);
+
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} {
+
+            position: relative;
+
+            transition: all 0.3s ease;
+            animation-duration: 0.3s;
+            animation-fill-mode: forwards !important;
+
+            min-width: 450px;
+            max-width: 450px;
+            width: 450px;
+            height: 535px;
+
+            background-color: white;
+
+            overflow: auto;
+
+            opacity: 0;
+            transform: scale3d(.3, .3, .3);
+
+            -webkit-overflow-scrolling: touch;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe {
+            position: absolute;
+            top: 0;
+            left: 0;
+            transition: opacity .4s ease-in-out;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.COMPONENT_FRAME} {
+            z-index: 100;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.PRERENDER_FRAME} {
+            z-index: 200;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.VISIBLE} {
+            opacity: 1;
+            z-index: 200;
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} > iframe.${CLASS.INVISIBLE} {
+            opacity: 0;
+            z-index: 100;
+        }
+
+        @media screen and (max-width: 470px) {
+
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .paypal-checkout-iframe-container,
+            #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} {
+                min-width: 100%;
+                min-width: calc(100% - 20px);
+
+                max-width: 100%;
+                max-width: calc(100% - 20px);
+            }
+        }
+
+        #${uid}.paypal-overlay-context-${CONTEXT.IFRAME} .${CLASS.OUTLET} iframe {
+            width: 1px;
+            min-width: 100%;
+            height: 100%;
+        }
+
+        @keyframes show-component {
+            from {
+                opacity: 0;
+                transform: scale3d(.3, .3, .3);
+            }
+
+            to {
+                opacity: 1;
+                transform: scale3d(1, 1, 1);
+            }
+        }
+
+        @keyframes hide-component {
+            from {
+                opacity: 1;
+                transform: scale3d(1, 1, 1);
+            }
+
+            to {
+                opacity: 0;
+                transform: scale3d(.3, .3, .3);
+            }
+        }
+
+        .paypal-spinner {
+            height: 30px;
+            width: 30px;
+            display: inline-block;
+            box-sizing: content-box;
+            opacity: 1;
+            filter: alpha(opacity=100);
+            animation: rotation .7s infinite linear;
+            border-left: 8px solid rgba(0, 0, 0, .2);
+            border-right: 8px solid rgba(0, 0, 0, .2);
+            border-bottom: 8px solid rgba(0, 0, 0, .2);
+            border-top: 8px solid #fff;
+            border-radius: 100%
+        }
+
+        @keyframes rotation {
+            from {
+                transform: rotate(0deg)
+            }
+            to {
+                transform: rotate(359deg)
+            }
+        }
+    `;
+}