@primer-io/react-native 0.12.1 → 0.13.0-beta.1

package/lib/module/headless_checkout/PrimerHeadlessUniversalCheckout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PrimerHeadlessUniversalCheckout.ts"],"names":["NativePrimerHeadlessUniversalCheckout","PrimerHeadlessUniversalCheckoutClass","constructor","callbacks","undefined","configureListeners","addListener","console","log","onPreparationStarted","onPaymentMethodPresented","onTokenizeStart","data","paymentMethodToken","paymentMethodTokenObj","JSON","parse","onTokenizeSuccess","err","name","description","onFailure","onResumeSuccess","resumeToken","error","startWithClientToken","clientToken","settings","showPaymentMethod","paymentMethod","resumeWithClientToken","getAssetForPaymentMethod","paymentMethodType","assetType","getAssetForCardNetwork","cardNetwork","PrimerHeadlessUniversalCheckout"],"mappings":"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","sourcesContent":["import type { PaymentInstrumentToken } from 'src/models/payment-instrument-token';\nimport type { PrimerError } from 'src/models/primer-error';\nimport type { PrimerSettings } from 'src/models/primer-settings';\nimport NativePrimerHeadlessUniversalCheckout from './NativePrimerHeadlessUniversalCheckout';\nimport type {\n  PrimerHeadlessUniversalCheckoutStartResponse,\n  PrimerHeadlessUniversalCheckoutCallbacks,\n} from './types';\n\nclass PrimerHeadlessUniversalCheckoutClass {\n  private callbacks: PrimerHeadlessUniversalCheckoutCallbacks | undefined;\n\n  ///////////////////////////////////////////\n  // Init\n  ///////////////////////////////////////////\n  constructor() {\n    this.callbacks = undefined;\n    this.configureListeners();\n  }\n\n  private configureListeners() {\n    NativePrimerHeadlessUniversalCheckout.addListener(\n      'preparationStarted',\n      () => {\n        console.log('preparationStarted');\n        this.callbacks?.onPreparationStarted?.();\n      }\n    );\n\n    NativePrimerHeadlessUniversalCheckout.addListener(\n      'paymentMethodPresented',\n      () => {\n        console.log('paymentMethodPresented');\n        this.callbacks?.onPaymentMethodPresented?.();\n      }\n    );\n\n    NativePrimerHeadlessUniversalCheckout.addListener(\n      'tokenizationStarted',\n      () => {\n        console.log('tokenizationStarted');\n        this.callbacks?.onTokenizeStart?.();\n      }\n    );\n\n    NativePrimerHeadlessUniversalCheckout.addListener(\n      'tokenizationSucceeded',\n      (data) => {\n        console.log('tokenizationSucceeded', data);\n\n        if (data.paymentMethodToken) {\n          const paymentMethodTokenObj: PaymentInstrumentToken = JSON.parse(\n            data.paymentMethodToken\n          );\n          this.callbacks?.onTokenizeSuccess?.(paymentMethodTokenObj);\n        } else {\n          const err: PrimerError = {\n            name: 'ParseJsonFailed',\n            description: 'Failed to parse payment method token',\n          };\n          //@ts-ignore\n          this.callbacks?.onFailure?.(err);\n        }\n      }\n    );\n\n    NativePrimerHeadlessUniversalCheckout.addListener('resume', (data) => {\n      console.log('resume', data);\n      this.callbacks?.onResumeSuccess?.(data.resumeToken);\n    });\n\n    NativePrimerHeadlessUniversalCheckout.addListener('error', (data) => {\n      console.log('error', data);\n      this.callbacks?.onFailure?.(data.error);\n    });\n  }\n\n  ///////////////////////////////////////////\n  // API\n  ///////////////////////////////////////////\n  startWithClientToken(\n    clientToken: string,\n    settings: PrimerSettings & PrimerHeadlessUniversalCheckoutCallbacks\n  ): Promise<PrimerHeadlessUniversalCheckoutStartResponse> {\n    // Copy callback\n    this.callbacks = {\n      onPreparationStarted: settings.onPreparationStarted,\n      onPaymentMethodPresented: settings.onPaymentMethodPresented,\n      onTokenizeStart: settings.onTokenizeStart,\n      onTokenizeSuccess: settings.onTokenizeSuccess,\n      onResumeSuccess: settings.onResumeSuccess,\n      onFailure: settings.onFailure,\n    };\n\n    return NativePrimerHeadlessUniversalCheckout.startWithClientToken(\n      clientToken,\n      settings\n    );\n  }\n\n  showPaymentMethod(paymentMethod: string) {\n    return NativePrimerHeadlessUniversalCheckout.showPaymentMethod(\n      paymentMethod\n    );\n  }\n\n  resumeWithClientToken(resumeToken: string) {\n    return NativePrimerHeadlessUniversalCheckout.resumeWithClientToken(\n      resumeToken\n    );\n  }\n\n  getAssetForPaymentMethod(\n    paymentMethodType: string,\n    assetType: 'logo' | 'icon'\n  ): Promise<string> {\n    return NativePrimerHeadlessUniversalCheckout.getAssetForPaymentMethod(\n      paymentMethodType,\n      assetType\n    );\n  }\n\n  getAssetForCardNetwork(\n    cardNetwork: string,\n    assetType: 'logo' | 'icon'\n  ): Promise<string> {\n    return NativePrimerHeadlessUniversalCheckout.getAssetForCardNetwork(\n      cardNetwork,\n      assetType\n    );\n  }\n}\n\nconst PrimerHeadlessUniversalCheckout = new PrimerHeadlessUniversalCheckoutClass();\n\nexport default PrimerHeadlessUniversalCheckout;\n"]}

package/lib/module/headless_checkout/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/lib/module/headless_checkout/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/lib/module/index.js

@@ -1,4 +1,6 @@
+import PrimerHeadlessUniversalCheckout from './headless_checkout/PrimerHeadlessUniversalCheckout';
 import { PrimerNativeMapping } from './Primer';
+export * from './PrimerInput';
 const Primer = PrimerNativeMapping;
-export { Primer };
+export { Primer, PrimerHeadlessUniversalCheckout as HeadlessUniversalCheckout };
 //# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":["PrimerNativeMapping","Primer"],"mappings":"AACA,SAASA,mBAAT,QAAoC,UAApC;AAEA,MAAMC,MAAe,GAAGD,mBAAxB;AAEA,SAASC,MAAT","sourcesContent":["import type { IPrimer } from './models/primer';\nimport { PrimerNativeMapping } from './Primer';\n\nconst Primer: IPrimer = PrimerNativeMapping;\n\nexport { Primer };\n"]}
+{"version":3,"sources":["index.tsx"],"names":["PrimerHeadlessUniversalCheckout","PrimerNativeMapping","Primer","HeadlessUniversalCheckout"],"mappings":"AAAA,OAAOA,+BAAP,MAA4C,qDAA5C;AAEA,SAASC,mBAAT,QAAoC,UAApC;AACA,cAAc,eAAd;AAEA,MAAMC,MAAe,GAAGD,mBAAxB;AAEA,SAASC,MAAT,EAAiBF,+BAA+B,IAAIG,yBAApD","sourcesContent":["import PrimerHeadlessUniversalCheckout from './headless_checkout/PrimerHeadlessUniversalCheckout';\nimport type { IPrimer } from './models/primer';\nimport { PrimerNativeMapping } from './Primer';\nexport * from './PrimerInput';\n\nconst Primer: IPrimer = PrimerNativeMapping;\n\nexport { Primer, PrimerHeadlessUniversalCheckout as HeadlessUniversalCheckout };\n"]}

package/lib/typescript/PrimerInput.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export declare const PrimerCardNumberEditTextRaw: import("react-native").HostComponent<{}>;
+declare type PrimerCardNumberEditTextProps = ViewProps;
+export declare const PrimerCardNumberEditText: React.FC<PrimerCardNumberEditTextProps>;
+export declare const PrimerCardholderNameEditTextRaw: import("react-native").HostComponent<{}>;
+declare type PrimerCardholderNameEditTextProps = ViewProps;
+export declare const PrimerCardholderNameEditText: React.FC<PrimerCardholderNameEditTextProps>;
+export declare const PrimerExpiryEditTextRaw: import("react-native").HostComponent<{}>;
+declare type PrimerExpiryEditTextProps = ViewProps;
+export declare const PrimerExpiryEditText: React.FC<PrimerExpiryEditTextProps>;
+export declare const PrimerCvvEditTextRaw: import("react-native").HostComponent<{}>;
+declare type PrimerCvvEditTextProps = ViewProps;
+export declare const PrimerCvvEditText: React.FC<PrimerCvvEditTextProps>;
+export {};

package/lib/typescript/RNTPrimerHeadlessUniversalCheckoutCardFormUIManager.d.ts

@@ -0,0 +1 @@
+export declare const PrimerHeadlessUniversalCheckoutCardFormUIManager: any;

package/lib/typescript/headless_checkout/NativePrimerHeadlessUniversalCheckout.d.ts

@@ -0,0 +1,10 @@
+declare type EventType = 'preparationStarted' | 'paymentMethodPresented' | 'tokenizationStarted' | 'tokenizationSucceeded' | 'resume' | 'error';
+declare const NativePrimerHeadlessUniversalCheckout: {
+    addListener: (eventType: EventType, listener: (...args: any[]) => any) => void;
+    getAssetForPaymentMethod: (paymentMethodType: string, assetType: 'logo' | 'icon') => Promise<string>;
+    getAssetForCardNetwork: (cardNetwork: string, assetType: 'logo' | 'icon') => Promise<string>;
+    startWithClientToken(clientToken: string, settings: any): Promise<any>;
+    showPaymentMethod: (paymentMethod: string) => any;
+    resumeWithClientToken(resumeToken: string): void;
+};
+export default NativePrimerHeadlessUniversalCheckout;

package/lib/typescript/headless_checkout/PrimerHeadlessUniversalCheckout.d.ts

@@ -0,0 +1,14 @@
+import type { PrimerSettings } from 'src/models/primer-settings';
+import type { PrimerHeadlessUniversalCheckoutStartResponse, PrimerHeadlessUniversalCheckoutCallbacks } from './types';
+declare class PrimerHeadlessUniversalCheckoutClass {
+    private callbacks;
+    constructor();
+    private configureListeners;
+    startWithClientToken(clientToken: string, settings: PrimerSettings & PrimerHeadlessUniversalCheckoutCallbacks): Promise<PrimerHeadlessUniversalCheckoutStartResponse>;
+    showPaymentMethod(paymentMethod: string): any;
+    resumeWithClientToken(resumeToken: string): void;
+    getAssetForPaymentMethod(paymentMethodType: string, assetType: 'logo' | 'icon'): Promise<string>;
+    getAssetForCardNetwork(cardNetwork: string, assetType: 'logo' | 'icon'): Promise<string>;
+}
+declare const PrimerHeadlessUniversalCheckout: PrimerHeadlessUniversalCheckoutClass;
+export default PrimerHeadlessUniversalCheckout;

package/lib/typescript/headless_checkout/types.d.ts

@@ -0,0 +1,16 @@
+export interface PrimerHeadlessUniversalCheckoutStartResponse {
+    paymentMethodTypes: string[];
+}
+export interface PrimerError {
+    errorId: string;
+    description: string;
+    recoverySuggestion?: string;
+}
+export interface PrimerHeadlessUniversalCheckoutCallbacks {
+    onPreparationStarted?: () => void;
+    onPaymentMethodPresented?: () => void;
+    onTokenizeStart?: () => void;
+    onTokenizeSuccess?: (paymentMethod: any) => void;
+    onResumeSuccess?: (resumeToken: string) => void;
+    onFailure?: (error: PrimerError) => void;
+}

package/lib/typescript/index.d.ts

@@ -1,3 +1,5 @@
+import PrimerHeadlessUniversalCheckout from './headless_checkout/PrimerHeadlessUniversalCheckout';
 import type { IPrimer } from './models/primer';
+export * from './PrimerInput';
 declare const Primer: IPrimer;
-export { Primer };
+export { Primer, PrimerHeadlessUniversalCheckout as HeadlessUniversalCheckout };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer-io/react-native",
-  "version": "0.12.1",
+  "version": "0.13.0-beta.1",
   "description": "Primer SDK for RN",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/primer-io-react-native.podspec

@@ -18,5 +18,5 @@ Pod::Spec.new do |s|
   
 
   s.dependency "React-Core"
-  s.dependency "PrimerSDK", "1.29.0"
+  s.dependency "PrimerSDK", "1.28.0-beta.6"
 end

package/src/Primer.ts

@@ -55,6 +55,8 @@ export const PrimerNativeMapping: IPrimer = {
   },
 };
 
