I need to redirect to a URL after the payment pleted

I used the code provided in the documentation

<script src=".js"
                 data-error="errorCallback"
                data-cancel="cancelCallback" 
                 data-plete="pleteCallback"
                 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 pleteCallback(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 pleted so what can i do to made it redirect to a url after the payment pleated ?

I need to redirect to a URL after the payment pleted

I used the code provided in the documentation

<script src="https://ap-gateway.mastercard./checkout/version/52/checkout.js"
                 data-error="errorCallback"
                data-cancel="cancelCallback" 
                 data-plete="pleteCallback"
                 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 pleteCallback(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 pleted so what can i do to made it redirect to a url after the payment pleated ?

• javascript
• mastercard

Share Improve this question Follow edited Aug 20, 2019 at 14:28 mfluehr 3,21722 gold badges2828 silver badges3636 bronze badges asked Aug 20, 2019 at 12:55 Mohamed ZayedMohamed Zayed 12311 gold badge22 silver badges66 bronze badges 2

• Do you have any event when this is finished? – The Witness Commented Aug 20, 2019 at 14:30
• Hi @Zayed, Is your restorePageState function is working after getting redirected from Payment Interface ? – Anzar Commented Jan 13, 2020 at 9:46

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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 pletion instructions. A sample curl snippet for the Create Checkout Session operation is shown below.

curl https://ap-gateway.mastercard./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 remend the usage of data-plete="pleteCallback" or data-plete="http://[your domain]/receiptPage", the pleteCallback was not good enough for our implementation as we are using Checkout.showPaymentPage(); -> which is also poorly documented by MPGS, and the data-plete 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 pleting 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-plete 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./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-plete 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 plete 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 plete 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

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-plete="pleteCallback" try providing your redirect URL.

Also, the following is mentioned in the docs

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

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

Check your callback satisfies all these conditions.

---

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