@fat-zebra/sdk 1.4.15 → 1.5.0

package/.idea/fatzebra-js.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/fatzebra-js.iml" filepath="$PROJECT_DIR$/.idea/fatzebra-js.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# CHANGELOG
+
+v1.2.1
+* PAY-1731: Provide merchant username in API request headers.
+
+v1.2.0
+* FEAT-43: Emit HPP form validation error messages via events
+
+v1.1.5
+* PAY-1710: Update README and include jwt generation script
+
+v1.1.4 (Rolled back. Scheduled for later release.)
+* PAY-1568: Conditionally require customer object depending on enableSca

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

@@ -14,7 +14,6 @@ declare class ClickToPay {
     private iframe;
     private paymentIntent;
     private username;
-    private cardToken;
     private postMessageClient;
     private test;
     private options;
@@ -23,6 +22,7 @@ declare class ClickToPay {
     getPayNowUrl(options?: {
         [key: string]: boolean | string;
     }): 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';
+import { emit } from "../shared/event-manager";
 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;
@@ -38,6 +48,40 @@ class ClickToPay {
         let searchParams = new URLSearchParams(queryString);
         return queryString ? `${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.',
+                    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 = {
             channel: 'click_to_pay',

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