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.
158 lines • 7.41 kB
JavaScript
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
var _excluded = ["className", "children", "onClick", "formHtml", "createOrder", "displayType", "modalProps", "maskProps"],
_excluded2 = ["retryButtonProps", "finishButtonProps", "onClose"],
_excluded3 = ["onClose"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
import cs from '../utils/classNames';
import MAlipayAutoSubmit from './m-alipay-auto-submit';
import ConfirmModal from '../confirm-modal';
import omit from '../utils/omit';
import PayMask from '../PayMask';
import Button from '../Button';
import { IconAlipay } from '../icons';
import { getPrefixCls } from '../utils/getPrefixCls';
var MAlipayButton = /*#__PURE__*/forwardRef(function (props, ref) {
var className = props.className,
_props$children = props.children,
children = _props$children === void 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconAlipay, null), "\u652F\u4ED8\u5B9D\u652F\u4ED8") : _props$children,
onClick = props.onClick,
propsFormHtml = props.formHtml,
createOrder = props.createOrder,
_props$displayType = props.displayType,
displayType = _props$displayType === void 0 ? 'modal' : _props$displayType,
modalProps = props.modalProps,
maskProps = props.maskProps,
others = _objectWithoutProperties(props, _excluded);
var _ref = modalProps || {},
retryButtonProps = _ref.retryButtonProps,
finishButtonProps = _ref.finishButtonProps,
onClose = _ref.onClose,
modalPropsOthers = _objectWithoutProperties(_ref, _excluded2);
var _ref2 = maskProps || {},
onMaskClose = _ref2.onClose,
restMaskProps = _objectWithoutProperties(_ref2, _excluded3);
var mAlipayButtonRef = useRef({
nativeElement: null
});
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
formHtmlString = _useState2[0],
setFormHtmlString = _useState2[1];
var _useState3 = useState(false),
_useState4 = _slicedToArray(_useState3, 2),
showMask = _useState4[0],
setShowMask = _useState4[1];
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
showModal = _useState6[0],
setShowModal = _useState6[1];
useImperativeHandle(ref, function () {
return mAlipayButtonRef.current;
});
var handleRetry = useCallback(function (event) {
if (displayType === 'modal') {
var _retryButtonProps$onC;
retryButtonProps === null || retryButtonProps === void 0 || (_retryButtonProps$onC = retryButtonProps.onClick) === null || _retryButtonProps$onC === void 0 || _retryButtonProps$onC.call(retryButtonProps, event);
setShowModal(false);
}
}, [retryButtonProps, displayType]);
var handleFinish = useCallback(function (event) {
if (displayType === 'modal') {
var _finishButtonProps$on;
finishButtonProps === null || finishButtonProps === void 0 || (_finishButtonProps$on = finishButtonProps.onClick) === null || _finishButtonProps$on === void 0 || _finishButtonProps$on.call(finishButtonProps, event);
setShowModal(false);
}
}, [finishButtonProps, displayType]);
var handleDisplay = useCallback(function () {
if (displayType === 'modal') {
setShowModal(true);
} else {
setShowMask(true);
}
}, [displayType]);
var handleOnCloseModal = useCallback(function () {
if (displayType === 'modal') {
onClose === null || onClose === void 0 || onClose();
setShowModal(false);
}
}, [onClose, displayType]);
var handlePayCreateOrder = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _yield$createOrder, formHtml;
return _regeneratorRuntime.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
if (!createOrder) {
_context.next = 2;
break;
}
_context.next = 1;
return createOrder();
case 1:
_yield$createOrder = _context.sent;
formHtml = _yield$createOrder.formHtml;
if (formHtml) {
handleDisplay();
setFormHtmlString(formHtml);
}
case 2:
case "end":
return _context.stop();
}
}, _callee);
})), [createOrder, handleDisplay]);
var handleOpen = useCallback(function () {
if (propsFormHtml) {
handleDisplay();
setFormHtmlString(propsFormHtml);
}
}, [propsFormHtml, handleDisplay]);
var handleClick = useCallback(function (e) {
if (createOrder) {
handlePayCreateOrder();
} else {
handleOpen();
}
onClick === null || onClick === void 0 || onClick(e);
}, [onClick, createOrder, handlePayCreateOrder, handleOpen]);
var isShowAutoSubmit = useMemo(function () {
if (displayType === 'modal') {
return showModal;
}
return showMask;
}, [displayType, showModal, showMask]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
ref: mAlipayButtonRef,
className: cs(getPrefixCls('m-alipay-btn'), className),
onClick: handleClick
}, omit(others, ['displayType', 'displayProps'])), children), isShowAutoSubmit && formHtmlString && /*#__PURE__*/React.createElement(MAlipayAutoSubmit, {
formHtml: formHtmlString
}), displayType === 'modal' && formHtmlString && /*#__PURE__*/React.createElement(ConfirmModal, _extends({
visible: showModal,
retryButtonProps: _objectSpread({
onClick: handleRetry
}, omit(retryButtonProps || {}, ['onClick'])),
finishButtonProps: _objectSpread({
onClick: handleFinish
}, omit(finishButtonProps || {}, ['onClick'])),
onClose: handleOnCloseModal,
autoOpenWindow: false
}, modalPropsOthers)), showMask && formHtmlString && /*#__PURE__*/React.createElement(PayMask, _extends({
visible: showMask,
onClose: function onClose() {
setShowMask(false);
onMaskClose === null || onMaskClose === void 0 || onMaskClose();
},
payUrl: formHtmlString,
title: '支付宝',
autoOpenWindow: false
}, restMaskProps)));
});
MAlipayButton.displayName = 'MAlipayButton';
export default /*#__PURE__*/memo(MAlipayButton);