使用checkout.js v61版对接MasterCard支付网关时支付失败求助

Hey everyone, I'm stuck on a critical issue with the MasterCard payment gateway integration—I can't successfully complete a payment, even though the authorization step goes through. Hoping someone with experience here can help me troubleshoot!

Detailed Issue Breakdown #

• I successfully retrieve a session.id and pass it into Checkout.configure({})
• When I open the payment lightbox, enter test card/CVV, get redirected to the ACS Emulation portal. After submitting there, the page redirects but ends in an error (screenshot shows a failure state post-redirect)
• In the merchant backend, I only see an Authorization record—no Purchase operation was executed at all
• My CREATE_CHECKOUT_SESSION request payload is:

{"apiOperation":"CREATE_CHECKOUT_SESSION","order":{"amount":'.$grand_total.',"currency":"JOD","id":"'.$order_id.'"},"interaction":{"operation":"PURCHASE","returnUrl":"https://www.oursite.com/thankyou","cancelUrl":"https://www.oursite.com/checkout",}}

• During the redirect from the gateway to ACS Emulation, I caught security errors in the browser console. I'm not sure if these originate from our site, or if they're out of our control—but I suspect they might be linked to the payment failure.

Frontend Code Snippets #

First, the checkout script include:

<script src="https://mepspay.gateway.mastercard.com/checkout/version/61/checkout.js" data-error="errorCallback" data-cancel="cancelCallback" data-complete="https://www.oursite.com/thankyou"> </script>

Then the click handler and checkout initialization logic:

$(document).on('click', '#checkoutBtn', function(){
    event.preventDefault();
    var data = $('#checkoutForm').serialize();
    $(this).prop("disabled", true);
    $(this).html( `<span class="text-light spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Checking Out...` );
    $.ajax({
        data: data,
        url:'/shop/checkout',
        type:'post',
        success:function(resp){
            console.log(resp)
            if(resp.status == true){
                startCheckout(resp);
            } else {
                toastr.error(resp.message);
            }
        },error:function(err){
            toastr.error("Unable to process checkout. Please try again later.");
        }
    });
    return false
});

function errorCallback(error) {
    console.log(JSON.stringify(error));
}

function cancelCallback() {
    console.log('Payment cancelled');
}

function completeCallback(resultIndicator, sessionVersion) {
    console.log(resultIndicator)
}

function startCheckout(data) {
    let amount = parseFloat(data.order.grand_total);
    Checkout.configure({
        merchant: '<merchantID>',
        session: { id: data.payment.session.id },
        order: {
            amount: amount,
            currency: 'JOD',
            description: 'Warehouse Items',
            id: data.order_id
        },
        interaction: {
            operation: 'PURCHASE',
            merchant: {
                name: '<our company name>',
                address: {
                    line1: 'Amman',
                    line2: 'Jordan'
                }
            }
        }
    });
    Checkout.showLightbox();
}

Additional Context #

• The error triggers specifically when redirecting back to the payment gateway after ACS submission
• Console errors appear during the initial redirect from our site to the ACS emulator

I'm really stuck here—any ideas why the purchase isn't completing after the ACS flow, and how to resolve those console security errors?

内容的提问来源于stack exchange，提问作者Dino