react-native-tosspayments-v2/lib/commonjs/component/TossPaymentsV2Widget.cjs

Unofficial Toss Payments V2 porting for React Native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TossPaymentsV2Widget = void 0;
var _react = require("react");
var _reactNativeWebview = _interopRequireDefault(require("react-native-webview"));
var _TossPaymentsV2WidgetHtml = require("../html/TossPaymentsV2WidgetHtml.cjs");
var _reactNative = require("react-native");
var _useStableCallback = require("../util/useStableCallback.cjs");
var _jsUtil = require("@mj-studio/js-util");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * https://docs.tosspayments.com/sdk/v2/js#widgetsrequestpayment
 */

const TossPaymentsV2Widget = exports.TossPaymentsV2Widget = /*#__PURE__*/(0, _react.forwardRef)(({
  style,
  webViewProps,
  clientKey,
  customerKey,
  onPaymentFail,
  onPaymentSuccess,
  paymentRequest,
  onPaymentError,
  agreementVariantKey,
  paymentMethodsVariantKey
}, ref) => {
  const [height, setHeight] = (0, _react.useState)(400);
  const inner = (0, _react.useRef)(null);
  const postMessage = ({
    type,
    data
  }) => {
    inner.current?.injectJavaScript(`(function(){
          window.dispatchEvent(new MessageEvent('message', {data : ${JSON.stringify({
      type,
      data
    })}}))
      })()`);
  };
  const setParams = (0, _useStableCallback.useStableCallback)((key, value) => {
    postMessage({
      type: 'setParam',
      data: {
        key,
        value
      }
    });
  });
  const init = (0, _useStableCallback.useStableCallback)(() => {
    postMessage({
      type: 'init'
    });
  });
  const onLoadWebView = (0, _useStableCallback.useStableCallback)(() => {
    setParams('clientKey', clientKey);
    setParams('customerKey', customerKey);
    const {
      amount,
      orderId,
      orderName,
      customerEmail,
      customerName,
      customerMobilePhone,
      card,
      taxFreeAmount
    } = paymentRequest;
    setParams('amount', amount);
    setParams('orderId', orderId);
    setParams('orderName', orderName);
    setParams('customerEmail', customerEmail);
    setParams('customerName', customerName);
    setParams('customerMobilePhone', customerMobilePhone);
    setParams('card', card);
    setParams('taxFreeAmount', taxFreeAmount);
    setParams('paymentMethodsVariantKey', paymentMethodsVariantKey || 'DEFAULT');
    setParams('agreementVariantKey', agreementVariantKey || 'AGREEMENT');
    init();
  });
  const onMessage = (0, _useStableCallback.useStableCallback)(event => {
    const rawData = event?.nativeEvent?.data;
    if (_jsUtil.is.notEmptyString(rawData) && rawData.startsWith('{') && rawData.endsWith('}')) {
      const {
        type,
        data
      } = JSON.parse(rawData);
      if (type === 'requestPaymentFail' || type === 'unknownError') {
        onPaymentError?.(data);
      } else if (type === 'updateLayout') {
        const {
          scrollHeight
        } = data;
        setHeight(scrollHeight + 24);
      }
    }
  });
  (0, _react.useImperativeHandle)(ref, () => ({}), []);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    style: [{
      height
    }, style],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeWebview.default, {
      ref: inner,
      textZoom: 100,
      contentMode: 'mobile',
      scalesPageToFit: true,
      showsHorizontalScrollIndicator: false,
      scrollEnabled: false,
      overScrollMode: 'never',
      ...webViewProps,
      onLoad: e => {
        webViewProps?.onLoad?.(e);
        onLoadWebView();
      },
      style: [{
        opacity: 0.99
      }, webViewProps?.style],
      source: {
        html: _TossPaymentsV2WidgetHtml.TossPaymentsV2WidgetHtml
      },
      onMessage: onMessage,
      onShouldStartLoadWithRequest: ({
        url
      }) => {
        if (url.startsWith('https://success')) {
          const params = new URL(url).searchParams;
          const paymentType = params.get('paymentType') || '';
          const orderId = params.get('orderId') || '';
          const paymentKey = params.get('paymentKey') || '';
          const amount = Number(params.get('amount'));
          onPaymentSuccess({
            amount,
            orderId,
            paymentKey,
            paymentType
          });
          return false;
        } else if (url.startsWith('https://fail')) {
          const params = new URL(url).searchParams;
          const code = params.get('code') || '';
          const message = params.get('message') || '';
          const orderId = params.get('orderId') || '';
          onPaymentFail({
            code,
            message,
            orderId
          });
          return false;
        } else if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('about:blank')) {
          return true;
        } else if (_reactNative.Platform.OS === 'android') {
          // AndroidIntentUtil.handleTossPaymentUrl(url).catch(
          //   onFailedOpenISPApps
          // );
          _reactNative.Linking.openURL(url).catch(onFailedOpenISPApps);
        } else if (_reactNative.Platform.OS === 'ios') {
          _reactNative.Linking.openURL(url).catch(onFailedOpenISPApps);
        }
        return true;
        function onFailedOpenISPApps() {
          console.log('카드사 결제앱 실행에 실패했어요\n설치 후 진행해주세요!');
        }
      }
    })
  });
});
//# sourceMappingURL=TossPaymentsV2Widget.cjs.map