pay-sdk-react/dist/es/Payssion/payssion-button.js

A cross-platform payment SDK for React, supporting Alipay, WeChat Pay, PayPal, Stripe, Payssion, and Airwallex, compatible with H5, PC, and App environments.

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", "payssionUrl", "createOrder", "maskProps"],
  _excluded2 = ["onClose"];
import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
import React, { forwardRef, memo, useCallback, useImperativeHandle, useRef, useState } from 'react';
import cs from '../utils/classNames';
import PayMask from '../PayMask';
import Button from '../Button';
import { IconPayssionPay } from '../icons';
import { getPrefixCls } from '../utils/getPrefixCls';
var PayssionButton = /*#__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(IconPayssionPay, null), "Payssion") : _props$children,
    onClick = props.onClick,
    propsPayssionUrl = props.payssionUrl,
    createOrder = props.createOrder,
    maskProps = props.maskProps,
    others = _objectWithoutProperties(props, _excluded);
  var _ref = maskProps || {},
    _onClose = _ref.onClose,
    restMaskProps = _objectWithoutProperties(_ref, _excluded2);
  var payssionButtonRef = useRef({
    nativeElement: null
  });
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    showMask = _useState2[0],
    setShowMask = _useState2[1];
  var _useState3 = useState(),
    _useState4 = _slicedToArray(_useState3, 2),
    payssionUrl = _useState4[0],
    setPayssionUrl = _useState4[1];
  useImperativeHandle(ref, function () {
    return payssionButtonRef.current;
  });
  var handlePayCreateOrder = useCallback(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
    var _yield$createOrder, _payssionUrl;
    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;
          _payssionUrl = _yield$createOrder.payssionUrl;
          if (_payssionUrl) {
            // 2. 唤起蒙层
            setShowMask(true);
            setPayssionUrl(_payssionUrl);
          }
        case 2:
        case "end":
          return _context.stop();
      }
    }, _callee);
  })), [createOrder]);
  var handleOpen = useCallback(function () {
    if (propsPayssionUrl) {
      setShowMask(true);
      setPayssionUrl(propsPayssionUrl);
    }
  }, [propsPayssionUrl]);
  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: payssionButtonRef,
    className: cs(getPrefixCls('payssion-btn'), className),
    onClick: handleClick
  }, others), children), payssionUrl && showMask && /*#__PURE__*/React.createElement(PayMask, _extends({
    visible: showMask,
    onClose: function onClose() {
      setShowMask(false);
      _onClose === null || _onClose === void 0 || _onClose();
    },
    payUrl: payssionUrl,
    title: 'Payssion'
  }, restMaskProps)));
});
PayssionButton.displayName = 'PayssionButton';
export default /*#__PURE__*/memo(PayssionButton);