@fat-zebra/sdk 1.5.5 → 1.5.7-beta.0

package/dist/react/ApplePay.d.ts

@@ -0,0 +1,9 @@
+import React, { HTMLProps } from "react";
+import * as FatZebra from "../shared/types";
+type FrameProps = {
+    handlers: FatZebra.Handlers;
+    config: FatZebra.PaymentConfig;
+    iframeProps?: HTMLProps<HTMLIFrameElement>;
+};
+declare const ApplePay: ({ handlers, config, iframeProps }: FrameProps) => React.JSX.Element;
+export default ApplePay;

package/dist/react/ApplePay.js

@@ -0,0 +1,11 @@
+import React from "react";
+import useFatZebra from "./useFatZebra";
+const ApplePay = ({ handlers, config, iframeProps }) => {
+    const { applePayUrl } = useFatZebra({
+        config: Object.assign(Object.assign({}, config), { options: Object.assign(Object.assign({}, config.options), { applepay: true }) }),
+        handlers: handlers,
+    });
+    return (React.createElement("div", null,
+        React.createElement("iframe", Object.assign({ src: applePayUrl, allow: "payment", "data-test-id": "apple-pay", title: "apple-pay-button" }, iframeProps))));
+};
+export default ApplePay;

package/dist/react/ApplePayButton.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import * as FatZebra from "../shared/types";
+type FrameProps = {
+    handlers: FatZebra.Handlers;
+    config: FatZebra.PaymentConfig;
+};
+declare const ApplePayButton: ({ handlers, config }: FrameProps) => React.JSX.Element;
+export default ApplePayButton;

package/dist/react/ApplePayButton.js

@@ -0,0 +1,18 @@
+import React, { useEffect } from "react";
+import { ApplePay } from "../applepay";
+import useMessage from "./useMessage";
+const ApplePayButton = ({ handlers, config }) => {
+    useMessage({
+        paymentIntent: config.paymentIntent,
+        handlers: handlers,
+    });
+    useEffect(() => {
+        new ApplePay(config).load({
+            containerId: 'applePayButton',
+            paymentIntent: config.paymentIntent,
+            options: config.options
+        });
+    }, []);
+    return React.createElement("div", { id: "applePayButton", style: { height: '100%', width: '100%' } });
+};
+export default ApplePayButton;

package/dist/react/{url.d.ts → applePayUrl.d.ts}

@@ -8,5 +8,5 @@ type RequiredURLValues = {
     currency: string;
 };
 type UrlValues = RequiredURLValues & OptionalUrlValues;
-declare const generatePaymentURL: (values: UrlValues, environment?: Environment) => string;
-export { generatePaymentURL };
+declare const generateApplePayUrl: (values: UrlValues, environment?: Environment) => string;
+export { generateApplePayUrl };

package/dist/react/applePayUrl.js

@@ -0,0 +1,19 @@
+import { parseTemplate } from 'url-template';
+import env, { Environment } from "../shared/env";
+const generateApplePayUrl = (values, environment) => {
+    const queryParts = [
+        "applepay"
+    ];
+    const environmentConfig = env[environment || Environment.sandbox];
+    const urlTemplate = parseTemplate(`${environmentConfig.payNowUrl}/sdk/{merchant}/{reference}/{currency}/{amount}/{verification}{?${queryParts.join(",")}}`);
+    const url = urlTemplate.expand({
+        merchant: values.merchant,
+        reference: values.reference,
+        currency: values.currency,
+        amount: values.amount,
+        verification: values.hash,
+        applepay: values.applepay
+    });
+    return url;
+};
+export { generateApplePayUrl };

package/dist/react/index.d.ts

@@ -1,4 +1,5 @@
 import VerifyCard from "./VerifyCard";
 import VerifyExistingCard from "./VerifyExistingCard";
 import submitForm from "./submitForm";
-export { VerifyCard, VerifyExistingCard, submitForm };
+import ApplePayButton from "./ApplePayButton";
+export { VerifyCard, VerifyExistingCard, submitForm, ApplePayButton };

package/dist/react/index.js

@@ -1,4 +1,5 @@
 import VerifyCard from "./VerifyCard";
 import VerifyExistingCard from "./VerifyExistingCard";
 import submitForm from "./submitForm";
-export { VerifyCard, VerifyExistingCard, submitForm };
+import ApplePayButton from "./ApplePayButton";
+export { VerifyCard, VerifyExistingCard, submitForm, ApplePayButton };

package/dist/react/useFatZebra.js

@@ -1,9 +1,10 @@
-import { useEffect, useMemo } from "react";
+import { useMemo } from "react";
 import * as FatZebra from "../shared/types";
 import { generatePaymentURL } from "./paymentUrl";
 import Sca from "../sca";
 import GatewayClient from "../shared/api-gateway-client";
 import { generateVerifyURL } from "./verifyUrl";
