CyberSource集成中提交3D Secure挑战表单后出现黑屏问题

我正在集成CyberSource的EMV 3-D Secure认证，收到PENDING_AUTHENTICATION响应后，尝试将用户重定向到ACS（Access Control Server）URL完成3D Secure挑战，但遇到了黑屏问题。

请求示例 #

{  
  "clientReferenceInformation": {    
    "code": "TC50171_100"  
  },  
  "processingInformation": {    
    "actionList": [      
      "CONSUMER_AUTHENTICATION"    
    ]  
  },  
  "paymentInformation": {    
    "card": {      
      "number": "4000000000001091",      
      "expirationMonth": "12",      
      "expirationYear": "2030"    
    }  
  },  
  "orderInformation": {    
    "amountDetails": {      
      "totalAmount": "173.00",      
      "currency": "AED"    
    },    
    "billTo": {      
      "firstName": "John",      
      "lastName": "Smith",      
      "address1": "201 S. Division St._1",      
      "address2": "Suite 500",      
      "locality": "Foster City",      
      "administrativeArea": "Dubai",      
      "postalCode": "94404",      
      "country": "AE",      
      "email": "accept@cybersource.com",      
      "phoneNumber": "6504327113"    
    }  
  },  
  "deviceInformation": {    
    "httpAcceptBrowserValue": "application/json",    
    "httpAcceptContent": "application/json",    
    "httpBrowserLanguage": "en-US",    
    "httpBrowserJavaEnabled": false,    
    "httpBrowserColorDepth": "24",    
    "httpBrowserScreenHeight": "480",    
    "httpBrowserScreenWidth": "640",    
    "httpBrowserTimeDifference": "+330",    
    "userAgentBrowserValue": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36"  
  },  
  "consumerAuthenticationInformation": {    
    "authenticationType" : "02",    
    "challengeCode" : "03",    
    "deviceChannel": "Browser",        
    "returnUrl" : "https://eoa0rrziqlx17zs.m.pipedream.net/"  
  }
}

响应示例 #

{  
  "clientReferenceInformation": {    
    "code": "TC50171_100"  
  },  
  "consumerAuthenticationInformation": {    
    "challengeRequired": "N",    
    "authenticationTransactionId": "Yg3A0FBpJUvxwmuz1Tk0",    
    "strongAuthentication": {      
      "OutageExemptionIndicator": "0"    
    },    
    "token": "AxjzbwSTiQgQxbPcfvX3AEIBT34iyLJPEB8OUQk12tJMvRjUBcBAPAAA+wRt",    
    "acsUrl": "https://0merchantacsstag.cardinalcommerce.com/MerchantACSWeb/creq.jsp",    
    "acsReferenceNumber": "Cardinal ACS",    
    "stepUpUrl": "https://centinelapistag.cardinalcommerce.com/V2/Cruise/StepUp",    
    "pareq": "eyJtZXNzYWdlVHlwZSI6IkNSZXEiLCJtZXNzYWdlVmVyc2lvbiI6IjIuMS4wIiwidGhyZWVEU1NlcnZlclRyYW5zSUQiOiJjNjY4NmU3MS0zNmFkLTQ1MTQtYWNiMC0wMzBhMDk3MjU3NzMiLCJhY3NUcmFuc0lEIjoiOWI0NjU1ZDUtNjU2My00YjdhLTgxYjYtYWExYWQwZTVmNmQ3IiwiY2hhbGxlbmdlV2luZG93U2l6ZSI6IjAyIn0",    
    "directoryServerTransactionId": "342aaf9a-508a-4ac7-bf65-942bf88f82da",    
    "veresEnrolled": "Y",    
    "threeDSServerTransactionId": "c6686e71-36ad-4514-acb0-030a09725773",    
    "acsOperatorID": "MerchantACS",    
    "specificationVersion": "2.1.0",    
    "acsTransactionId": "9b4655d5-6563-4b7a-81b6-aa1ad0e5f6d7"  
  },  
  "errorInformation": {    
    "reason": "CONSUMER_AUTHENTICATION_REQUIRED",    
    "message": "The cardholder is enrolled in Payer Authentication. Please authenticate the cardholder before continuing with the transaction."  
  },  
  "id": "7250151602696073704951",  
  "paymentInformation": {    
    "card": {      
      "bin": "400000",      
      "type": "VISA"    
    }  
  },  
  "status": "PENDING_AUTHENTICATION",  
  "submitTimeUtc": "2024-08-30T10:52:40Z"
}

挑战提交表单 #

<div id="threedsChallengeRedirect" xmlns="http://www.w3.org/1999/html" style=" height: 100vh">    
  <form id ="threedsChallengeRedirectForm" method="POST" action="https://0merchantacsstag.cardinalcommerce.com/MerchantACSWeb/creq.jsp">        
    <input type="hidden" name="creq" value="eyJtZXNzYWdlVHlwZSI6IkNSZXEiLCJtZXNzYWdlVmVyc2lvbiI6IjIuMS4wIiwidGhyZWVEU1NlcnZlclRyYW5zSUQiOiJlMGI3YzFlNS1jNTBmLTRiMTEtYmIyNC02Y2M2NDU1NTdhOTEiLCJhY3NUcmFuc0lEIjoiZTJjNDM1NTktZWMwYS00MTNiLTk0OGQtMjY4ZWQzZWY4N2Y5IiwiY2hhbGxlbmdlV2luZG93U2l6ZSI6IjAyIn0" />        
    <input type="hidden" name="TermUrl" value="https://eoa0rrziqlx17zs.m.pipedream.net"/>    
  </form>    
  <script id="authenticate-payer-script"> 
    var e=document.getElementById("threedsChallengeRedirectForm"); 
    if (e) { 
      e.submit(); 
      if (e.parentNode !== null) { 
        e.parentNode.removeChild(e); 
      } 
    } 
  </script> 
</div>

问题描述 #

提交表单后未加载挑战界面，反而出现黑屏。表单看似提交成功，但无任何内容显示，需要解决此问题以确保挑战界面正常渲染。

附加背景 #

• 沙箱环境测试
• creq值为响应中的pareq值，已正确生成
• TermUrl为挑战完成后处理响应的端点

解决建议 #

• 调整表单提交逻辑：移除代码中的e.parentNode.removeChild(e);，避免在提交后立即删除页面容器，保留ACS返回内容的挂载节点。
• 验证请求参数与地址：确认acsUrl是沙箱环境的正确地址，检查creq参数完整无篡改，TermUrl可正常访问且支持POST请求。
• 排查浏览器端错误：打开浏览器开发者工具，查看控制台是否有JS报错、网络请求失败（如跨域、资源加载异常）等情况。
• 适配3DS版本规范：响应中specificationVersion为2.1.0，确保表单参数符合3DS 2.1规范，比如参数名拼写、格式是否正确。
• 手动测试ACS请求：将creq和TermUrl作为参数手动POST到acsUrl，验证是否能正常返回挑战界面，排查是否为前端提交逻辑问题。

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