@fat-zebra/sdk 1.4.15 → 1.5.1

package/.jest/setup-env-vars.js

@@ -1 +1,2 @@
 process.env.API_ENV = 'local'
+process.env.PAYNOW_BASE_URL = 'https://paynow.test'

package/README.dev.md

@@ -109,19 +109,6 @@ Visit https://fzapplepay.ngrok.io in Safari. That's all!
 
 Webpack-dev-server supports hot reloading, meaning that code changes are reflected on the web page without restarting the server.
 
-## PayPal
-
-You can build & run for PayPal integration using:
-```bash
-npm run start:dev:paypal
-```
-
-You can also change the order request in:
-```bash
-# Change the `data` argument in the `paymentMethod` field
-examples/paypal/merchant.ejs
-```
-
 ## Build Javascript
 
 There are two npm build scripts in `package.json` for building javascript files.
@@ -159,4 +146,4 @@ The release of the sdk follows a weekly schedule. In the beginning of a new rele
 10. Prepare a new git tag for the new release version `git tag -a vX.X.X`.
 11. Push git tag. `git push origin vX.X.X`.
 
-Upon successful CI , a new entry with title 'Merged in release/vX.X,X' will be visible in the master branch page. This provides us with a clear view of what gets released in the past. Moreoever, we can quickly find out the list of features/bug fixes in a release by referring to the PR of the release candidate.
+Upon successful CI , a new entry with title 'Merged in release/vX.X,X' will be visible in the master branch page. This provides us with a clear view of what gets released in the past. Moreoever, we can quickly find out the list of features/bug fixes in a release by referring to the PR of the release candidate.

package/build-styles.js

@@ -0,0 +1,12 @@
+const fs = require('fs');
+const path = require('path');
+
+// Define the source file and the destination folder
+const sourceFile = path.join(__dirname, './src/styles.css');
+const destinationFolder = path.join(__dirname, 'dist/' + process.env.ENVIRONMENT);
+const destinationFile = path.join(destinationFolder, 'fatzebra.css');
+
+// Copy the file
+fs.copyFileSync(sourceFile, destinationFile);
+
+console.log('File copied successfully!');

package/dist/click_to_pay/index.d.ts

@@ -1,5 +1,8 @@
 import { PaymentIntent } from "../shared/types";
 import { ClickToPayOptions } from "./types";
+export declare const CLICK_TO_PAY_DEFAULT_OPTIONS: {
+    [key: string]: boolean | string;
+};
 interface ClickToPayModuleConfig {
     paymentIntent: PaymentIntent;
     username: string;
@@ -14,15 +17,15 @@ declare class ClickToPay {
     private iframe;
     private paymentIntent;
     private username;
-    private cardToken;
     private postMessageClient;
     private test;
     private options;
     constructor(config: ClickToPayModuleConfig);
     load(config: ClickToPayLoadParams): void;
     getPayNowUrl(options?: {
-        [key: string]: boolean | string;
+        [key: string]: any;
     }): string;
+    setCrossFramesEventListeners(): void;
     purchase(): void;
 }
 export default ClickToPay;

package/dist/click_to_pay/index.js

@@ -1,13 +1,20 @@
-import { BridgeEvent } from "../shared/types";
+import { PostMessageClient } from "../shared/post-message-client";
+import { BridgeEvent, PublicEvent } from "../shared/types";
 import * as util from '../shared/util';
-const CLICK_TO_PAY_DEFAULT_OPTIONS = {
+import { emit } from "../shared/event-manager";
+export const CLICK_TO_PAY_DEFAULT_OPTIONS = {
     iframe: true,
+    postmessage: true,
 };
 class ClickToPay {
     constructor(config) {
         this.paymentIntent = config.paymentIntent;
         this.username = config.username;
         this.test = config.test;
+        this.postMessageClient = new PostMessageClient({
+            channel: 'click_to_pay',
+            target: this.iframe
+        });
     }
     load(config) {
         this.options = config.options;
@@ -15,6 +22,9 @@ class ClickToPay {
         document.getElementById(config.containerId).appendChild(this.iframe);
         const payNowUrl = this.getPayNowUrl(config.options);
         this.iframe.setAttribute("src", payNowUrl);
+        this.iframe.onload = () => {
+            this.setCrossFramesEventListeners();
+        };
     }
     getPayNowUrl(options) {
         const { payment } = this.paymentIntent;
@@ -25,18 +35,53 @@ class ClickToPay {
             this.username,
             payment.reference,
             payment.currency,
-            payment.amount,
+            // If amount is left as 0 (type: Number), it will be filtered out later
+            // So we convert to string as "0" will be allowed through the filter
+            // Yes, we do want $0 purchases (especially for tokenizeOnly / auth flows)
+            payment.amount.toString(),
             this.paymentIntent.verification
         ].filter(part => part).join('/');
-        let queryString;
-        if (options) {
-            const _options = Object.assign(Object.assign({}, CLICK_TO_PAY_DEFAULT_OPTIONS), options);
-            queryString = Object.keys(_options).map(key => {
-                return util.toSnakeCase(key) + '=' + _options[key];
-            }).join('&');
-        }
-        let searchParams = new URLSearchParams(queryString);
-        return queryString ? `${base}?${searchParams.toString()}` : `${base}`;
+        let searchParams = new URLSearchParams();
+        const combinedOptions = Object.assign(Object.assign({}, CLICK_TO_PAY_DEFAULT_OPTIONS), options);
+        Object.keys(combinedOptions).map(key => {
+            if (combinedOptions[key] !== null && combinedOptions[key] !== undefined) {
+                searchParams.append(util.toSnakeCase(key), combinedOptions[key]);
+            }
+        });
+        return searchParams.toString().length > 0 ? `${base}?${searchParams.toString()}` : `${base}`;
+    }
+    setCrossFramesEventListeners() {
+        const handlers = {};
+        handlers[BridgeEvent.TOKENIZE_CARD_RESPONSE] = (data) => {
+            if (data.errors) {
+                emit(PublicEvent.TOKENIZATION_ERROR, {
+                    message: 'Card tokenization failed.',
+                    errors: data.errors,
+                    data: null,
+                });
+                return;
+            }
+            else {
+                emit(PublicEvent.TOKENIZATION_SUCCESS, {
+                    message: 'Card tokenization success.',
+                    data
+                });
+            }
+        };
+        handlers[PublicEvent.CLICK_TO_PAY_TOKENIZATION_ERROR] = (data) => {
+            emit(PublicEvent.CLICK_TO_PAY_TOKENIZATION_ERROR, {
+                message: 'Card tokenization failed.',
+                errors: data.errors,
+                data: null,
+            });
+        };
+        handlers[PublicEvent.CLICK_TO_PAY_TOKENIZATION_SUCCESS] = (data) => {
+            emit(PublicEvent.CLICK_TO_PAY_TOKENIZATION_SUCCESS, {
+                message: 'Card tokenization success.',
+                data
+            });
+        };
+        this.postMessageClient.setEventListeners(handlers);
     }
     purchase() {
         const message = {

package/dist/hpp/hpp.js

@@ -154,6 +154,8 @@ class Hpp {
     }
     setPublicEventListeners() {
         const handler = (event) => {
+            if (this.hppOptions.tokenizeOnly)
+                return;
             const threedsData = event.detail.data;
             const extra = util.toObjectWithSnakeCaseKeys(threedsData);
             this.createPurchase(extra);

package/dist/local/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);
+    }
+}