@justifi/webcomponents 6.5.0-rc.1 → 6.5.0

package/dist/collection/ui-components/google-pay-button.js

@@ -1,255 +0,0 @@
-import { h } from "@stencil/core";
-import { GooglePayButtonType, GooglePayButtonStyle, GooglePayButtonSizeMode } from "../api/GooglePay";
-const ProcessingSpinner = () => (h("div", { class: 'processing-overlay' }, h("div", { class: 'spinner' }), h("span", null, "Processing...")));
-export const GooglePayButton = (props) => {
-    const getGooglePayButtonClass = () => {
-        let classes = "google-pay-button";
-        // Button style
-        switch (props.buttonStyle) {
-            case GooglePayButtonStyle.WHITE:
-                classes += " google-pay-button-white";
-                break;
-            case GooglePayButtonStyle.BLACK:
-            default:
-                classes += " google-pay-button-black";
-                break;
-        }
-        // Button type
-        switch (props.buttonType) {
-            case GooglePayButtonType.BUY:
-                classes += " google-pay-button-type-buy";
-                break;
-            case GooglePayButtonType.BOOK:
-                classes += " google-pay-button-type-book";
-                break;
-            case GooglePayButtonType.CHECKOUT:
-                classes += " google-pay-button-type-checkout";
-                break;
-            case GooglePayButtonType.DONATE:
-                classes += " google-pay-button-type-donate";
-                break;
-            case GooglePayButtonType.ORDER:
-                classes += " google-pay-button-type-order";
-                break;
-            case GooglePayButtonType.PAY:
-                classes += " google-pay-button-type-pay";
-                break;
-            case GooglePayButtonType.SUBSCRIBE:
-                classes += " google-pay-button-type-subscribe";
-                break;
-            case GooglePayButtonType.PLAIN:
-            default:
-                classes += " google-pay-button-type-plain";
-                break;
-        }
-        // Size mode
-        switch (props.buttonSizeMode) {
-            case GooglePayButtonSizeMode.FILL:
-                classes += " google-pay-button-fill";
-                break;
-            case GooglePayButtonSizeMode.STATIC:
-            default:
-                classes += " google-pay-button-static";
-                break;
-        }
-        if (props.disabled || props.isProcessing || !props.isAvailable) {
-            classes += " disabled";
-        }
-        return classes;
-    };
-    const getButtonStyles = () => {
-        const styles = {};
-        if (props.buttonSizeMode === GooglePayButtonSizeMode.FILL) {
-            styles.width = '100%';
-            styles.minWidth = '200px';
-        }
-        else {
-            styles.width = props.width || '200px';
-        }
-        styles.height = props.height || '48px';
-        return styles;
-    };
-    const handleClick = () => {
-        if (!props.disabled &&
-            !props.isProcessing &&
-            props.isAvailable &&
-            props.clickHandler) {
-            props.clickHandler();
-        }
-    };
-    return (h("div", { class: 'google-pay-button-container' }, h("button", Object.assign({ class: getGooglePayButtonClass(), style: getButtonStyles(), onClick: handleClick, disabled: props.disabled || props.isProcessing || !props.isAvailable, "aria-label": 'Pay with Google Pay', type: 'button' }, props), props.isProcessing && ProcessingSpinner(), h("div", { class: 'google-pay-button-content' }, h("svg", { class: 'google-g-logo', viewBox: '0 0 24 24', xmlns: 'http://www.w3.org/2000/svg' }, h("path", { d: 'M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z', fill: '#4285F4' }), h("path", { d: 'M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z', fill: '#34A853' }), h("path", { d: 'M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z', fill: '#FBBC05' }), h("path", { d: 'M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z', fill: '#EA4335' })), h("span", { class: 'pay-text' }, "Pay"))), h("style", null, `
-          .google-pay-button-container {
-            display: block;
-            position: relative;
-          }
-
-          .google-pay-button {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            font-family: 'Google Sans', arial, sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            letter-spacing: 0.25px;
-            line-height: 16px;
-            outline: none;
-            padding: 0 20px;
-            position: relative;
-            transition: box-shadow 0.2s ease;
-            min-width: 140px;
-            min-height: 48px;
-          }
-
-          /* Button styles */
-          .google-pay-button.google-pay-button-black {
-            background-color: #000;
-            color: #fff;
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
-          }
-
-          .google-pay-button.google-pay-button-white {
-            background-color: #fff;
-            color: #3c4043;
-            box-shadow: 0 1px 1px 0 rgba(60, 64, 67, 0.30), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
-          }
-
-          /* Button content */
-          .google-pay-button-content {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            white-space: nowrap;
-          }
-
-          .google-g-logo {
-            width: 20px;
-            height: 20px;
-            flex-shrink: 0;
-          }
-
-          .pay-text {
-            font-family: 'Google Sans', arial, sans-serif;
-            font-size: 14px;
-            font-weight: 500;
-            margin-left: 8px;
-          }
-
-          /* Button types - text content handled by ::before pseudo-element */
-          .google-pay-button-type-buy .google-pay-button-content::before {
-            content: 'Buy with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-book .google-pay-button-content::before {
-            content: 'Book with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-checkout .google-pay-button-content::before {
-            content: 'Checkout with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-donate .google-pay-button-content::before {
-            content: 'Donate with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-order .google-pay-button-content::before {
-            content: 'Order with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-pay .google-pay-button-content::before {
-            content: 'Pay with';
-            margin-right: 8px;
-          }
-
-          .google-pay-button-type-subscribe .google-pay-button-content::before {
-            content: 'Subscribe with';
-            margin-right: 8px;
-          }
-
-          /* Size modes */
-          .google-pay-button.google-pay-button-fill {
-            width: 100%;
-            min-width: 200px;
-          }
-
-          .google-pay-button.google-pay-button-static {
-            width: auto;
-          }
-
-          /* Hover and focus states */
-          .google-pay-button:hover:not(.disabled) {
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
-          }
-
-          .google-pay-button:focus:not(.disabled) {
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
-          }
-
-          .google-pay-button:active:not(.disabled) {
-            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15), 0 1px 3px 1px rgba(0, 0, 0, 0.30);
-            transform: translateY(1px);
-          }
-
-          /* Disabled state */
-          .google-pay-button.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            box-shadow: none;
-          }
-
-          .google-pay-button.disabled:hover,
-          .google-pay-button.disabled:focus,
-          .google-pay-button.disabled:active {
-            box-shadow: none;
-            transform: none;
-          }
-
-          /* Processing overlay */
-          .processing-overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            border-radius: 4px;
-            font-size: 14px;
-            font-weight: 500;
-          }
-
-          .spinner {
-            width: 16px;
-            height: 16px;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            border-top: 2px solid #fff;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-          }
-
-          @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-          }
-
-          /* Responsive design */
-          @media (max-width: 480px) {
-            .google-pay-button {
-              width: 100% !important;
-              min-width: 200px;
-            }
-          }
-        `)));
-};

