@devlearn/paystack-react-native
Version:
A Paystack React Native SDK that allows you to build delightful payment experience in your native Android and IOS apps with React Native.
215 lines (197 loc) • 8.13 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNativeWebview = _interopRequireDefault(require("react-native-webview"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactNative = require("react-native");
var _utils = require("./utils/utils");
var _customerCharge = _interopRequireDefault(require("./utils/customerCharge"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const {
height,
width
} = _reactNative.Dimensions.get('window');
const Index = props => {
// const PAYSTACK_CLOSE_URL = 'https://standard.paystack.co/close';
const [totalAmount, setTotalAmount] = (0, _react.useState)(props.amount);
(0, _react.useEffect)(() => {
if (props.passChargeToCustomer) {
let amount = parseInt(props.amount);
var fees = new _customerCharge.default();
const charge = fees.calculateFee(amount);
const total = amount + charge;
setTotalAmount(total.toString());
} else {
setTotalAmount(props.amount);
}
}, []);
const onMessageReceived = data => {
const paymentResponse = JSON.parse(data);
if (props.onPaymentSuccess) props.onPaymentSuccess(paymentResponse);
};
const renderLoader = () => {
return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
position: 'absolute',
top: 2,
left: 2,
right: 2,
bottom: 2,
backgroundColor: 'rgba(0,0,0,0.5)',
zIndex: 999
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
height: height * 0.75,
backgroundColor: '#E7EAEF',
justifyContent: 'space-between',
alignItems: 'center',
width: width * 0.9,
borderRadius: 10
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
marginTop: height * 0.2
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
style: {
width: 45,
height: 45,
resizeMode: 'contain'
},
source: {
uri: 'https://public-files-paystack-prod.s3.eu-west-1.amazonaws.com/integration-logos/3c2534y84l5k9l0dloty.png'
}
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
marginBottom: 45,
marginTop: -30,
alignItems: 'center',
justifyContent: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
fontSize: 15,
marginBottom: 15
}
}, "Loading payment page."), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
fontSize: 14,
textAlign: 'center',
marginBottom: 20
}
}, "Please wait...."), /*#__PURE__*/_react.default.createElement(_reactNative.ActivityIndicator, {
size: "large",
color: "green"
}))));
};
const paymentForm = `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paystack</title>
</head>
<body onload="payWithPaystack()">
<script src="https://js.paystack.co/v2/inline.js"></script>
<script type="text/javascript">
window.onload = payWithPaystack;
function payWithPaystack(){
const paystack = new PaystackPop();
paystack.newTransaction({
key: '${props.publicKey}',
email: '${props.email}',
firstname: '${props.firstName}',
lastname: '${props === null || props === void 0 ? void 0 : props.lastName}',
label:'${props.firstName || props.lastName || props.email}',
phone: '${props.phone}',
amount: ${totalAmount},
currency: '${props.currency}',
ref:'${props.tranxRef}',
${(0, _utils.transFormCard)(props.paymentChannels)},
metadata: {
custom_fields: [
{
display_name: '${props.firstName + ' ' + props.lastName}',
variable_name: '${props.firstName}',
value:''
}
]},
onSuccess: (responseObj)=>{
const paymentResponse = {
status: responseObj.status,
reference: responseObj.reference,
transactionId: responseObj.transaction,
trxref: responseObj.trxref,
message: responseObj.message,
};
window.ReactNativeWebView.postMessage(JSON.stringify(paymentResponse))
},
onCancel:()=>{
var response = {status:'Cancelled',message:'Payment cancelled'};
window.ReactNativeWebView.postMessage(JSON.stringify(response))
}
});
}
</script>
</body>
</html>`;
return /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
transparent: true,
visible: true,
animationType: "slide"
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
flex: 1,
...props.containerStyle
}
}, /*#__PURE__*/_react.default.createElement(_reactNativeWebview.default, {
originWhitelist: ['*'],
javaScriptEnabled: true,
source: {
html: paymentForm
},
renderLoading: renderLoader,
startInLoadingState: true,
onMessage: e => {
var _e$nativeEvent;
onMessageReceived((_e$nativeEvent = e.nativeEvent) === null || _e$nativeEvent === void 0 ? void 0 : _e$nativeEvent.data);
},
scrollEnabled: false,
onLoadEnd: () => {
console.log('Load Ends');
}
}))));
};
var _default = Index;
exports.default = _default;
Index.propTypes = {
publicKey: _propTypes.default.string.isRequired,
amount: _propTypes.default.string.isRequired,
currency: _propTypes.default.string.isRequired,
email: _propTypes.default.string.isRequired,
firstName: _propTypes.default.string,
lastName: _propTypes.default.string,
phone: _propTypes.default.string,
tranxRef: _propTypes.default.string.isRequired,
paymentChannels: _propTypes.default.string.isRequired,
onPaymentSuccess: _propTypes.default.func.isRequired,
passChargeToCustomer: _propTypes.default.bool
};
//# sourceMappingURL=index.js.map