I had integrated the Razorpay payment gateway in my magento site. It's working absolutely fine in web and mobile browser. But when I try to make the payment using in-app browsers (from Instagram, Facebook) I am facing the blank page issue. So I found the solution that I need to pass the callback URL along with other input parameter to payment gateway. Here I got stuck, what should be the callback URL here? Can anyone help me to resolve this!
Here is my code:
/app/code/Razorpay/Magento/view/frontend/web/js/view/payment/method-renderer/razorpay-method.js
define(
[
'Magento_Checkout/js/view/payment/default',
'Magento_Checkout/js/model/quote',
'jquery',
'ko',
'Magento_Checkout/js/model/payment/additional-validators',
'Magento_Checkout/js/action/set-payment-information',
'mage/url',
'Magento_Customer/js/model/customer',
'Magento_Checkout/js/action/place-order',
'Magento_Checkout/js/model/full-screen-loader',
'Magento_Ui/js/model/messageList'
],
function (Component, quote, $, ko, additionalValidators, setPaymentInformationAction, url, customer, placeOrderAction, fullScreenLoader, messageList) {
'use strict';
return Component.extend({
defaults: {
template: 'Razorpay_Magento/payment/razorpay-form',
razorpayDataFrameLoaded: false,
rzp_response: {}
},
getMerchantName: function() {
return window.checkoutConfig.payment.razorpay.merchant_name;
},
getKeyId: function() {
return window.checkoutConfig.payment.razorpay.key_id;
},
context: function() {
return this;
},
isShowLegend: function() {
return true;
},
getCode: function() {
return 'razorpay';
},
isActive: function() {
return true;
},
isAvailable: function() {
return this.razorpayDataFrameLoaded;
},
handleError: function (error) {
if (_.isObject(error)) {
this.messageContainer.addErrorMessage(error);
} else {
this.messageContainer.addErrorMessage({
message: error
});
}
},
initObservable: function() {
var self = this._super(); //Resolves UI Error on Checkout
if(!self.razorpayDataFrameLoaded) {
$.getScript("https://checkout.razorpay.com/v1/checkout.js", function() {
self.razorpayDataFrameLoaded = true;
});
}
return self;
},
/**
* @override
*/
/** Process Payment */
preparePayment: function (context, event) {
if(!additionalValidators.validate()) { //Resolve checkout aggreement accept error
return false;
}
var self = this,
billing_address,
rzp_order_id;
fullScreenLoader.startLoader();
this.messageContainer.clear();
this.amount = quote.totals()['base_grand_total'] * 100;
billing_address = quote.billingAddress();
this.user = {
name: billing_address.firstname + ' ' + billing_address.lastname,
contact: billing_address.telephone,
};
if (!customer.isLoggedIn()) {
this.user.email = quote.guestEmail;
}
else
{
this.user.email = customer.customerData.email;
}
this.isPaymentProcessing = $.Deferred();
$.when(this.isPaymentProcessing).done(
function () {
self.placeOrder();
}
).fail(
function (result) {
self.handleError(result);
}
);
self.getRzpOrderId();
return;
},
getRzpOrderId: function () {
var self = this;
$.ajax({
type: 'POST',
url: url.build('razorpay/payment/order'),
/**
* Success callback
* @param {Object} response
*/
success: function (response) {
fullScreenLoader.stopLoader();
if (response.success) {
self.renderIframe(response);
} else {
self.isPaymentProcessing.reject(response.message);
}
},
/**
* Error callback
* @param {*} response
*/
error: function (response) {
fullScreenLoader.stopLoader();
self.isPaymentProcessing.reject(response.message);
}
});
},
renderIframe: function(data) {
var self = this;
this.merchant_order_id = data.order_id;
var options = {
key: self.getKeyId(),
name: self.getMerchantName(),
amount: data.amount,
handler: function (data) {
self.rzp_response = data;
self.placeOrder(data);
},
order_id: data.rzp_order,
modal: {
ondismiss: function() {
self.isPaymentProcessing.reject("Payment Closed");
}
},
notes: {
merchant_order_id: '',
merchant_quote_id: data.order_id
},
prefill: {
name: this.user.name,
contact: this.user.contact,
email: this.user.email
},
callback_url: url.build('rest/default/V1/carts/mine/payment-information', {}),
_: {
integration: 'magento',
integration_version: data.module_version,
integration_parent_version: data.maze_version,
}
};
if (data.quote_currency !== 'INR')
{
options.display_currency = data.quote_currency;
options.display_amount = data.quote_amount;
}
this.rzp = new Razorpay(options);
this.rzp.open();
},
getData: function() {
return {
"method": this.item.method,
"po_number": null,
"additional_data": {
rzp_payment_id: this.rzp_response.razorpay_payment_id,
order_id: this.merchant_order_id,
rzp_signature: this.rzp_response.razorpay_signature
}
};
}
});
}
);
In the above code renderIframe function will pass the parameter to payment gateway, here I need to pass the callback URL. I tried to set it as rest/default/V1/carts/mine/payment-information but got 401 Unauthorised error. Please help me resolve this issue.