package/dist/module/ApplePay.js

@@ -1,121 +0,0 @@
-var ApplePaySessionStatus;
-(function (ApplePaySessionStatus) {
-    ApplePaySessionStatus["STATUS_SUCCESS"] = "STATUS_SUCCESS";
-    ApplePaySessionStatus["STATUS_FAILURE"] = "STATUS_FAILURE";
-})(ApplePaySessionStatus || (ApplePaySessionStatus = {}));
-var ApplePayButtonType;
-(function (ApplePayButtonType) {
-    ApplePayButtonType["PLAIN"] = "plain";
-    ApplePayButtonType["BUY"] = "buy";
-    ApplePayButtonType["SET_UP"] = "set-up";
-    ApplePayButtonType["DONATE"] = "donate";
-    ApplePayButtonType["CHECK_OUT"] = "check-out";
-    ApplePayButtonType["BOOK"] = "book";
-    ApplePayButtonType["SUBSCRIBE"] = "subscribe";
-})(ApplePayButtonType || (ApplePayButtonType = {}));
-var ApplePayButtonStyle;
-(function (ApplePayButtonStyle) {
-    ApplePayButtonStyle["BLACK"] = "black";
-    ApplePayButtonStyle["WHITE"] = "white";
-    ApplePayButtonStyle["WHITE_OUTLINE"] = "white-outline";
-})(ApplePayButtonStyle || (ApplePayButtonStyle = {}));
-var ApplePayMerchantCapability;
-(function (ApplePayMerchantCapability) {
-    ApplePayMerchantCapability["SUPPORTS_3DS"] = "supports3DS";
-    ApplePayMerchantCapability["SUPPORTS_EMV"] = "supportsEMV";
-    ApplePayMerchantCapability["SUPPORTS_CREDIT"] = "supportsCredit";
-    ApplePayMerchantCapability["SUPPORTS_DEBIT"] = "supportsDebit";
-})(ApplePayMerchantCapability || (ApplePayMerchantCapability = {}));
-class ApplePayConfig {
-    constructor(data) {
-        this.merchantIdentifier = data.merchantIdentifier;
-        this.displayName = data.displayName;
-        this.initiative = data.initiative;
-        this.initiativeContext = data.initiativeContext;
-        this.buttonType = data.buttonType || ApplePayButtonType.PLAIN;
-        this.buttonStyle = data.buttonStyle || ApplePayButtonStyle.BLACK;
-        this.buttonLocale = data.buttonLocale || 'en-US';
-    }
-    get isValid() {
-        return !!(this.merchantIdentifier &&
-            this.displayName &&
-            this.initiative &&
-            this.initiativeContext);
-    }
-}
-class ApplePayPaymentRequest {
-    constructor(data) {
-        this.countryCode = data.countryCode;
-        this.currencyCode = data.currencyCode;
-        this.merchantCapabilities = data.merchantCapabilities;
-        this.supportedNetworks = data.supportedNetworks;
-        this.total = data.total;
-        this.lineItems = data.lineItems;
-        this.shippingMethods = data.shippingMethods;
-        this.applicationData = data.applicationData;
-        this.supportedCountries = data.supportedCountries;
-    }
-    get isValid() {
-        var _a, _b, _c, _d;
-        return !!(this.countryCode &&
-            this.currencyCode &&
-            ((_a = this.merchantCapabilities) === null || _a === void 0 ? void 0 : _a.length) &&
-            ((_b = this.supportedNetworks) === null || _b === void 0 ? void 0 : _b.length) &&
-            ((_c = this.total) === null || _c === void 0 ? void 0 : _c.label) &&
-            ((_d = this.total) === null || _d === void 0 ? void 0 : _d.amount));
-    }
-}
-class ApplePayHelpers {
-    static isApplePaySupported() {
-        var _a;
-        return (typeof window !== 'undefined' &&
-            'ApplePaySession' in window &&
-            ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.supportsVersion(3)));
-    }
-    static canMakePayments() {
-        var _a;
-        if (!this.isApplePaySupported()) {
-            return false;
-        }
-        return ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePayments()) || false;
-    }
-    static async canMakePaymentsWithActiveCard(merchantIdentifier) {
-        var _a;
-        if (!this.isApplePaySupported()) {
-            return false;
-        }
-        try {
-            return ((await ((_a = window.ApplePaySession) === null || _a === void 0 ? void 0 : _a.canMakePaymentsWithActiveCard(merchantIdentifier))) || false);
-        }
-        catch (error) {
-            console.error('Error checking Apple Pay active card:', error);
-            return false;
-        }
-    }
-    static formatAmount(amount) {
-        return (amount / 100).toFixed(2);
-    }
-    static parseAmount(amount) {
-        return Math.round(parseFloat(amount) * 100);
-    }
-    static createLineItem(label, amount, type = 'final') {
-        return {
-            label,
-            amount: this.formatAmount(amount),
-            type,
-        };
-    }
-    static getDefaultSupportedNetworks() {
-        return ['amex', 'discover', 'masterCard', 'visa'];
-    }
-    static getDefaultMerchantCapabilities() {
-        return [
-            ApplePayMerchantCapability.SUPPORTS_3DS,
-            ApplePayMerchantCapability.SUPPORTS_EMV,
-            ApplePayMerchantCapability.SUPPORTS_CREDIT,
-            ApplePayMerchantCapability.SUPPORTS_DEBIT,
-        ];
-    }
-}
-
-export { ApplePayConfig as A, ApplePayHelpers as a, ApplePayPaymentRequest as b, ApplePaySessionStatus as c, ApplePayButtonStyle as d, ApplePayButtonType as e, ApplePayMerchantCapability as f };

