Mastercard payment integration how to redirect to a link after complete the payment

Question

I need to redirect to a URL after the payment completed

I used the code provided in the documentation

<script src="https://ap-gateway.mastercard.com/checkout/version/52/checkout.js"
                 data-error="errorCallback"
                data-cancel="cancelCallback" 
                 data-complete="completeCallback"
                 data-afterRedirect="restorePageState"
                 return_url="{{url('confirm_is_paid/'.$Recipt->id.'/'.$Recipt->security_code)}}"
              >
</script>

<script type="text/javascript">
function errorCallback(error) {
            console.log(JSON.stringify(error));
}
function cancelCallback() {
            console.log('Payment cancelled');
}

Checkout.configure({
        merchant: 'my_merchant_id',
        order: {
                amount: function() {
                        //Dynamic calculation of amount
                          return {{$Recipt->final_price}};
                },
                currency: 'EGP',
                description: 'Ordered goods',
             id: Math.random()
        },
        interaction: {
                operation: 'PURCHASE', // set this field to 'PURCHASE' for Hosted Checkout to perform a Pay Operation. , AUTHORIZE
                merchant: {
                        name: 'AAIB TEST',
                        address: {
                                line1: '200 Sample St',
                                line2: '1234 Example Town'
                        }
                } }
});

function restorePageState(data)
{
    window.location.replace("{{url('confirm_is_paid/'.$Recipt->id.'/'.$Recipt->security_code)}}");
}

function completeCallback(resultIndicator, sessionVersion) {
              window.location.replace("{{url('confirm_is_paid/'.$Recipt->id.'/'.$Recipt->security_code)}}");
           }

Checkout.showPaymentPage();

</script>

everything is working correctly except I can't redirect after the payment completed so what can i do to made it redirect to a url after the payment compleated ?

Answer 1

The following is valid and has been tested for MPGS version 56 to 58

I hope my answer finds you well.

The issue you are mentioning is still being faced today unfortunately, and it is so weird that the MPGS team still did not fix it.

First of all, I would like to point out to the following from the documentation of MPGS:

Requesting a Hosted Checkout interaction is a simple process:

Request a checkout session using the Create Checkout Session operation. The request should include payment and interaction data, as well as completion instructions. A sample curl snippet for the Create Checkout Session operation is shown below.

curl https://ap-gateway.mastercard.com/api/nvp/version/57 \
-d "apiOperation=CREATE_CHECKOUT_SESSION" \
-d "apiPassword=$PWD" \
-d "apiUsername=merchant.<your_merchant_id>" \
-d "merchant=<your_merchant_id>" \
-d "interaction.operation=AUTHORIZE" \
-d "order.id=<unique_order_id>" \
-d "order.amount=100.00" \
-d "order.currency=USD"

This would return a session.id that you should include in your Checkout.configure javascript function, in which is missing from your current sample code.

The tag missing parameter in your Checkout.configure():

 session: { 
                id: '<your_create_checkout_session_ID>'
                },

Now to dig in and reach the answer. In every part of the MPGS documentation, they recommend the usage of data-complete="completeCallback" or data-complete="http://[your domain]/receiptPage", the completeCallback was not good enough for our implementation as we are using Checkout.showPaymentPage(); -> which is also poorly documented by MPGS, and the data-complete or return-url url was not working, as we would reach the payment page and never redirect from the receipt page of MPGS to our servers.

After digging deeper into the documentation, we noticed the request parameters interaction.cancelUrl and more importantly interaction.returnUrl in the Create Checkout Session documentation.

From the MPGS Create Checkout Session api documentation.

interaction.returnUrl  URI
The URL to which you want to return the payer after completing the payment attempt.

interaction.cancelUrl  URI
The URL to which you want to redirect the payer's browser if they cancel their payment.

and as you'll notice the above have similar functionalities to data-complete and data-cancel

Finally the solution

For the Checkout.showPaymentPage(); you'd have to pass these parameters in the initial request session request

curl https://ap-gateway.mastercard.com/api/nvp/version/57 \
-d "apiOperation=CREATE_CHECKOUT_SESSION" \
-d "apiPassword=$PWD" \
-d "apiUsername=merchant.<your_merchant_id>" \
-d "merchant=<your_merchant_id>" \
-d "interaction.operation=AUTHORIZE" \
-d "order.id=<unique_order_id>" \
-d "order.amount=100.00" \
-d "order.currency=USD"

-d "interaction.returnUrl=<your_returnUrl or data-complete url>"
-d "interaction.cancelUrl<your_cancel_url> or data-cancel url>"

Adding the extra parameters would fix the redirect issue when you'd want to redirect back to your website. You will find the following under Obtain the Payment Result

To return the payer to your shop site, you must either:

provide interaction.returnUrl in the Create Checkout Session operation, OR
define the complete callback in the Hosted Checkout request. See Basic Callbacks.

This should be refactored to say that interaction.returnUrl should be used in Checkout.showPaymentPage() and complete callback should be used in Checkout.showLightbox()

I hope this helps and saves a ton of times and emails for new visitors.

References:

MPGS-Implementing a Hosted Checkout Integration

MPGS-Create Checkout Session

MPGS-Checkout configuration

Answer 2

From the documentation,

If you provide a URL instead of a function in a callback, the payer will be redirected to this URL when the event is triggered.

Instead of callback function in data-complete="completeCallback" try providing your redirect URL.

Also, the following is mentioned in the docs

In order to be notified via the complete callback you must:

• Create a checkout session using the Create Checkout Session operation.
• Pass the session.id into Checkout.configure().
• Provide a callback.complete function or URL.

Check your callback satisfies all these conditions.

---

Source: https://ap-gateway.mastercard.com/api/documentation/integrationGuidelines/hostedCheckout/integrationModelHostedCheckout.html