I've itegrated razorpay with angular 9 but I get the error cannot read property postMessage of null. While try to click on 2nd time after 1st successfull payment. I did some research & it suggests that it because of it comes from XDM which I don't know much about, looks like it creates an iframe for communication. I have provided my code below See err screen shot here
clickitem() {
this.req2.key = payment.razorpayKey;
this.req2.name = payment.name;
this.req2.email = payment.email;
this.req2.address = payment.address;
this.req2.order_id = payment.orderId;
this.req2.clientQuotationid = payment.clientQuotationid;
this.req2.amount = payment.amount;
this.handle: function (response) {
paass(response.razorpay_payment_id, response.razorpay_order_id, response.razorpay_signature, PaymentComponent.amount);
var event = new CustomEvent("payment.success",
{
detail: response,
bubbles: true,
cancelable: false
}
);
window.dispatchEvent(event);
}
PaymentComponent.amount = payment.amount;
this.req2.contactnumber = payment.contactNumber;
var rzp1 = new Razorpay(this.req2);
rzp1.open(); // ---------- This line gives error on clicing 2nd time
rzp1.on('payment.failed', function (response) {
// Todo - store this information in the server
//console.log('Error Code:- ' +response.error.code);
const StatusNew = 'failed';
const u_pgID = 'undefined';
rzp1.close();
if (response.error.metadata.payment_id === undefined) {
faill(u_pgID, response.error.metadata.order_id, response.error.code, response.error.description, response.error.source, response.error.step, response.error.reason, StatusNew);
}
else {
faill(response.error.metadata.payment_id, response.error.metadata.order_id, response.error.code, response.error.description, response.error.source, response.error.step, response.error.reason, StatusNew);
}
});
}
paass(){} // ------- to store success in db
faill(){}// ------- to store Failure in dbbutton.btnPrimary((click)='clickitem();' pButton='', pRipple='', type='button', label='Pay Now')