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.
67 lines • 3.15 kB
JavaScript
import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
var _excluded = ["className", "children", "onClick", "createOrder", "modalProps"];
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
import React, { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react';
import cs from '../utils/classNames';
import AlipayModal from './alipay-modal';
import Button from '../Button';
import { IconAlipay } from '../icons';
import { getPrefixCls } from '../utils/getPrefixCls';
var AlipayButton = /*#__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,
createOrder = props.createOrder,
modalProps = props.modalProps,
others = _objectWithoutProperties(props, _excluded);
var alipayButtonRef = useRef({
nativeElement: null
});
var alipayModalRef = useRef(null);
useImperativeHandle(ref, function () {
return alipayButtonRef.current;
});
var handlePayCreateOrder = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var options, _alipayModalRef$curre;
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:
options = _context.sent;
if (options) {
alipayModalRef === null || alipayModalRef === void 0 || (_alipayModalRef$curre = alipayModalRef.current) === null || _alipayModalRef$curre === void 0 || _alipayModalRef$curre.open(options);
}
case 2:
case "end":
return _context.stop();
}
}, _callee);
})), [createOrder]);
var handleClick = useCallback(function (e) {
if (createOrder) {
handlePayCreateOrder();
} else {
var _alipayModalRef$curre2;
alipayModalRef === null || alipayModalRef === void 0 || (_alipayModalRef$curre2 = alipayModalRef.current) === null || _alipayModalRef$curre2 === void 0 || _alipayModalRef$curre2.open();
}
onClick === null || onClick === void 0 || onClick(e);
}, [onClick, createOrder, handlePayCreateOrder]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
ref: alipayButtonRef,
className: cs(getPrefixCls('alipay-btn'), className),
onClick: handleClick
}, others), children), /*#__PURE__*/React.createElement(AlipayModal, _extends({
ref: alipayModalRef
}, modalProps)));
});
AlipayButton.displayName = 'AlipayButton';
export default /*#__PURE__*/memo(AlipayButton);