MasterCard payment gateway checkout.js method not triggering complete Callback function

Question

I am using the master card checkout.js method version 57.
Under the checkout.js there are two types

1. showLightbox -> Show a lightbox to complete payment.
2. showPaymentPage -> Redirect to a hosted payment page to complete payment.

when using first method light box if the payment process success completeCallback() function get trigger. there is no issue with this showlightbox method.

But when using the showPaymentPage method after the payment process, get redirect to the initiated domain but not triggering the completeCallback() function.

how ever if I cancel the payment process get redirect to the initiated domain and triggering the cancel Callback function.

<script src="https://nbo.gateway.mastercard.com/checkout/version/57/checkout.js" data-error="errorCallback" 
data-cancel="cancelCallback" 
data-complete="completeCallback"></script>

Checkout.configure({
    merchant: pay_det['merchant'],
    order: {
        amount: function() {                        
            return pay_det['amount'];
        },
        currency: pay_det['currebcy'],
        description: 'Payments',
        id: invID,
        reference : $('#id_invoice').val()
    },
    session : {
        id : pay_det['session_id']
    },
    transaction :{
        reference : 'TR'+pay_det['invID']
    },
    interaction: {                        
        operation : 'PURCHASE',                    
        displayControl: {
            billingAddress : 'HIDE',
            customerEmail  : 'HIDE',
            orderSummary   : 'SHOW',
            shipping       : 'HIDE'
        },
        merchant: {
            name: pay_det['amount'],
            address: {
                line1: pay_det['companyPrintAddress'],
            },                            
        }
    },                                
});

Checkout.showPaymentPage();

function cancelCallback() {
    alert('cancelled');
}

function completeCallback(resultIndicator, sessionVersion) {
    //var invoiceID = $('#id_invoice').val();
    alert('success');
    console.log(resultIndicator);
}

one more thing if I change the data-complete attributes value to a url not redirect from the payment gateway to my domain. form

data-complete="completeCallback"

to

data-complete="https://subscription-int.com/567"

When referring the complete Callback functions reference, documentation says

The complete callback is only supported in a Return To Merchant integration.

What is Return To Merchant integration?

Answer 1

You need to provide the interaction.returnUrl in the Create Checkout Session and NOT IN Configure operation.

Another way of doing this is when referencing the checkout.js script, you can define the complete callback. Mention your returnUrl as callback value (instead of function) and the user will be redirected to this URL upon completion of payment.

You'll have the resultIndicator appended to your returnUrl upon redirection. Compare this with successIndicator value that you had received during Create Checkout Session response.

MPGS Hosted Checkout Documentation

Answer 2

You can use cancel and complete callback like this.

<script src="https://nbo.gateway.mastercard.com/checkout/version/57/checkout.js" data-cancel="https://website.com/payment-rejected.php" data-complete="https://website.com/payment-success.php"> </script>

Refer this:

https://nbo.gateway.mastercard.com/api/documentation/integrationGuidelines/hostedCheckout/integrationModelHostedCheckout.html

Answer 3

I used the code snippet below in my wordpress widget, just make sure you add the returnUrl in the interaction parameter.

$id = sanitize_text_field( $req['id'] );
$amount  = sanitize_text_field( $req['amount'] );
$merchantId = sanitize_text_field( $req['merchantId'] );
$password = sanitize_text_field( $req['password'] );
$redirectUrl = sanitize_text_field( $req['redirectUrl'] );

$post_data = '{ 
    "apiOperation": "CREATE_CHECKOUT_SESSION", 
    "interaction": {
        "operation": "PURCHASE",
        "returnUrl": "' . $redirectUrl .'",
    
    },
    "order": {
        "currency": "NGN",
         "id": "' . $id . '",
        "amount": "' . $amount . '"
      } 
  }';

$url = "https://fbn.gateway.mastercard.com/api/rest/version/61/merchant/" . $merchantId . "/session";

$auth = 'merchant.'. $merchantId . ':' . $password;
$credentials = base64_encode($auth);
$authorization = 'Authorization: Basic ' . $credentials;

// Prepare new cURL resource
$crl = curl_init($url);
curl_setopt($crl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($crl, CURLINFO_HEADER_OUT, true);
curl_setopt($crl, CURLOPT_POST, true);
curl_setopt($crl, CURLOPT_POSTFIELDS, $post_data);
 
// Set HTTP Header for POST request 
curl_setopt($crl, CURLOPT_HTTPHEADER, array(
    'Content-Type: application/json',
    'Authorization: Basic ' . $credentials)
);
 
// Submit the POST request
$result = curl_exec($crl);
 
// handle curl error
if ($result === false) {
    // throw new Exception('Curl error: ' . curl_error($crl));
    //print_r('Curl error: ' . curl_error($crl));
    $result_noti = 0; die();
} else {
    return rest_ensure_response( $result );
}
// Close cURL session handle
curl_close($crl);

Answer 4

Try to add the function to the window object, for example:

window.completed = () => {};