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.
79 lines • 3.91 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 = ["children", "onClick", "displayType", "stripePopupProps", "stripeModalProps", "createOrder"];
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
import React, { forwardRef, memo, useCallback, useImperativeHandle, useRef } from 'react';
import StripePopup from './stripe-popup';
import StripeModal from './stripe-modal';
import Button from '../Button';
var StripeButton = /*#__PURE__*/forwardRef(function (props, ref) {
var _props$children = props.children,
children = _props$children === void 0 ? 'Stripe' : _props$children,
onClick = props.onClick,
_props$displayType = props.displayType,
displayType = _props$displayType === void 0 ? 'popup' : _props$displayType,
stripePopupProps = props.stripePopupProps,
stripeModalProps = props.stripeModalProps,
createOrder = props.createOrder,
others = _objectWithoutProperties(props, _excluded);
var stripeButtonRef = useRef({
nativeElement: null
});
var stripePopupRef = useRef(null);
var stripeModalRef = useRef(null);
useImperativeHandle(ref, function () {
return stripeButtonRef.current;
});
var handlePayCreateOrder = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
var options, _stripeModalRef$curre, _stripePopupRef$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 !== null && options !== void 0 && options.clientSecret && options !== null && options !== void 0 && options.stripeKey) {
// 2. 唤起弹窗
if (displayType === 'modal') {
(_stripeModalRef$curre = stripeModalRef.current) === null || _stripeModalRef$curre === void 0 || _stripeModalRef$curre.open(options);
} else {
(_stripePopupRef$curre = stripePopupRef.current) === null || _stripePopupRef$curre === void 0 || _stripePopupRef$curre.open(options);
}
}
case 2:
case "end":
return _context.stop();
}
}, _callee);
})), [createOrder, displayType]);
var handleClick = useCallback(function (e) {
if (createOrder) {
handlePayCreateOrder();
} else {
if (displayType === 'modal') {
var _stripeModalRef$curre2;
stripeModalRef === null || stripeModalRef === void 0 || (_stripeModalRef$curre2 = stripeModalRef.current) === null || _stripeModalRef$curre2 === void 0 || _stripeModalRef$curre2.open();
} else {
var _stripePopupRef$curre2;
stripePopupRef === null || stripePopupRef === void 0 || (_stripePopupRef$curre2 = stripePopupRef.current) === null || _stripePopupRef$curre2 === void 0 || _stripePopupRef$curre2.open();
}
}
onClick === null || onClick === void 0 || onClick(e);
}, [onClick, createOrder, handlePayCreateOrder, displayType]);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({
ref: stripeButtonRef,
onClick: handleClick
}, others), children), displayType === 'popup' && /*#__PURE__*/React.createElement(StripePopup, _extends({
ref: stripePopupRef
}, stripePopupProps)), displayType === 'modal' && /*#__PURE__*/React.createElement(StripeModal, _extends({
ref: stripeModalRef
}, stripeModalProps)));
});
StripeButton.displayName = 'StripeButton';
export default /*#__PURE__*/memo(StripeButton);