+//
+
 function configure(config: PrimerConfig): void {
   configureTheme(config.theme);
   configureSettings(config.settings);

package/src/PrimerInput.tsx

@@ -0,0 +1,73 @@
+import { PrimerHeadlessUniversalCheckoutCardFormUIManager } from './RNTPrimerHeadlessUniversalCheckoutCardFormUIManager';
+import React, { useEffect, useRef } from 'react';
+import { NativeModules, requireNativeComponent, ViewProps } from 'react-native';
+
+
+// PrimerCardNumberEditText
+export const PrimerCardNumberEditTextRaw = requireNativeComponent<{}>(
+  'PrimerCardNumberEditText'
+);
+
+type PrimerCardNumberEditTextProps = ViewProps;
+
+const { PrimerRN } = NativeModules;
+
+export const PrimerCardNumberEditText: React.FC<PrimerCardNumberEditTextProps> = (props) => {
+  const ref = useRef(React.createRef<any>());
+
+  useEffect(() => {
+    const tag = ref.current.current._nativeTag;
+    PrimerHeadlessUniversalCheckoutCardFormUIManager.addInput(tag);
+    return () => PrimerRN.removeInput(tag);
+  }, []);
+
+  const rawComponent = (
+    <PrimerCardNumberEditTextRaw ref={ref.current} {...props} />
+  );
+
+  return rawComponent;
+};
+
+// PrimerCardholderNameEditText
+export const PrimerCardholderNameEditTextRaw = requireNativeComponent<{}>(
+  'PrimerCardholderNameEditText'
+);
+
+type PrimerCardholderNameEditTextProps = ViewProps;
+
+export const PrimerCardholderNameEditText: React.FC<PrimerCardholderNameEditTextProps> = (
+  props
+) => {
+  const ref = useRef(React.createRef<any>());
+
+  useEffect(() => {
+    const tag = ref.current.current._nativeTag;
+    PrimerRN.addInput(tag);
+    return () => PrimerRN.removeInput(tag);
+  }, []);
+  return <PrimerCardholderNameEditTextRaw ref={ref.current} {...props} />;
+};
+
+// PrimerExpiryEditText
+export const PrimerExpiryEditTextRaw = requireNativeComponent<{}>(
+  'PrimerExpiryEditText'
+);
+
+type PrimerExpiryEditTextProps = ViewProps;
+
+export const PrimerExpiryEditText: React.FC<PrimerExpiryEditTextProps> = (
+  props
+) => {
+  return <PrimerExpiryEditTextRaw {...props} />;
+};
+
+// cvv
+export const PrimerCvvEditTextRaw = requireNativeComponent<{}>(
+  'PrimerCvvEditText'
+);
+
+type PrimerCvvEditTextProps = ViewProps;
+
+export const PrimerCvvEditText: React.FC<PrimerCvvEditTextProps> = (props) => {
+  return <PrimerCvvEditTextRaw {...props} />;
+};

package/src/RNTPrimerHeadlessUniversalCheckoutCardFormUIManager.tsx

@@ -0,0 +1,2 @@
+import { NativeModules } from 'react-native';
+export const { PrimerHeadlessUniversalCheckoutCardFormUIManager } = NativeModules;

package/src/headless_checkout/NativePrimerHeadlessUniversalCheckout.ts

@@ -0,0 +1,94 @@
+import { NativeEventEmitter, NativeModules } from 'react-native';
+
+const { PrimerHeadlessUniversalCheckout } = NativeModules;
+
+const eventEmitter = new NativeEventEmitter(PrimerHeadlessUniversalCheckout);
+
+type EventType =
+  | 'preparationStarted'
+  | 'paymentMethodPresented'
+  | 'tokenizationStarted'
+  | 'tokenizationSucceeded'
+  | 'resume'
+  | 'error';
+
+const NativePrimerHeadlessUniversalCheckout = {
+  ///////////////////////////////////////////
+  // Event Emitter
+  ///////////////////////////////////////////
+  addListener: (eventType: EventType, listener: (...args: any[]) => any) => {
+    eventEmitter.addListener(eventType, listener);
+  },
+
+  ///////////////////////////////////////////
+  // Native API
+  ///////////////////////////////////////////
+  getAssetForPaymentMethod: (
+    paymentMethodType: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      try {
+        PrimerHeadlessUniversalCheckout.getAssetForPaymentMethodType(
+          paymentMethodType,
+          assetType,
+          (err: Error) => {
+            reject(err);
+          },
+          (url: string) => {
+            resolve(url);
+          }
+        );
+      } catch (e) {
+        reject(e);
+      }
+    });
+  },
+
+  getAssetForCardNetwork: (
+    cardNetwork: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      try {
+        PrimerHeadlessUniversalCheckout.getAssetForPaymentMethodType(
+          cardNetwork,
+          assetType,
+          (err: Error) => {
+            reject(err);
+          },
+          (url: string) => {
+            resolve(url);
+          }
+        );
+      } catch (e) {
+        reject(e);
+      }
+    });
+  },
+
+  startWithClientToken(clientToken: string, settings: any): Promise<any> {
+    return new Promise((resolve, reject) => {
+      PrimerHeadlessUniversalCheckout.startWithClientToken(
+        clientToken,
+        JSON.stringify(settings),
+        (err: Error) => {
+          console.error(err);
+          reject(err);
+        },
+        (paymentMethodTypes: string[]) => {
+          resolve({ paymentMethodTypes });
+        }
+      );
+    });
+  },
+
+  showPaymentMethod: (paymentMethod: string) =>
+    PrimerHeadlessUniversalCheckout.showPaymentMethod(paymentMethod),
+
+  resumeWithClientToken(resumeToken: string) {
+    PrimerHeadlessUniversalCheckout.resumeWithClientToken(resumeToken);
+  },
+};
+
+export default NativePrimerHeadlessUniversalCheckout;