+import useMessage from "./useMessage";
 const useFatZebra = ({ config, handlers, cardToken }) => {
     const { options, accessToken, paymentIntent, username } = config;
     const sca = useMemo(() => {
@@ -14,62 +15,12 @@ const useFatZebra = ({ config, handlers, cardToken }) => {
         scaObj.loadScript();
         return scaObj;
     }, [config, username]);
-    const emit = (event, data) => {
-        const handler = handlers[event];
-        if (handler) {
-            handler(new CustomEvent(event, { detail: data }));
-        }
-    };
-    const handleTokenizeCardResponse = (data) => {
-        if (data.errors) {
-            emit(FatZebra.PublicEvent.TOKENIZATION_ERROR, {
-                message: "Card tokenization failed.",
-                errors: data.errors,
-                data: null,
-            });
-            return;
-        }
-        else {
-            emit(FatZebra.PublicEvent.TOKENIZATION_SUCCESS, {
-                message: "Card tokenization success.",
-                data
-            });
-        }
-        if (options.sca_enabled) {
-            sca.run({ paymentIntent, bin: data.bin, cardToken: data.token });
-        }
-    };
-    const messageHandler = (event) => {
-        if (event.data &&
-            event.data.source &&
-            event.data.source.includes("react-devtools"))
-            return;
-        if (event.data.subject === FatZebra.BridgeEvent.BIN_LOOKUP)
-            return;
-        if (event.data.subject === FatZebra.BridgeEvent.FORM_VALIDATION_ERROR) {
-            emit(FatZebra.PublicEvent.FORM_VALIDATION_ERROR, {
-                errors: event.data.data,
-                data: null,
-            });
-            return;
-        }
-        if (event.data.subject === FatZebra.BridgeEvent.FORM_VALIDATION_SUCCESS) {
-            emit(FatZebra.PublicEvent.FORM_VALIDATION_SUCCESS, {
-                errors: event.data.data,
-                data: null,
-            });
-            return;
-        }
-        if (event.data.subject === FatZebra.BridgeEvent.TOKENIZE_CARD_RESPONSE) {
-            handleTokenizeCardResponse(event.data.data);
-        }
-    };
-    useEffect(() => {
-        window.addEventListener("message", messageHandler);
-        return () => {
-            window.removeEventListener("message", messageHandler);
-        };
-    }, [paymentIntent]);
+    useMessage({
+        paymentIntent,
+        options,
+        handlers,
+        sca
+    });
     const payment = paymentIntent.payment;
     const verifyUrl = generateVerifyURL(Object.assign({ token: cardToken, verification: paymentIntent.verification, merchant: username }, options), config.environment);
     const paymentUrl = generatePaymentURL(Object.assign({ merchant: username, reference: payment.reference, amount: payment.amount, currency: payment.currency, hash: paymentIntent.verification }, options), config.environment);

package/dist/react/useMessage.d.ts

@@ -0,0 +1,10 @@
+import * as FatZebra from "../shared/types";
+import Sca from "../sca";
+type UseMessageProps = {
+    paymentIntent: FatZebra.PaymentIntent;
+    handlers: FatZebra.Handlers;
+    options?: FatZebra.OptionalUrlValues;
+    sca?: InstanceType<typeof Sca>;
+};
+declare const useMessage: ({ paymentIntent, options, handlers, sca }: UseMessageProps) => void;
+export default useMessage;

package/dist/react/useMessage.js

@@ -0,0 +1,70 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useEffect } from 'react';
+import * as FatZebra from "../shared/types";
+const useMessage = ({ paymentIntent, options, handlers, sca }) => {
+    const emit = (event, data) => {
+        const handler = handlers[event];
+        if (handler) {
+            handler(new CustomEvent(event, { detail: data }));
+        }
+    };
+    const handleTokenizeCardResponse = (data) => __awaiter(void 0, void 0, void 0, function* () {
+        if (data.errors) {
+            emit(FatZebra.PublicEvent.TOKENIZATION_ERROR, {
+                message: "Card tokenization failed.",
+                errors: data.errors,
+                data: null,
+            });
+            return;
+        }
+        else {
+            emit(FatZebra.PublicEvent.TOKENIZATION_SUCCESS, {
+                message: "Card tokenization success.",
+                data,
+            });
+        }
+        if (options && sca && options.sca_enabled) {
+            yield sca.run({ paymentIntent, bin: data.bin, cardToken: data.token });
+        }
+    });
+    const messageHandler = (event) => __awaiter(void 0, void 0, void 0, function* () {
+        if (event.data &&
+            event.data.source &&
+            event.data.source.includes("react-devtools"))
+            return;
+        if (event.data.subject === FatZebra.BridgeEvent.BIN_LOOKUP)
+            return;
+        if (event.data.subject === FatZebra.BridgeEvent.FORM_VALIDATION_ERROR) {
+            emit(FatZebra.PublicEvent.FORM_VALIDATION_ERROR, {
+                errors: event.data.data,
+                data: null,
+            });
+            return;
+        }
+        if (event.data.subject === FatZebra.BridgeEvent.FORM_VALIDATION_SUCCESS) {
+            emit(FatZebra.PublicEvent.FORM_VALIDATION_SUCCESS, {
+                errors: event.data.data,
+                data: null,
+            });
+            return;
+        }
+        if (event.data.subject === FatZebra.BridgeEvent.TOKENIZE_CARD_RESPONSE) {
+            yield handleTokenizeCardResponse(event.data.data);
+        }
+    });
+    useEffect(() => {
+        window.addEventListener("message", messageHandler);
+        return () => {
+            window.removeEventListener("message", messageHandler);
+        };
+    }, [paymentIntent]);
+};
+export default useMessage;

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