xpresspayonline-react-native
Version:
xpresspayonline react native plugin
377 lines (321 loc) • 15.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _reactNativeWebview = _interopRequireDefault(require("react-native-webview"));
var _xpresspayonlineInit = require("./xpresspayonline-init");
var _config = require("./config/config");
var _encryption = require("./util/encryption");
var _xpressCheckoutError = _interopRequireDefault(require("./xpress-checkout-error"));
var _loader = _interopRequireDefault(require("./loader"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var borderRadiusDimension = 24 / 896;
var windowHeight = _reactNative.Dimensions.get("window").height;
var styles = _reactNative.StyleSheet.create({
errorActionButtonText: {
textAlign: "center",
color: _config.colors.primary,
fontSize: 16
},
errorActionButton: {
paddingHorizontal: 16,
paddingVertical: 16
},
errorText: {
color: _config.colors.secondary,
textAlign: "center",
marginBottom: 32,
fontSize: 18
},
error: {
position: "absolute",
left: 0,
right: 0,
bottom: 0,
top: 0,
backgroundColor: "#ffffff",
justifyContent: "center",
alignItems: "center",
paddingHorizontal: 56
},
backdrop: {
position: "absolute",
left: 0,
right: 0,
bottom: 0,
top: 0
},
loadingImage: {
width: 64,
height: 64,
resizeMode: "contain"
},
loading: {
position: "absolute",
top: 0,
right: 0,
bottom: 0,
left: 0,
backgroundColor: "rgba(255, 255, 255, 0.3)",
justifyContent: "center",
alignItems: "center"
},
flexContainer: {
flex: 1
},
webviewContainer: {
top: _reactNative.Platform.select({
ios: 96,
android: 64
}),
// status bar height aware for ios
flex: 1,
backgroundColor: "#efefef",
paddingBottom: _reactNative.Platform.select({
ios: 96,
android: 64
}),
// status bar height aware for ios
overflow: "hidden",
borderTopLeftRadius: windowHeight * borderRadiusDimension,
borderTopRightRadius: windowHeight * borderRadiusDimension
},
webview: {
flex: 1,
backgroundColor: "rgba(0,0,0,0)"
}
});
var NOTFOUND = "NOT_FOUND";
var PayWithXpresspayOnline = /*#__PURE__*/function (_React$Component) {
_inherits(PayWithXpresspayOnline, _React$Component);
var _super = _createSuper(PayWithXpresspayOnline);
function PayWithXpresspayOnline(props) {
var _this;
_classCallCheck(this, PayWithXpresspayOnline);
_this = _super.call(this, props);
_defineProperty(_assertThisInitialized(_this), "webView", {
canGoBack: false,
ref: 0
});
_defineProperty(_assertThisInitialized(_this), "onNavigationStateChange", function (navState) {
_this.handleNavigationStateChange(navState.url);
});
_this.state = {
isValidMerchant: false,
hash: "",
viewToDisplay: "payment",
loading: false,
show: false,
error: ''
};
return _this;
}
_createClass(PayWithXpresspayOnline, [{
key: "closeModal",
value: function closeModal(error) {
var onRedirect = this.props.onRedirect;
this.setState({
show: false
});
var error1 = this.getRedirectParams(this.state.error);
onRedirect(error1);
}
}, {
key: "componentDidMount",
value: function () {
var _componentDidMount = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var _this$props, onRedirect, options, response, hash;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this$props = this.props, onRedirect = _this$props.onRedirect, options = _this$props.options;
console.log(options);
if (!(options.env == 'LIVE' || options.env == 'TEST')) {
_context.next = 10;
break;
}
this.setState({
loading: true
});
_context.next = 6;
return (0, _xpresspayonlineInit.verifyMerchant)(options.env, options.publicKey);
case 6:
response = _context.sent;
if (response.data) {
hash = (0, _encryption.encrypt)(options);
this.setState({
hash: hash,
show: true,
loading: false
});
} else if (response.error === NOTFOUND) {
onRedirect(response);
} else {
this.setState({
show: true,
loading: false
});
}
_context.next = 12;
break;
case 10:
onRedirect({
'status-code': '01',
message: 'Invalid environment'
});
return _context.abrupt("return");
case 12:
case "end":
return _context.stop();
}
}
}, _callee, this);
}));
function componentDidMount() {
return _componentDidMount.apply(this, arguments);
}
return componentDidMount;
}()
}, {
key: "handleNavigationStateChange",
value: function handleNavigationStateChange(url) {
var _this$props2 = this.props,
onRedirect = _this$props2.onRedirect,
options = _this$props2.options;
this.setState({
loading: false
});
var data = this.getRedirectParams(url);
if (data["status-code"] === "11") {
onRedirect(data);
this.setState({
viewToDisplay: "message",
message: data["status-message"],
show: false
});
} else if (data["status-code"] === "08") {
this.setState({
viewToDisplay: "message",
message: data["status-message"],
show: false
});
} else if (data["status-code"] === "099") {
this.setState({
viewToDisplay: "message",
message: data["status-message"],
show: false
});
}
}
}, {
key: "getRedirectParams",
value: function getRedirectParams(url) {
var res = {};
if (url.split("?").length > 1) {
var params = url.split("?")[1].split("&");
for (var i = 0; i < params.length; i++) {
var param = params[i].split("=");
var val = decodeURIComponent(param[1]).trim();
res[param[0]] = String(val);
}
}
return res;
}
}, {
key: "render",
value: function render() {
var _this2 = this;
var amount = this.props.options.amount;
var callbackUrl = this.props.options.callbackUrl;
var currency = this.props.options.currency;
var transactionId = this.props.options.transactionId;
var email = this.props.options.email;
var hash = this.state.hash;
var publicKey = this.props.options.publicKey;
var logoURL = this.props.options.logoURL;
var country = this.props.options.country;
var phoneNumber = this.props.options.phoneNumber;
var firstName = this.props.options.firstName;
var lastName = this.props.options.lastName;
var meta = this.props.options.meta;
var env = this.props.options.env;
var _this$state = this.state,
loading = _this$state.loading,
show = _this$state.show,
viewToDisplay = _this$state.viewToDisplay,
message = _this$state.message;
var url = env === 'LIVE' ? _config.FORM_POST_URL_LIVE : _config.FORM_POST_TEST;
console.log(show);
return /*#__PURE__*/_react["default"].createElement(_reactNative.Modal, {
transparent: true,
animated: false,
hardwareAccelerated: false,
visible: show
}, viewToDisplay && viewToDisplay === "payment" && /*#__PURE__*/_react["default"].createElement(_reactNative.Animated.View, {
style: [styles.webviewContainer],
testID: "dialog"
}, /*#__PURE__*/_react["default"].createElement(_reactNativeWebview["default"], {
style: styles.webview,
source: {
html: "<body style=\"display:flex; justify-content:center;flex-direction:column;align-items:center\">\n <form action=".concat(url, " id=\"myForm\" type=\"hidden\" method=\"post\" >\n <input type=\"hidden\" name=\"amount\" value=").concat(amount, ">\n <input type=\"hidden\" name=\"callbackUrl\" value=").concat(callbackUrl, ">\n <input type=\"hidden\" name=\"currency\" value=").concat(currency, ">\n <input type=\"hidden\" name=\"transactionId\" value=").concat(transactionId, ">\n <input type=\"hidden\" name=\"email\" value=").concat(email, ">\n <input type=\"hidden\" name=\"hash\" value=").concat(hash, ">\n <input type=\"hidden\" name=\"publicKey\" value=").concat(publicKey, ">\n <input type=\"hidden\" name=\"logoURL\" value=").concat(logoURL, ">\n <input type=\"hidden\" name=\"country\" value=").concat(country, ">\n <input type=\"hidden\" name=\"phoneNumber\" value=").concat(phoneNumber, ">\n <input type=\"hidden\" name=\"firstName\" value=").concat(firstName, ">\n <input type=\"hidden\" name=\"lastName\" value=").concat(lastName, ">\n <input type=\"hidden\" name=\"meta\" value=").concat(meta, ">\n </form><script>document.getElementById(\"myForm\").submit();</script></body>")
},
startInLoadingState: true,
onLoadStart: function onLoadStart() {
_this2.setState({
loading: true,
show: true
});
},
scalesPageToFit: true,
javaScriptEnabled: true // renderLoading={this.CheckoutLoader}
,
onLoadEnd: function onLoadEnd(syntheticEvent) {
// update component to be aware of loading status
var nativeEvent = syntheticEvent.nativeEvent;
_this2.isLoading = nativeEvent.loading; // since this issue arise on android only. delay only on android platform
if (_reactNative.Platform.OS === "android") {
// delay loader to hide default android webpage not available screen
setTimeout(function () {
_this2.setState({
loading: false
});
}, 150);
} else {
_this2.setState({
loading: false
});
}
},
domStorageEnabled: true,
onNavigationStateChange: this.onNavigationStateChange,
ref: function ref(webView) {
_this2.webView.ref = webView;
},
onError: function onError(syntheticEvent) {
var nativeEvent = syntheticEvent.nativeEvent;
_this2.closeModal(nativeEvent.url);
}
})), viewToDisplay && viewToDisplay === "message" && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, null, /*#__PURE__*/_react["default"].createElement(_reactNative.Text, null, message))), loading && /*#__PURE__*/_react["default"].createElement(_loader["default"], null));
}
}]);
return PayWithXpresspayOnline;
}(_react["default"].Component);
exports["default"] = PayWithXpresspayOnline;