package/src/headless_checkout/PrimerHeadlessUniversalCheckout.ts

@@ -0,0 +1,136 @@
+import type { PaymentInstrumentToken } from 'src/models/payment-instrument-token';
+import type { PrimerError } from 'src/models/primer-error';
+import type { PrimerSettings } from 'src/models/primer-settings';
+import NativePrimerHeadlessUniversalCheckout from './NativePrimerHeadlessUniversalCheckout';
+import type {
+  PrimerHeadlessUniversalCheckoutStartResponse,
+  PrimerHeadlessUniversalCheckoutCallbacks,
+} from './types';
+
+class PrimerHeadlessUniversalCheckoutClass {
+  private callbacks: PrimerHeadlessUniversalCheckoutCallbacks | undefined;
+
+  ///////////////////////////////////////////
+  // Init
+  ///////////////////////////////////////////
+  constructor() {
+    this.callbacks = undefined;
+    this.configureListeners();
+  }
+
+  private configureListeners() {
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'preparationStarted',
+      () => {
+        console.log('preparationStarted');
+        this.callbacks?.onPreparationStarted?.();
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'paymentMethodPresented',
+      () => {
+        console.log('paymentMethodPresented');
+        this.callbacks?.onPaymentMethodPresented?.();
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'tokenizationStarted',
+      () => {
+        console.log('tokenizationStarted');
+        this.callbacks?.onTokenizeStart?.();
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener(
+      'tokenizationSucceeded',
+      (data) => {
+        console.log('tokenizationSucceeded', data);
+
+        if (data.paymentMethodToken) {
+          const paymentMethodTokenObj: PaymentInstrumentToken = JSON.parse(
+            data.paymentMethodToken
+          );
+          this.callbacks?.onTokenizeSuccess?.(paymentMethodTokenObj);
+        } else {
+          const err: PrimerError = {
+            name: 'ParseJsonFailed',
+            description: 'Failed to parse payment method token',
+          };
+          //@ts-ignore
+          this.callbacks?.onFailure?.(err);
+        }
+      }
+    );
+
+    NativePrimerHeadlessUniversalCheckout.addListener('resume', (data) => {
+      console.log('resume', data);
+      this.callbacks?.onResumeSuccess?.(data.resumeToken);
+    });
+
+    NativePrimerHeadlessUniversalCheckout.addListener('error', (data) => {
+      console.log('error', data);
+      this.callbacks?.onFailure?.(data.error);
+    });
+  }
+
+  ///////////////////////////////////////////
+  // API
+  ///////////////////////////////////////////
+  startWithClientToken(
+    clientToken: string,
+    settings: PrimerSettings & PrimerHeadlessUniversalCheckoutCallbacks
+  ): Promise<PrimerHeadlessUniversalCheckoutStartResponse> {
+    // Copy callback
+    this.callbacks = {
+      onPreparationStarted: settings.onPreparationStarted,
+      onPaymentMethodPresented: settings.onPaymentMethodPresented,
+      onTokenizeStart: settings.onTokenizeStart,
+      onTokenizeSuccess: settings.onTokenizeSuccess,
+      onResumeSuccess: settings.onResumeSuccess,
+      onFailure: settings.onFailure,
+    };
+
+    return NativePrimerHeadlessUniversalCheckout.startWithClientToken(
+      clientToken,
+      settings
+    );
+  }
+
+  showPaymentMethod(paymentMethod: string) {
+    return NativePrimerHeadlessUniversalCheckout.showPaymentMethod(
+      paymentMethod
+    );
+  }
+
+  resumeWithClientToken(resumeToken: string) {
+    return NativePrimerHeadlessUniversalCheckout.resumeWithClientToken(
+      resumeToken
+    );
+  }
+
+  getAssetForPaymentMethod(
+    paymentMethodType: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> {
+    return NativePrimerHeadlessUniversalCheckout.getAssetForPaymentMethod(
+      paymentMethodType,
+      assetType
+    );
+  }
+
+  getAssetForCardNetwork(
+    cardNetwork: string,
+    assetType: 'logo' | 'icon'
+  ): Promise<string> {
+    return NativePrimerHeadlessUniversalCheckout.getAssetForCardNetwork(
+      cardNetwork,
+      assetType
+    );
+  }
+}
+
+const PrimerHeadlessUniversalCheckout = new PrimerHeadlessUniversalCheckoutClass();
+
+export default PrimerHeadlessUniversalCheckout;

package/src/headless_checkout/types.ts

@@ -0,0 +1,18 @@
+export interface PrimerHeadlessUniversalCheckoutStartResponse {
+  paymentMethodTypes: string[];
+}
+
+export interface PrimerError {
+  errorId: string;
+  description: string;
+  recoverySuggestion?: string;
+}
+
+export interface PrimerHeadlessUniversalCheckoutCallbacks {
+  onPreparationStarted?: () => void;
+  onPaymentMethodPresented?: () => void;
+  onTokenizeStart?: () => void;
+  onTokenizeSuccess?: (paymentMethod: any) => void;
+  onResumeSuccess?: (resumeToken: string) => void;
+  onFailure?: (error: PrimerError) => void;
+}

package/src/index.tsx

@@ -1,6 +1,8 @@
+import PrimerHeadlessUniversalCheckout from './headless_checkout/PrimerHeadlessUniversalCheckout';
 import type { IPrimer } from './models/primer';
 import { PrimerNativeMapping } from './Primer';
+export * from './PrimerInput';
 
 const Primer: IPrimer = PrimerNativeMapping;
 
-export { Primer };
+export { Primer, PrimerHeadlessUniversalCheckout as HeadlessUniversalCheckout };