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.
94 lines • 3.94 kB
JavaScript
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", "paypalUrl", "createOrder", "maskProps"],
_excluded2 = ["onClose"];
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
import React, { forwardRef, memo, useCallback, useImperativeHandle, useRef, useState } from 'react';
import { IconPaypalText, IconPaypalWhite } from '../icons';
import cs from '../utils/classNames';
import PayMask from '../PayMask';
import Button from '../Button';
import { getPrefixCls } from '../utils/getPrefixCls';
var PaypalButton = /*#__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(IconPaypalText, null), " Buy Now") : _props$children,
onClick = props.onClick,
propsPaypalUrl = props.paypalUrl,
createOrder = props.createOrder,
maskProps = props.maskProps,
others = _objectWithoutProperties(props, _excluded);
var _ref = maskProps || {},
onMaskClose = _ref.onClose,
restMaskProps = _objectWithoutProperties(_ref, _excluded2);
var paypalButtonRef = useRef({
nativeElement: null
});
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
showMask = _useState2[0],
setShowMask = _useState2[1];
var _useState3 = useState(),
_useState4 = _slicedToArray(_useState3, 2),
paypalUrl = _useState4[0],
setPaypalUrl = _useState4[1];
useImperativeHandle(ref, function () {
return paypalButtonRef.current;
});
var handlePayCreateOrder = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var _yield$createOrder, _paypalUrl;
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;
_paypalUrl = _yield$createOrder.paypalUrl;
if (_paypalUrl) {
// 2. 唤起蒙层
setShowMask(true);
setPaypalUrl(_paypalUrl);
}
case 2:
case "end":
return _context.stop();
}
}, _callee);
})), [createOrder]);
var handleOpen = useCallback(function () {
if (propsPaypalUrl) {
setShowMask(true);
setPaypalUrl(propsPaypalUrl);
}
}, [propsPaypalUrl]);
var handleClick = useCallback(function (e) {
if (createOrder) {
handlePayCreateOrder();
} else {
handleOpen();
}
onClick === null || onClick === void 0 || onClick(e);
}, [onClick, createOrder, handlePayCreateOrder, handleOpen]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
ref: paypalButtonRef,
className: cs(getPrefixCls('paypal-btn'), className),
onClick: handleClick
}, others), children), showMask && paypalUrl && /*#__PURE__*/React.createElement(PayMask, _extends({
visible: showMask,
onClose: function onClose() {
setShowMask(false);
onMaskClose === null || onMaskClose === void 0 || onMaskClose();
},
payUrl: paypalUrl,
title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(IconPaypalWhite, null), "PayPal")
}, restMaskProps)));
});
PaypalButton.displayName = 'PaypalButton';
export default /*#__PURE__*/memo(PaypalButton);