pay-sdk-react/dist/lib/Airwallex/airwallex-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.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _airwallexPopup = _interopRequireDefault(require("./airwallex-popup"));
var _airwallexModal = _interopRequireDefault(require("./airwallex-modal"));
var _Button = _interopRequireDefault(require("../Button"));
var _PayMask = _interopRequireDefault(require("../PayMask"));
var _omit = _interopRequireDefault(require("../utils/omit"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const AirwallexButton = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    children = 'Airwallex',
    onClick,
    createOrder,
    ...others
  } = props;
  const airwallexButtonRef = (0, _react.useRef)(null);
  const airwallexPopupRef = (0, _react.useRef)(null);
  const airwallexModalRef = (0, _react.useRef)(null);
  const [showMask, setShowMask] = (0, _react.useState)(false);
  const [airwallexUrl, setAirwallexUrl] = (0, _react.useState)();
  (0, _react.useImperativeHandle)(ref, () => ({
    get nativeElement() {
      var _airwallexButtonRef$c;
      return ((_airwallexButtonRef$c = airwallexButtonRef.current) === null || _airwallexButtonRef$c === void 0 ? void 0 : _airwallexButtonRef$c.nativeElement) || null;
    },
    openModal: options => {
      var _airwallexModalRef$cu;
      (_airwallexModalRef$cu = airwallexModalRef.current) === null || _airwallexModalRef$cu === void 0 || _airwallexModalRef$cu.open(options);
    },
    closeModal: () => {
      var _airwallexModalRef$cu2;
      (_airwallexModalRef$cu2 = airwallexModalRef.current) === null || _airwallexModalRef$cu2 === void 0 || _airwallexModalRef$cu2.close();
    },
    openPopup: options => {
      var _airwallexPopupRef$cu;
      (_airwallexPopupRef$cu = airwallexPopupRef.current) === null || _airwallexPopupRef$cu === void 0 || _airwallexPopupRef$cu.open(options);
    },
    closePopup: () => {
      var _airwallexPopupRef$cu2;
      (_airwallexPopupRef$cu2 = airwallexPopupRef.current) === null || _airwallexPopupRef$cu2 === void 0 || _airwallexPopupRef$cu2.close();
    },
    openPayment: options => {
      if (options) {
        setAirwallexUrl(options.airwallexUrl);
        setShowMask(true);
      }
    },
    closePayment: () => {
      setShowMask(false);
    },
    current: airwallexButtonRef.current
  }));
  const handlePayCreateOrder = (0, _react.useCallback)(async () => {
    if (createOrder) {
      // 1. 业务侧创建订单，获取参数
      const options = await createOrder();
      if (options) {
        if ((props === null || props === void 0 ? void 0 : props.payMode) === 'embedded') {
          if ((props === null || props === void 0 ? void 0 : props.displayType) === 'modal') {
            var _airwallexModalRef$cu3;
            airwallexModalRef === null || airwallexModalRef === void 0 || (_airwallexModalRef$cu3 = airwallexModalRef.current) === null || _airwallexModalRef$cu3 === void 0 || _airwallexModalRef$cu3.open(options);
          } else {
            var _airwallexPopupRef$cu3;
            (_airwallexPopupRef$cu3 = airwallexPopupRef.current) === null || _airwallexPopupRef$cu3 === void 0 || _airwallexPopupRef$cu3.open(options);
          }
        } else {
          setShowMask(true);
          setAirwallexUrl(options.airwallexUrl);
        }
      }
    }
  }, [createOrder, props]);
  const handleClick = (0, _react.useCallback)(e => {
    onClick === null || onClick === void 0 || onClick(e);
    if (createOrder) {
      handlePayCreateOrder();
      return;
    }
    if ((props === null || props === void 0 ? void 0 : props.payMode) === 'embedded') {
      if ((props === null || props === void 0 ? void 0 : props.displayType) === 'modal') {
        var _props$modalProps;
        if (props !== null && props !== void 0 && (_props$modalProps = props.modalProps) !== null && _props$modalProps !== void 0 && (_props$modalProps = _props$modalProps.airwallexProps) !== null && _props$modalProps !== void 0 && _props$modalProps.initOptions) {
          var _airwallexModalRef$cu4;
          airwallexModalRef === null || airwallexModalRef === void 0 || (_airwallexModalRef$cu4 = airwallexModalRef.current) === null || _airwallexModalRef$cu4 === void 0 || _airwallexModalRef$cu4.open();
        }
      } else {
        var _props$popupProps;
        if (props !== null && props !== void 0 && (_props$popupProps = props.popupProps) !== null && _props$popupProps !== void 0 && (_props$popupProps = _props$popupProps.airwallexProps) !== null && _props$popupProps !== void 0 && _props$popupProps.initOptions) {
          var _airwallexPopupRef$cu4;
          airwallexPopupRef === null || airwallexPopupRef === void 0 || (_airwallexPopupRef$cu4 = airwallexPopupRef.current) === null || _airwallexPopupRef$cu4 === void 0 || _airwallexPopupRef$cu4.open();
        }
      }
      return;
    }
    if ((props === null || props === void 0 ? void 0 : props.payMode) === 'redirect') {
      setShowMask(true);
      setAirwallexUrl(props === null || props === void 0 ? void 0 : props.airwallexUrl);
    }
  }, [onClick, createOrder, handlePayCreateOrder, props]);
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
    ref: airwallexButtonRef,
    onClick: handleClick
  }, (0, _omit.default)(others, ['payMode', 'displayType', 'createOrder', 'airwallexUrl', 'maskProps', 'popupProps', 'modalProps'])), children), (props === null || props === void 0 ? void 0 : props.payMode) === 'embedded' && (props === null || props === void 0 ? void 0 : props.displayType) === 'popup' && /*#__PURE__*/_react.default.createElement(_airwallexPopup.default, _extends({
    ref: airwallexPopupRef
  }, props === null || props === void 0 ? void 0 : props.popupProps)), (props === null || props === void 0 ? void 0 : props.payMode) === 'embedded' && (props === null || props === void 0 ? void 0 : props.displayType) === 'modal' && /*#__PURE__*/_react.default.createElement(_airwallexModal.default, _extends({
    ref: airwallexModalRef
  }, props === null || props === void 0 ? void 0 : props.modalProps)), (props === null || props === void 0 ? void 0 : props.payMode) === 'redirect' && showMask && airwallexUrl && /*#__PURE__*/_react.default.createElement(_PayMask.default, _extends({
    visible: showMask,
    onClose: () => {
      var _props$maskProps, _props$maskProps$onCl;
      setShowMask(false);
      props === null || props === void 0 || (_props$maskProps = props.maskProps) === null || _props$maskProps === void 0 || (_props$maskProps$onCl = _props$maskProps.onClose) === null || _props$maskProps$onCl === void 0 || _props$maskProps$onCl.call(_props$maskProps);
    },
    payUrl: airwallexUrl,
    title: 'Airwallex'
  }, (0, _omit.default)((props === null || props === void 0 ? void 0 : props.maskProps) || {}, ['onClose']))));
});
AirwallexButton.displayName = 'AirwallexButton';
var _default = exports.default = /*#__PURE__*/(0, _react.memo)(AirwallexButton);