pay-sdk-react
Version:
A cross-platform payment SDK for React, supporting Alipay, WeChat Pay, PayPal, Stripe, Payssion, and Airwallex, compatible with H5, PC, and App environments.
93 lines • 3.68 kB
JavaScript
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
var _excluded = ["visible", "payUrl", "onClose", "onMaskClick", "onContinue", "openMode", "autoOpenWindow", "className", "destroyOnClose"];
import React, { useEffect, useState } from 'react';
import Mask from '../Mask';
import { usePayWindowOpen } from '../hooks/usePayWindowOpen';
import { mergeProps } from '../utils/with-default-props';
import cs from '../utils/classNames';
import { getPrefixCls } from '../utils/getPrefixCls';
var classPrefix = getPrefixCls('mask');
var defaultProps = {
visible: false,
title: 'Pay',
desc: "Don't see the secure pay browser? We'll help you re-launch the window to complete your purchase",
buttonText: 'Click to Continue',
autoOpenWindow: true
};
var PayMask = function PayMask(p) {
var props = mergeProps(defaultProps, p);
var visible = props.visible,
payUrl = props.payUrl,
_onClose = props.onClose,
_onMaskClick = props.onMaskClick,
onContinue = props.onContinue,
openMode = props.openMode,
autoOpenWindow = props.autoOpenWindow,
className = props.className,
_props$destroyOnClose = props.destroyOnClose,
destroyOnClose = _props$destroyOnClose === void 0 ? true : _props$destroyOnClose,
rest = _objectWithoutProperties(props, _excluded);
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isWindowMonitoring = _useState2[0],
setIsWindowMonitoring = _useState2[1];
var _usePayWindowOpen = usePayWindowOpen({
payUrl: payUrl || '',
onClose: function onClose() {
_onClose === null || _onClose === void 0 || _onClose();
setIsWindowMonitoring(false);
},
autoOpen: autoOpenWindow,
openMode: openMode
}),
openWindow = _usePayWindowOpen.openWindow,
closeWindow = _usePayWindowOpen.closeWindow;
useEffect(function () {
if (visible && autoOpenWindow) {
openWindow();
}
}, [visible, autoOpenWindow, openWindow]);
useEffect(function () {
if (visible && isWindowMonitoring && !autoOpenWindow) {
openWindow();
}
}, [visible, isWindowMonitoring, autoOpenWindow, openWindow]);
var handleContinue = function handleContinue() {
if (!autoOpenWindow) {
setIsWindowMonitoring(true);
} else {
openWindow();
}
onContinue === null || onContinue === void 0 || onContinue();
};
var handleClose = function handleClose() {
_onClose === null || _onClose === void 0 || _onClose();
closeWindow();
};
var classNames = cs(classPrefix, className);
return /*#__PURE__*/React.createElement(Mask, _extends({
visible: visible,
onMaskClick: function onMaskClick(e) {
handleClose();
_onMaskClick === null || _onMaskClick === void 0 || _onMaskClick(e);
},
className: classNames,
destroyOnClose: destroyOnClose
}, rest), /*#__PURE__*/React.createElement("div", {
className: "".concat(classPrefix, "-content")
}, /*#__PURE__*/React.createElement("button", {
className: "".concat(classPrefix, "-close"),
onClick: handleClose
}, "\xD7"), /*#__PURE__*/React.createElement("div", {
className: "".concat(classPrefix, "-title")
}, props.title), /*#__PURE__*/React.createElement("div", {
className: "".concat(classPrefix, "-desc")
}, props.desc), /*#__PURE__*/React.createElement("div", {
className: "".concat(classPrefix, "-continue"),
onClick: handleContinue
}, props.buttonText)));
};
export * from './interface';
export default PayMask;