@fat-zebra/sdk 1.5.0 → 1.5.2

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

@@ -130,6 +130,39 @@ The deployed SDKs are available from the following URLs.
 * Sandbox: https://cdn.pmnts-sandbox.io/sdk/v1/fatzebra.js
 * Production: https://cdn.pmnts.io/sdk/v1/fatzebra.js
 
+## Release react npm package
+
+Prerequisite: it is essential that you have been added to the https://www.npmjs.com/ group account.
+
+To release the react npm package
+
+``` 
+    git checkout master 
+    git pull 
+```
+
+then run 
+
+```
+    npm run npm:publish
+```
+
+You will be prompted with: 
+
+```
+enter (y) for minor release or (n) for patch release
+```
+
+if it is a major release i.e. a breaking change please update the script/consult with management as major release would indicate a breaking change.
+
+You will then see the project build and finally be prompted to:
+```
+Press ENTER to open in the browser...
+```
+
+from here enter your 2FA code and voila! You have published a new version of the SDK. Go tell some merchants.
+
+
 ## Release Management
 
 The release of the sdk follows a weekly schedule. In the beginning of a new release cycle, do the following

package/README.md

@@ -1 +1,4 @@
-# Fat Zebra SDK
+# Fat Zebra SDK
+
+## Change log
+Monday 8th - updated the package to consume version from a version.ts file, rather than from package.json.

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;
@@ -20,7 +23,7 @@ declare class ClickToPay {
     constructor(config: ClickToPayModuleConfig);
     load(config: ClickToPayLoadParams): void;
     getPayNowUrl(options?: {
-        [key: string]: boolean | string;
+        [key: string]: any;
     }): string;
     setCrossFramesEventListeners(): void;
     purchase(): void;

package/dist/click_to_pay/index.js

@@ -2,7 +2,7 @@ import { PostMessageClient } from "../shared/post-message-client";
 import { BridgeEvent, PublicEvent } from "../shared/types";
 import * as util from '../shared/util';
 import { emit } from "../shared/event-manager";
-const CLICK_TO_PAY_DEFAULT_OPTIONS = {
+export const CLICK_TO_PAY_DEFAULT_OPTIONS = {
     iframe: true,
     postmessage: true,
 };
@@ -35,23 +35,24 @@ 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) => {
-            console.log(data);
             if (data.errors) {
                 emit(PublicEvent.TOKENIZATION_ERROR, {
                     message: 'Card tokenization failed.',

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);
+    }
+}