apple-pay-button/dist/index.js

Apple Pay Button built in React following Apple Pay Button JavaScript guidelines

"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.tsx
var src_exports = {};
__export(src_exports, {
  default: () => src_default
});
module.exports = __toCommonJS(src_exports);
var import_react = __toESM(require("react"));
var ApplePayButton = ({
  buttonStyle = "black",
  type = "buy",
  locale = "en-US",
  onClick,
  style,
  disabled
}) => {
  var _a;
  const buttonRef = (0, import_react.useRef)(null);
  const handleClick = () => {
    if (disabled !== true && onClick !== void 0) {
      onClick();
    }
  };
  (0, import_react.useEffect)(() => {
    const scriptId = "apple-pay-sdk-script";
    const applePayScriptSrc = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";
    if (document.getElementById(scriptId) !== null) {
      return;
    }
    const script = document.createElement("script");
    script.id = scriptId;
    script.src = applePayScriptSrc;
    script.async = true;
    document.body.appendChild(script);
  }, []);
  (0, import_react.useEffect)(() => {
    if (buttonRef.current !== null) {
      buttonRef.current.addEventListener("click", handleClick);
    }
    return () => {
      if (buttonRef.current !== null) {
        buttonRef.current.removeEventListener("click", handleClick);
      }
    };
  }, [onClick, disabled]);
  const updateButtonStyle = (button, disabled2) => {
    const cursor = disabled2 === true ? "not-allowed" : "pointer";
    const opacity = disabled2 === true ? "0.5" : "1";
    button == null ? void 0 : button.setAttribute("style", `cursor: ${cursor}; opacity: ${opacity};`);
  };
  (0, import_react.useEffect)(() => {
    var _a2, _b, _c, _d;
    if (((_a2 = buttonRef.current) == null ? void 0 : _a2.shadowRoot) !== null || ((_b = buttonRef.current) == null ? void 0 : _b.shadowRoot) !== void 0) {
      const button = (_d = (_c = buttonRef.current) == null ? void 0 : _c.shadowRoot) == null ? void 0 : _d.querySelector("div > button");
      updateButtonStyle(button, disabled);
    }
  }, [disabled, (_a = buttonRef.current) == null ? void 0 : _a.shadowRoot]);
  const createApplePayButtonStyle = (style2) => {
    var _a2, _b, _c, _d, _e, _f, _g;
    return `
    apple-pay-button {
        --apple-pay-button-width: ${(_a2 = style2 == null ? void 0 : style2.width) != null ? _a2 : "auto"};
        --apple-pay-button-height: ${(_b = style2 == null ? void 0 : style2.height) != null ? _b : "30px"};
        --apple-pay-button-border-radius: ${(_c = style2 == null ? void 0 : style2.borderRadius) != null ? _c : "5px"};
        --apple-pay-button-padding: ${(_d = style2 == null ? void 0 : style2.padding) != null ? _d : "5px 0px"};
        --apple-pay-button-box-sizing: ${(_e = style2 == null ? void 0 : style2.boxSizing) != null ? _e : "border-box"};
        /* hide the button until the shadow root is available */
        display: ${((_f = buttonRef.current) == null ? void 0 : _f.shadowRoot) !== null || ((_g = buttonRef.current) == null ? void 0 : _g.shadowRoot) !== void 0 ? "inline-block" : "none"};
    }
`;
  };
  const createApplePayButton = (buttonStyle2, type2, locale2, buttonRef2) => import_react.default.createElement("apple-pay-button", {
    buttonstyle: buttonStyle2,
    type: type2,
    locale: locale2,
    ref: buttonRef2
  });
  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("style", null, createApplePayButtonStyle(style)), createApplePayButton(buttonStyle, type, locale, buttonRef));
};
var src_default = ApplePayButton;
//# sourceMappingURL=index.js.map