I have converted mastercard payment gateway (Checkout.js) Jquery plugin in to react component (comBank.js) and trying to use it in my ReactJs Application.I have defined callbacks inside the constructor.
Issue :
It can detect callbacks when i implement my component in to App.js file.But when i import my component in to different page with different route,Its not working.
index.js
<html lang="en">
<head>
<script async src="https://cbcmpgs.gateway.mastercard.com/checkout/version/51/checkout.js"
data-error="comBankErrorCallback" data-cancel="comBankCancelCallback"
data-complete="comBankCompleteCallback"></script>
</head>
</html>
comBank.js
class ComBank extends Component {
constructor(props) {
super(props);
window.comBankErrorCallback = (error) => {
console.log("Hiiii errorCallback", error)
}
window.comBankCancelCallback = () => {
console.log("Hiiii cancelCallback")
}
window.comBankCompleteCallback = (resultIndicator, sessionVersion) => {
console.log("Hiiii completeCallback")
}
}
setConfigurations = (sessionData, merchant, name, billingAddress, description) => {
window.Checkout.configure({
merchant,
interaction: {
merchant: { name },
displayControl: { billingAddress }
},
session: { id: sessionData.sessionId },
order: { description }
});
this.checkOut();
}
checkOut = () => {
window.Checkout.showPaymentPage();
}
render() {
const { data: { sessionData, merchant, merchantName, billingAddress, description } } = this.props
sessionData &&
this.setConfigurations(sessionData, merchant, merchantName, billingAddress, description)
return (
<>
</>
)
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ }, dispatch);
}
function mapStateToProps({ }) {
return { };
}
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(ComBank));
App.js
<ComBank data={
{
alias: uuidv4(),
merchant: 'xxxx',
merchantName: 'xxxx',
billingAddress: 'HIDE',
description: 'xxx',
sessionData: xxxxx
}} />
When i import ComBank componet in App.js (its root url http://localhost:3000/) it's working charmly. But when it's import in another page like dashboard,its not working (http://localhost:3000/dashboard) and fail https://cbcmpgs.gateway.mastercard.com/api/page/version/51/pay and throw 404
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
