react-native-klarna-inapp-sdk/lib/module/KlarnaCheckoutView.js

This library wraps Klarna Mobile SDK and exposes its functionality as React Native components.

import React, { Component } from 'react';
import RNKlarnaCheckoutView, { Commands as RNKlarnaCheckoutViewCommands } from './specs/KlarnaCheckoutViewNativeComponent';
export class KlarnaCheckoutView extends Component {
  snippet = null;
  isCheckoutViewReady = false;
  constructor(props) {
    super(props);
    this.state = {
      nativeViewHeight: 0
    };
    this.checkoutViewRef = /*#__PURE__*/React.createRef();
    this.isCheckoutViewReady = false;
  }
  render() {
    return /*#__PURE__*/React.createElement(RNKlarnaCheckoutView, {
      ref: this.checkoutViewRef
      /* eslint-disable-next-line react-native/no-inline-styles */,
      style: {
        width: '100%',
        height: this.state.nativeViewHeight,
        flexShrink: 1
      },
      returnUrl: this.props.returnUrl || '',
      onEvent: event => {
        var _this$props$onEvent, _this$props;
        let params = {};
        try {
          params = JSON.parse(event.nativeEvent.productEvent.params);
        } catch (e) {
          console.error('Failed to parse productEvent.params', e);
        }
        const productEvent = {
          action: event.nativeEvent.productEvent.action,
          params: params
        };
        (_this$props$onEvent = (_this$props = this.props).onEvent) === null || _this$props$onEvent === void 0 || _this$props$onEvent.call(_this$props, productEvent);
      },
      onError: event => {
        var _this$props$onError, _this$props2;
        const mobileSdkError = {
          isFatal: event.nativeEvent.error.isFatal,
          message: event.nativeEvent.error.message,
          name: event.nativeEvent.error.name
        };
        (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 || _this$props$onError.call(_this$props2, mobileSdkError);
      },
      onResized: event => {
        const newHeight = Number(event.nativeEvent.height);
        if (newHeight !== this.state.nativeViewHeight) {
          console.log('onResized', newHeight);
          this.setState({
            nativeViewHeight: newHeight
          });
        }
      },
      onCheckoutViewReady: () => {
        this.isCheckoutViewReady = true;
        console.log('onCheckoutViewReady');
        if (this.snippet) {
          console.log('Setting the snippet...');
          this.setSnippet(this.snippet);
          this.snippet = null;
        }
      }
    });
  }
  setSnippet = snippet => {
    this.snippet = snippet;
    const view = this.checkoutViewRef.current;
    if (view != null && this.isCheckoutViewReady) {
      RNKlarnaCheckoutViewCommands.setSnippet(view, snippet);
    }
  };
  suspend = () => {
    const view = this.checkoutViewRef.current;
    if (view != null && this.isCheckoutViewReady) {
      RNKlarnaCheckoutViewCommands.suspend(view);
    }
  };
  resume = () => {
    const view = this.checkoutViewRef.current;
    if (view != null && this.isCheckoutViewReady) {
      RNKlarnaCheckoutViewCommands.resume(view);
    }
  };
}
export default KlarnaCheckoutView;
//# sourceMappingURL=KlarnaCheckoutView.js.map