托管结帐交互页面 (Checkout.js) 的万事达卡支付网关服务 (MPGS) 问题

Posted

技术标签:

【中文标题】托管结帐交互页面 (Checkout.js) 的万事达卡支付网关服务 (MPGS) 问题【英文标题】:Master Card Payment Gateway Services (MPGS) Issue With Hosted Checkout Interaction Page (Checkout.js) 【发布时间】:2021-09-03 01:14:17 【问题描述】:

我是万事达卡支付网关服务 (MPGS) 集成的新手,并面临与万事达卡安全支付页面交互的第二步问题。

第 1 步:我使用带有 POST 方法的 Postman 使用 apiOperation 作为“CREATE_CHECKOUT_SESSION”生成了一个会话 ID。 body 是 raw => Json 如下图:

URL: https://test-gateway.mastercard.com/api/rest/version/57/merchant/1033/session

Body:
  
  "apiOperation": "CREATE_CHECKOUT_SESSION", 
  "interaction": 
      "operation": "PURCHASE"
  ,
  "order": 
      "currency": "USD",
       "id": "22541" ,
      "amount": 50
     

通过在授权部分提供我的 API 凭据,成功生成了会话 ID。现在,当我调用 checkout.js 文件与托管的结帐支付页面进行交互时,控件移动到支付网关页面但显示错误

Refused to execute script from 'https://test-gateway.mastercard.com/form/version//merchant/1033/session.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Error Message

<script type="application/javascript" src="https://test-gateway.mastercard.com/checkout/version/57/checkout.js" data-error="errorCallback" data-cancel="cancelCallback" data-complete="completeCallback"  >
            </script>
            
        <script type="application/javascript">
            function errorCallback(error) 
                  console.log(JSON.stringify(error));
            
            function cancelCallback() 
                  console.log('Payment cancelled');
            
            function completeCallback(resultIndicator, sessionVersion) 
    
            alert('success');
    console.log(resultIndicator);

            
            Checkout.configure(
                merchant: '1033',
                order: 
                    amount: function() 
                        return 50;
                    ,
                    currency: 'USD',
                    description: 'Ordered goods',
                    id: '22541'
                ,
                interaction: 
                    operation: 'PURCHASE',
                    merchant: 
                        name: 'MOFA -TEST',
                        address: 
                            line1: '200 Sample St',
                            line2: '1234 Example Town'     
                            
                    
                ,
                session: 
                      id: 'SESSION0002089703583J7873949J89'
                
                
            );
            
            Checkout.showPaymentPage();
            
        </script>

任何帮助将不胜感激。谢谢

【问题讨论】:

【参考方案1】:

万事达卡支付网关文档没有明确描述请求的参数。我发现此视频有助于使用 php curl 和 JavaScript 进行 Mastercard 托管结帐集成:

这是请求 sessionId 的代码 sn-p:

        $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 .'",
            "cancelUrl": "' . $redirectUrl . '",
        ,
        "order": 
            "currency": "USD",
             "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);

https://www.youtube.com/watch?v=jRJkfszfla0

【讨论】:

虽然此链接可能会回答问题,但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改,仅链接答案可能会失效。 - From Review

以上是关于托管结帐交互页面 (Checkout.js) 的万事达卡支付网关服务 (MPGS) 问题的主要内容,如果未能解决你的问题,请参考以下文章

使用托管结帐页面重复支付流

使用 Paypal Payflow Pro 进行快速结帐 - 托管页面

条纹结帐键盘隐藏付款按钮

paypal checkout.js 检查错误交易

PayPal Express Checkout.js - 发送自定义参数

Bluesnap 托管支付页面自定义元数据