@fat-zebra/sdk 1.5.5 → 1.5.6

package/dist/main.d.ts

@@ -1,6 +1,7 @@
 import { Customer, PaymentIntent, PaymentMethod, PublicEvent } from './shared/types';
 import { HppLoadParams } from './hpp';
 import { ChallengeWindowSize } from './sca/types';
+import { ApplePayParams } from './applepay/types';
 import { HppClickToPayParams } from './click_to_pay/types';
 export interface FZConfig {
     username: string;
@@ -31,6 +32,7 @@ export default class FatZebra {
     cardDidTokenize(headless: HTMLIFrameElement, callback: (data: any) => void): void;
     verifyCard(params: VerifyCardParams): Promise<void>;
     renderPaymentsPage(params: HppLoadParams): void;
+    renderApplePayButton(params: ApplePayParams): void;
     renderClickToPay(params: HppClickToPayParams): void;
     checkout(): void;
     on(event: PublicEvent, callback: (e: any) => void): void;

package/dist/main.js

@@ -11,12 +11,14 @@ import Sca from './sca';
 import { PostMessageClient, } from './shared/post-message-client';
 import { BridgeEvent, PaymentMethodType, PublicEvent, } from './shared/types';
 import { LocalStorageAccessTokenKey } from './shared/constants';
-import { emit, on, off, onOnce } from './shared/event-manager';
+import { emit, off, on, onOnce } from './shared/event-manager';
 import * as bridge from './shared/bridge-client';
-import { validateHppLoadParams, validateVerifyCardParams, toHumanizedErrors, validateClickToPayLoadParams, } from './validation';
+import { toHumanizedErrors, validateClickToPayLoadParams, validateHppLoadParams, validateVerifyCardParams, } from './validation';
 import GatewayClient from './shared/api-gateway-client';
 import { Hpp } from './hpp';
 import ClickToPay from './click_to_pay';
+import { validateApplePayLoadParams } from "./validation/validators/apple-pay-load-params-button-validator";
+import { ApplePay } from "./applepay";
 export default class FatZebra {
     constructor(config) {
         this.fzConfig = config;
@@ -60,8 +62,8 @@ export default class FatZebra {
         postMessageClient.setEventListeners(handlers);
     }
     verifyCard(params) {
-        var _a;
         return __awaiter(this, void 0, void 0, function* () {
+            var _a;
             const valid = validateVerifyCardParams(params);
             if (!valid) {
                 emit(PublicEvent.VALIDATION_ERROR, {
@@ -75,14 +77,14 @@ export default class FatZebra {
                     const headless = bridge.load(process.env.PAYNOW_BRIDGE_URL);
                     const card = params.paymentMethod.data;
                     this.cardDidTokenize(headless, (data) => __awaiter(this, void 0, void 0, function* () {
-                        var _b;
+                        var _a;
                         const bin = card.number.substr(0, 6);
                         this.sca.run({
                             cardToken: data.token,
                             customer: params.customer,
                             paymentIntent: params.paymentIntent,
                             bin,
-                            challengeWindowSize: (_b = params.options) === null || _b === void 0 ? void 0 : _b.challengeWindowSize,
+                            challengeWindowSize: (_a = params.options) === null || _a === void 0 ? void 0 : _a.challengeWindowSize,
                         });
                     }));
                     this.tokenizeCard(card, headless);
@@ -120,6 +122,26 @@ export default class FatZebra {
         });
         window.HPP.load(params);
     }
+    renderApplePayButton(params) {
+        const valid = validateApplePayLoadParams(params);
+        if (!valid) {
+            emit(PublicEvent.VALIDATION_ERROR, {
+                errors: toHumanizedErrors(validateApplePayLoadParams.errors),
+                data: null
+            });
+            return;
+        }
+        window.ApplePayButton = new ApplePay({
+            environment: params.environment,
+            paymentIntent: params.paymentIntent,
+            username: this.fzConfig.username
+        });
+        window.ApplePayButton.load({
+            containerId: params.containerId,
+            paymentIntent: params.paymentIntent,
+            options: params.options
+        });
+    }
     renderClickToPay(params) {
         const valid = validateClickToPayLoadParams(params);
         if (!valid) {

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