apple-pay-button/dist/index.mjs

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

// src/index.tsx
import React, { useEffect, useRef } from "react";
var ApplePayButton = ({
  buttonStyle = "black",
  type = "buy",
  locale = "en-US",
  onClick,
  style,
  disabled
}) => {
  var _a;
  const buttonRef = useRef(null);
  const handleClick = () => {
    if (disabled !== true && onClick !== void 0) {
      onClick();
    }
  };
  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);
  }, []);
  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};`);
  };
  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) => React.createElement("apple-pay-button", {
    buttonstyle: buttonStyle2,
    type: type2,
    locale: locale2,
    ref: buttonRef2
  });
  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("style", null, createApplePayButtonStyle(style)), createApplePayButton(buttonStyle, type, locale, buttonRef));
};
var src_default = ApplePayButton;
export {
  src_default as default
};
//# sourceMappingURL=index.mjs.map