@fat-zebra/sdk 1.4.14 → 1.5.0

package/dist/shared/post-message-client.js

@@ -7,25 +7,20 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
         step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
 };
-import { NODE_ENV } from '../shared/types';
-import env from './env';
-const domain = process.env.PAYNOW_BASE_URL;
-// NODE_ENV is introduced to PostMessageClient purely for the purpose of bypassing security
-// check on the postMessage event between parent and child frames. Unforunately there is
-// no workaround to override event origin due to lack of support in existing test framework.
+import env, { Environment } from "./env";
 class PostMessageClient {
     constructor(config) {
         this.channel = config.channel;
-        this.fzEnv = process.env.NODE_ENV;
+        this.fzEnv = process.env.API_ENV;
+        this.domain = env[this.fzEnv].payNowUrl;
         this.target = config.target;
-        this.domain = env[this.fzEnv];
     }
     // Handle event messages that conform to PostMessage format.
     setEventListeners(handlers) {
         window.addEventListener("message", (event) => __awaiter(this, void 0, void 0, function* () {
-            const validationEnabled = ![NODE_ENV.TEST, NODE_ENV.LOCALDEV].includes(this.fzEnv);
+            const validationEnabled = ![Environment.test, Environment.local, Environment.development].includes(this.fzEnv);
             const isChannelValid = event.data.channel === this.channel;
-            const isOriginValid = event.origin === domain;
+            const isOriginValid = event.origin === this.domain;
             if (validationEnabled && (!isOriginValid || !isChannelValid)) {
                 console.log('[WARNING] unmatched event origin or incorrect message channel');
                 return;
@@ -46,8 +41,8 @@ class PostMessageClient {
     // Handle event messages that do not conform to PostMessage format.
     setEventListenersLegacy(handlers) {
         window.addEventListener("message", (event) => {
-            const validationEnabled = ![NODE_ENV.TEST, NODE_ENV.LOCALDEV].includes(this.fzEnv);
-            const isOriginValid = event.origin === domain;
+            const validationEnabled = ![Environment.test, Environment.local, Environment.development].includes(this.fzEnv);
+            const isOriginValid = event.origin === this.domain;
             if (validationEnabled && !isOriginValid) {
                 console.log('[WARNING] unmatched event origin or incorrect message channel');
                 return;
@@ -65,7 +60,7 @@ class PostMessageClient {
         });
     }
     send(message) {
-        this.target.contentWindow.postMessage(message, domain);
+        this.target.contentWindow.postMessage(message, this.domain);
     }
 }
 export { PostMessageClient, };

package/dist/shared/types.d.ts

@@ -1,12 +1,4 @@
-import { PayPalPaymentMethod } from '../paypal/types';
 import { Environment } from './env';
-declare enum NODE_ENV {
-    LOCALDEV = "localdev",
-    PRODUCTION = "production",
-    SANDBOX = "sandbox",
-    STAGING = "staging",
-    TEST = "test"
-}
 declare enum PublicEvent {
     FORM_VALIDATION_ERROR = "fz.form_validation.error",
     FORM_VALIDATION_SUCCESS = "fz.form_validation.success",
@@ -17,11 +9,9 @@ declare enum PublicEvent {
     TOKENIZATION_ERROR = "fz.tokenization.error",
     PAYMENT_SUCCESS = "fz.payment.success",
     PAYMENT_ERROR = "fz.payment.error",
-    PAYPAL_CANCEL = "fz.paypal.cancel",
-    PAYPAL_SUCCESS = "fz.paypal.success",
-    PAYPAL_ERROR = "fz.paypal.error",
-    PAYPAL_PROCESSESING = "fz.paypal.processing",
-    BIN_LOOKUP = "fz.bin.lookup"
+    BIN_LOOKUP = "fz.bin.lookup",
+    CLICK_TO_PAY_TOKENIZATION_SUCCESS = "fz.click_to_pay.tokenization.success",
+    CLICK_TO_PAY_TOKENIZATION_ERROR = "fz.click_to_pay.tokenization.error"
 }
 declare enum BridgeEvent {
     TOKENIZE_CARD_REQUEST = "fzi.tc_req",
@@ -31,13 +21,12 @@ declare enum BridgeEvent {
     TRIGGER_PAYNOW_BUTTON = "fzi.pn_btn",
     FORM_VALIDATION_ERROR = "fzi.form_validation_error",
     FORM_VALIDATION_SUCCESS = "fzi.form_validation_success",
-    BIN_LOOKUP = "fzi.bin_lookup"
+    BIN_LOOKUP = "fzi.bin_lookup",
+    CLICK_TO_PAY_TOKENIZATION = "fzi.c2p.tc_res"
 }
 declare enum PaymentMethodType {
     CARD = "card",
-    CARD_ON_FILE = "card_on_file",
-    PAYPAL_ORDER = "paypal_order",
-    PAYPAL_BILLING = "paypal_billing"
+    CARD_ON_FILE = "card_on_file"
 }
 interface Card {
     number: string;
@@ -81,7 +70,7 @@ interface PaymentIntent {
 }
 interface PaymentMethod {
     type?: PaymentMethodType;
-    data: Card | CardOnFile | PayPalPaymentMethod;
+    data: Card | CardOnFile;
 }
 interface ValidationResult {
     valid: boolean;
@@ -112,7 +101,6 @@ declare global {
         ApplePaySession: any;
         Cardinal: any;
         FatZebra: any;
-        paypal: any;
         HPP: any;
         MerchantUsername: string;
     }
@@ -149,5 +137,5 @@ type TokenizeCardResponse = {
     token: string;
     errors?: Array<string>;
 };
-export { BridgeEvent, PublicEvent, NODE_ENV, PaymentMethodType, };
+export { BridgeEvent, PublicEvent, PaymentMethodType, };
 export type { PaymentMethod, PaymentIntent, Payment, Card, CardOnFile, CustomerSnakeCase, Customer, Handlers, ValidationResult, TokenizeCardResponse, };

package/dist/shared/types.js

@@ -1,11 +1,3 @@
-var NODE_ENV;
-(function (NODE_ENV) {
-    NODE_ENV["LOCALDEV"] = "localdev";
-    NODE_ENV["PRODUCTION"] = "production";
-    NODE_ENV["SANDBOX"] = "sandbox";
-    NODE_ENV["STAGING"] = "staging";
-    NODE_ENV["TEST"] = "test";
-})(NODE_ENV || (NODE_ENV = {}));
 var PublicEvent;
 (function (PublicEvent) {
     PublicEvent["FORM_VALIDATION_ERROR"] = "fz.form_validation.error";
@@ -17,11 +9,9 @@ var PublicEvent;
     PublicEvent["TOKENIZATION_ERROR"] = "fz.tokenization.error";
     PublicEvent["PAYMENT_SUCCESS"] = "fz.payment.success";
     PublicEvent["PAYMENT_ERROR"] = "fz.payment.error";
-    PublicEvent["PAYPAL_CANCEL"] = "fz.paypal.cancel";
-    PublicEvent["PAYPAL_SUCCESS"] = "fz.paypal.success";
-    PublicEvent["PAYPAL_ERROR"] = "fz.paypal.error";
-    PublicEvent["PAYPAL_PROCESSESING"] = "fz.paypal.processing";
     PublicEvent["BIN_LOOKUP"] = "fz.bin.lookup";
+    PublicEvent["CLICK_TO_PAY_TOKENIZATION_SUCCESS"] = "fz.click_to_pay.tokenization.success";
+    PublicEvent["CLICK_TO_PAY_TOKENIZATION_ERROR"] = "fz.click_to_pay.tokenization.error";
 })(PublicEvent || (PublicEvent = {}));
 var BridgeEvent;
 (function (BridgeEvent) {
@@ -33,12 +23,11 @@ var BridgeEvent;
     BridgeEvent["FORM_VALIDATION_ERROR"] = "fzi.form_validation_error";
     BridgeEvent["FORM_VALIDATION_SUCCESS"] = "fzi.form_validation_success";
     BridgeEvent["BIN_LOOKUP"] = "fzi.bin_lookup";
+    BridgeEvent["CLICK_TO_PAY_TOKENIZATION"] = "fzi.c2p.tc_res";
 })(BridgeEvent || (BridgeEvent = {}));
 var PaymentMethodType;
 (function (PaymentMethodType) {
     PaymentMethodType["CARD"] = "card";
     PaymentMethodType["CARD_ON_FILE"] = "card_on_file";
-    PaymentMethodType["PAYPAL_ORDER"] = "paypal_order";
-    PaymentMethodType["PAYPAL_BILLING"] = "paypal_billing";
 })(PaymentMethodType || (PaymentMethodType = {}));
-export { BridgeEvent, PublicEvent, NODE_ENV, PaymentMethodType, };
+export { BridgeEvent, PublicEvent, PaymentMethodType, };

package/dist/staging/fatzebra.css

@@ -0,0 +1,91 @@
+.checkout-button-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+}
+
+.iframe-checkout {
+    flex: 1;
+    border: none;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.iframe-foreground,
+.iframe-background {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    flex-direction: column;
+}
+
+.iframe-foreground,
+.iframe-background {
+    position: fixed;
+}
+
+.iframe-foreground {
+    z-index: -1;
+}
+
+.iframe-background {
+    background: rgba(0, 0, 0, 0.5);
+}
+
+.iframe-foreground {
+    flex-grow: 1;
+    top: auto;
+    width: 100%;
+    max-width: 480px;
+    height: 80vh;
+    background-color: #ffffff;
+    border-radius: 25px 25px 0 0;
+}
+
+.slide-in .iframe-foreground {
+    transform: translateY(100vh);
+    transition: transform 0.4s ease, z-index 0.3s ease 0.4s;
+    z-index: -1;
+}
+
+.slide-in .iframe-background {
+    opacity: 0;
+    z-index: -1;
+    transition: opacity 0.3s ease, z-index 0.3s ease 0.3s;
+}
+
+.slide-in.show .iframe-foreground {
+    transform: none;
+    transition: transform 0.4s ease;
+    z-index: 100;
+}
+
+.slide-in.show .iframe-background {
+    opacity: 1;
+    z-index: 0;
+    transition: opacity 0.3s ease;
+}
+
+@media only screen and (min-width: 480px) {
+    .iframe-foreground {
+        margin: 0 auto;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .iframe-foreground {
+        margin: 0;
+        width: 400px;
+        height: 100vh;
+        left: 0;
+    }
+
+    .slide-in .iframe-foreground {
+        transform: translateX(-400px);
+    }
+}