package/dist/module/GooglePay.js

@@ -1,184 +0,0 @@
-import { c as checkoutStore } from './checkout.store.js';
-
-var GooglePayButtonType;
-(function (GooglePayButtonType) {
-    GooglePayButtonType["PLAIN"] = "plain";
-    GooglePayButtonType["BUY"] = "buy";
-    GooglePayButtonType["BOOK"] = "book";
-    GooglePayButtonType["CHECKOUT"] = "checkout";
-    GooglePayButtonType["DONATE"] = "donate";
-    GooglePayButtonType["ORDER"] = "order";
-    GooglePayButtonType["PAY"] = "pay";
-    GooglePayButtonType["SUBSCRIBE"] = "subscribe";
-})(GooglePayButtonType || (GooglePayButtonType = {}));
-var GooglePayButtonStyle;
-(function (GooglePayButtonStyle) {
-    GooglePayButtonStyle["BLACK"] = "black";
-    GooglePayButtonStyle["WHITE"] = "white";
-})(GooglePayButtonStyle || (GooglePayButtonStyle = {}));
-var GooglePayButtonSizeMode;
-(function (GooglePayButtonSizeMode) {
-    GooglePayButtonSizeMode["STATIC"] = "static";
-    GooglePayButtonSizeMode["FILL"] = "fill";
-})(GooglePayButtonSizeMode || (GooglePayButtonSizeMode = {}));
-var GooglePayEnvironment;
-(function (GooglePayEnvironment) {
-    GooglePayEnvironment["PRODUCTION"] = "PRODUCTION";
-    GooglePayEnvironment["TEST"] = "TEST";
-})(GooglePayEnvironment || (GooglePayEnvironment = {}));
-class GooglePayConfig {
-    constructor(data) {
-        this.environment = data.environment;
-        this.merchantId = data.merchantId;
-        this.merchantName = data.merchantName;
-        this.buttonType = data.buttonType || GooglePayButtonType.PLAIN;
-        this.buttonStyle = data.buttonStyle || GooglePayButtonStyle.BLACK;
-        this.buttonSizeMode = data.buttonSizeMode || GooglePayButtonSizeMode.STATIC;
-        this.buttonLocale = data.buttonLocale || 'en';
-    }
-    get isValid() {
-        return !!(this.environment && this.merchantName);
-    }
-}
-class GooglePayPaymentDataRequest {
-    constructor(data) {
-        this.apiVersion = data.apiVersion;
-        this.apiVersionMinor = data.apiVersionMinor;
-        this.allowedPaymentMethods = data.allowedPaymentMethods;
-        this.transactionInfo = data.transactionInfo;
-        this.merchantInfo = data.merchantInfo;
-        this.callbackIntents = data.callbackIntents;
-        this.shippingAddressRequired = data.shippingAddressRequired;
-        this.shippingAddressParameters = data.shippingAddressParameters;
-        this.emailRequired = data.emailRequired;
-    }
-    get isValid() {
-        var _a, _b, _c, _d;
-        const hasApiVersion = typeof this.apiVersion === 'number' && this.apiVersion > 0;
-        const hasApiVersionMinor = typeof this.apiVersionMinor === 'number' && this.apiVersionMinor >= 0;
-        const hasAllowedMethods = Array.isArray(this.allowedPaymentMethods) &&
-            this.allowedPaymentMethods.length > 0;
-        const hasTxnCountry = Boolean((_a = this.transactionInfo) === null || _a === void 0 ? void 0 : _a.countryCode);
-        const hasTxnCurrency = Boolean((_b = this.transactionInfo) === null || _b === void 0 ? void 0 : _b.currencyCode);
-        const hasTxnTotal = Boolean((_c = this.transactionInfo) === null || _c === void 0 ? void 0 : _c.totalPrice);
-        const hasMerchantName = Boolean((_d = this.merchantInfo) === null || _d === void 0 ? void 0 : _d.merchantName);
-        return (hasApiVersion &&
-            hasApiVersionMinor &&
-            hasAllowedMethods &&
-            hasTxnCountry &&
-            hasTxnCurrency &&
-            hasTxnTotal &&
-            hasMerchantName);
-    }
-}
-class GooglePayHelpers {
-    /**
-     * Check if Google Pay is supported in the current environment
-     */
-    static isGooglePaySupported() {
-        return (typeof window !== 'undefined' &&
-            'google' in window &&
-            'payments' in window.google &&
-            'api' in window.google.payments);
-    }
-    /**
-     * Create a Google Pay client instance
-     */
-    static createGooglePayClient(environment) {
-        if (!this.isGooglePaySupported()) {
-            return null;
-        }
-        try {
-            return new window.google.payments.api.PaymentsClient({
-                environment: environment === GooglePayEnvironment.PRODUCTION
-                    ? 'PRODUCTION'
-                    : 'TEST',
-            });
-        }
-        catch (_error) {
-            return null;
-        }
-    }
-    /**
-     * Format amount for Google Pay (expects string in full currency units)
-     */
-    static formatAmount(amount) {
-        return (amount / 100).toFixed(2);
-    }
-    /**
-     * Parse amount from Google Pay format to cents
-     */
-    static parseAmount(amount) {
-        return Math.round(parseFloat(amount) * 100);
-    }
-    /**
-     * Create a line item for Google Pay
-     */
-    static createLineItem(label, amount, type = 'LINE_ITEM') {
-        return {
-            label,
-            price: this.formatAmount(amount),
-            type,
-        };
-    }
-    /**
-     * Get default supported card networks
-     */
-    static getDefaultSupportedNetworks() {
-        return ['VISA', 'MASTERCARD', 'AMEX', 'DISCOVER'];
-    }
-    /**
-     * Get default allowed authentication methods
-     */
-    static getDefaultAuthMethods() {
-        return ['PAN_ONLY', 'CRYPTOGRAM_3DS'];
-    }
-    /**
-     * Create default card parameters
-     */
-    static createDefaultCardParameters() {
-        return {
-            allowedAuthMethods: this.getDefaultAuthMethods(),
-            allowedCardNetworks: this.getDefaultSupportedNetworks(),
-            billingAddressRequired: false,
-        };
-    }
-    /**
-     * Create default tokenization specification
-     */
-    static createTokenizationSpecification() {
-        return {
-            type: 'PAYMENT_GATEWAY',
-            parameters: {
-                gateway: 'justifi',
-                gatewayMerchantId: checkoutStore.accountId,
-            },
-        };
-    }
-    /**
-     * Create default payment method data
-     */
-    static createPaymentMethodData() {
-        return {
-            type: 'CARD',
-            parameters: this.createDefaultCardParameters(),
-            tokenizationSpecification: this.createTokenizationSpecification(),
-        };
-    }
-    /**
-     * Create base payment data request check
-     */
-    static createBasePaymentDataRequest() {
-        const base = {
-            apiVersion: 2,
-            apiVersionMinor: 0,
-            allowedPaymentMethods: [this.createPaymentMethodData()],
-        };
-        // For development and broader availability of the button, do not require an existing card
-        // This allows isReadyToPay to return true on supported browsers even without a saved payment method
-        base.existingPaymentMethodRequired = false;
-        return base;
-    }
-}
-
-export { GooglePayConfig as G, GooglePayHelpers as a, GooglePayPaymentDataRequest as b, GooglePayButtonSizeMode as c, GooglePayButtonStyle as d, GooglePayButtonType as e, GooglePayEnvironment as f };