wip

package.json

@@ -102,15 +102,16 @@
  "vitest": "^0.25.3"
  },
  "dependencies": {
+ "@fingerprintjs/fingerprintjs-pro": "^3.8.6",
  "@krakenjs/belter": "^2.0.0",
  "@krakenjs/cross-domain-utils": "^3.0.0",
  "@krakenjs/jsx-pragmatic": "^3",
  "@krakenjs/post-robot": "^11.0.0",
  "@krakenjs/zalgo-promise": "^2.0.0",
  "@krakenjs/zoid": "^10.3.1",
  "@paypal/common-components": "^1.0.35",
- "@paypal/funding-components": "^1.0.31",
  "@paypal/connect-loader-component": "1.1.1",
+ "@paypal/funding-components": "^1.0.31",
  "@paypal/sdk-client": "^4.0.179",
  "@paypal/sdk-constants": "^1.0.133",
  "@paypal/sdk-logos": "^2.2.6"

src/api/shopper-insights/component.js

@@ -1,4 +1,6 @@
 /* @flow */
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals, promise/no-native */
 
 import {
  getUserIDToken,
@@ -31,6 +33,8 @@ import {
  hasEmail,
  hasPhoneNumber,
 } from "./validation";
+import { fingerprint } from "./fingerprint";
+import { ShopperSession } from "./shopperSession";
 
 type RecommendedPaymentMethods = {|
  isPayPalRecommended: boolean,
@@ -58,6 +62,7 @@ type getRecommendedPaymentMethodsRequestPayload = {|
 
 export type ShopperInsightsComponent = {|
  getRecommendedPaymentMethods: (MerchantPayloadData) => ZalgoPromise<RecommendedPaymentMethods>,
+ identify: () => Promise<void>,
 |};
 
 function createRecommendedPaymentMethodsRequestPayload(
@@ -125,7 +130,9 @@ export function getShopperInsightsComponent(): ShopperInsightsComponent {
  [FPTI_KEY.EVENT_NAME]: FPTI_TRANSITION.SHOPPER_INSIGHTS_API_INIT,
  });
 
- const shopperInsights = {
+ const shopperSession = new ShopperSession({ fingerprint });
+
+ return {
  getRecommendedPaymentMethods: (merchantPayload) => {
  validateMerchantConfig({ sdkToken, pageType, userIDToken, clientToken });
  validateMerchantPayload(merchantPayload);
@@ -190,7 +197,6 @@ export function getShopperInsightsComponent(): ShopperInsightsComponent {
  throw err;
  });
  },
+ identify: () => shopperSession.identify(),
  };
-
- return shopperInsights;
 }

src/api/shopper-insights/fingerprint.js

@@ -0,0 +1,52 @@
+/* @flow */
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals, promise/no-native */
+import { load as loadFingerprintJS } from "@fingerprintjs/fingerprintjs-pro";
+
+const __FINGERPRINT_JS_API_KEY__ = "Eh4QKkI51U0rVUUPeQT8";
+
+type FingerprintResults = {|
+ requestId: string,
+|};
+
+type Fingerprinter = {|
+ get: () => Promise<FingerprintResults>,
+|};
+
+export class Fingerprint {
+ fingerprinter: ?Fingerprinter;
+ results: ?FingerprintResults;
+
+ async load(): Promise<void> {
+ if (!this.fingerprinter) {
+ this.fingerprinter = await loadFingerprintJS({
+ apiKey: __FINGERPRINT_JS_API_KEY__,
+ });
+ }
+ }
+
+ async collect(): Promise<FingerprintResults> {
+ if (this.results && this.results.requestId) {
+ return this.results;
+ }
+
+ if (!this.fingerprinter) {
+ await this.load();
+ }
+
+ if (!this.fingerprinter) {
+ throw new Error("fingerprint library failed to load");
+ }
+
+ this.results = await this.fingerprinter.get();
+
+ return this.results;
+ }
+
+ get(): Promise<FingerprintResults> {
+ return this.collect();
+ }
+}
+
+// $FlowIssue flow is bad with classes
+export const fingerprint = new Fingerprint();

src/api/shopper-insights/shopperSession.js

@@ -0,0 +1,20 @@
+/* @flow */
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable no-restricted-globals, promise/no-native */
+
+import { Fingerprint } from "./fingerprint";
+
+export class ShopperSession {
+ requestId: string = "";
+ fingerprint: Fingerprint;
+
+ constructor({ fingerprint }: {| fingerprint: Fingerprint |}) {
+ this.fingerprint = fingerprint;
+ }
+
+ async identify(): Promise<void> {
+ const { requestId } = await this.fingerprint.get();
+
+ this.requestId = requestId;
+ }
+}