UNPKG

react-pass-checkout-button-v1

Version:

### NPM Installation

158 lines (139 loc) 6.08 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; require("core-js/modules/web.dom-collections.iterator.js"); require("core-js/modules/es.symbol.description.js"); var _react = _interopRequireWildcard(require("react")); function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; } function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } // import { // dbutton2, // dModalContent, // dIframe, // dModalClose, // dModal, // // mover, // // moout // } from "./style" var dbutton2 = { backgroundColor: "#1dbc86", border: "none", borderRadius: "3px", color: "white", textAlign: "center", textDecoration: "none", display: "inline-flex", fontSize: "14px", transitionDuration: "0.4s", cursor: "pointer", padding: "10px 32px", opacity: "1" }; const dModalContent = { backgroundColor: "#fefefe", margin: "auto", padding: "20px", width: "80%", height: "80%", display: "flex", justifyContent: "center", alignItems: "center" }; const dIframe = { display: "block", border: "none", height: "100%", width: "100%", zIndex: "99999" }; const dModalClose = { color: "#aaaaaa", position: "absolute", top: "5%", right: "8%", float: "right", fontSize: "28px", fontWeight: "bold", cursor: "pointer" }; const dModal = { display: "none", position: "fixed", zIndex: "1", paddingTop: "20px", left: "0", top: "0", width: "100%", height: "100%", overflow: "auto", backgroundColor: "rgba(0,0,0,0.4)" }; const Button = props => { const [dbutton2state, dbutton2setstate] = (0, _react.useState)(dbutton2); const [dModalstate, dModalsetstate] = (0, _react.useState)(dModal); const iFrameSrc = "https://merchant-sandbox.ourpass.co/checkout/?src=".concat(props.data.src, "&amount=").concat(props.data.amount, "&url=").concat(props.data.url, "&name=").concat(props.data.name, "&email=").concat(props.data.email, "&qty=").concat(props.data.qty, "&description=").concat(props.data.description, "&key=").concat(props.data.key); const [iFrameKeystate, iFrameKeysetstate] = (0, _react.useState)(0); function mover() { dbutton2setstate(hover => _objectSpread(_objectSpread({}, hover), {}, { opacity: "0.8" })); } function moout() { dbutton2setstate(hover => _objectSpread(_objectSpread({}, hover), {}, { opacity: "1" })); } const openIframe = () => { dModalsetstate(modal => _objectSpread(_objectSpread({}, modal), {}, { display: "block" })); iframeData(props.data); }; const closeModal = data => { console.log('whatData?: ', typeof data); if (typeof data === 'function') data(); iFrameKeysetstate(key => key + 1); dModalsetstate(modal => _objectSpread(_objectSpread({}, modal), {}, { display: "none" })); }; const iframeData = dataFunc => { window.addEventListener('message', function (event) { if (event.origin === 'https://merchant-sandbox.ourpass.co') { if (event.data === 'false pass') { closeModal(dataFunc.onClose); } if (event.data === 'false pass1') { closeModal(dataFunc.onSuccess); } } }); }; return /*#__PURE__*/_react.default.createElement("header", { className: "App-header" }, /*#__PURE__*/_react.default.createElement("button", { style: dbutton2state, onClick: openIframe, onMouseOver: mover, onMouseOut: moout }, "Checkout with Pass"), /*#__PURE__*/_react.default.createElement("div", { style: dModalstate }, /*#__PURE__*/_react.default.createElement("div", { style: dModalContent }, /*#__PURE__*/_react.default.createElement("span", { style: dModalClose, onClick: closeModal }, "x"), /*#__PURE__*/_react.default.createElement("iframe", { id: "dFrame", key: iFrameKeystate, src: iFrameSrc, style: dIframe })))); }; var _default = Button; exports.default = _default;