c# - Braintree Drop-In UI Paypal 集成未加载

Question

我已经在 UI 中加载了 drop，我的身份验证有效，UI 加载正确，但是当我点击 Paypal Checkout 时，会弹出一个新窗口，它会保持 about:blank 状态 5-10 秒，然后关闭。 UI 然后指出:⚠ 我们这边出了点问题。

在控制台中我得到:

{
country: "US"
env: "sandbox"
errtype: "[object Error]"
host: "www.sandbox.paypal.com"
lang: "en"
pageID: "cd1b0e1c50"
path: "/smart/button"
prev_corr_ids: ""
referer: "https://localhost:7244"
stack: "Error: No ack for postMessage postrobot_method in https://www.sandbox.paypal.com in 10000ms\n    at o (https://www.paypalobjects.com/api/checkout.min.js:2:134213)"
timestamp: 1649373277263
uid: {{uId}}
ver: "4.0.334"
windowID: "3a6eb34307"
}

这是嵌入式 UI 的初始化配置:

{
authorization: "*********"
container: "#braintree_container"
paypal:{
   amount: "$487.88"
   currency: "USD"
   flow: "checkout"
   }
}

我已使用已知的有效凭据无济于事，而且它仍然不起作用，尽管它们是已知的良好凭据。在深入研究请求时，它似乎在 web.paypal-checkout.createPayment POST 调用之后的某个地方。它似乎成功地设置了计费协议(protocol)，获取了 ectoken，进行了 UpdateClientConfig graphql 调用，但从未调用过 sandbox.paypal.com/smart/api/checkout/{ {ectoken}}/appData? 端点。

在内部应用中，updateClientConfig 调用后似乎失败了。它从不填充弹出窗口，也不放置覆盖层。附件是内部应用程序的 HAR 文件和用于比较的工作代码笔。这些 HAR 文件包含点击 Paypal 金币按钮后进行的所有调用。我正在内联相关的冗余响应。

内部——非工作解决方案

---

分析负载:

{
    "analytics": [
        {
            "kind": "web.dropin.selected.paypal",
            "timestamp": 1649854187
        }
    ],
    "_meta": {
        "merchantAppId": "localhost:7244",
        "platform": "web",
        "sdkVersion": "3.80.0",
        "source": "client",
        "integration": "dropin2",
        "integrationType": "dropin2",
        "sessionId": {{sId}},
        "dropinVersion": "1.31.2"
    },
    "braintreeLibraryVersion": "3.80.0",
    "authorizationFingerprint": {{token}}
}

设置结算协议(protocol)响应:

{
    "agreementSetup": {
        "tokenId": {{paymentToken}},
        "approvalUrl": "https://www.sandbox.paypal.com/agreements/approve?nolegacy=1\u0026ba_token={{paymentToken}}"
    }
}

ectoken 响应:

{
    "ack": "success",
    "data": {
        "type": "ba-token",
        "token": {{paymentToken}}
    },
    "meta": {
        "calc": "6496f6f13b1bb",
        "rlog": "rZJvnqaaQhLn%2FnmWT8cSUueWscmrtUHe5Y1Bd%2FeqyvyOTq66rSXAciiXRg7dClMl1o2iporwJbYz7mI0k8X%2B5ryRC%2FRgCX6v_18022f916a7"
    },
    "server": {{serverId}}
}

UpdateClientConfig graphql:

要求:

            mutation UpdateClientConfig(
                $paymentToken : String!,
                $fundingSource : ButtonFundingSourceType!,
                $integrationArtifact : IntegrationArtifactType!,
                $userExperienceFlow : UserExperienceFlowType!,
                $productFlow : ProductFlowType!,
                $buttonSessionID : String
            ) {
                updateClientConfig(
                    token: $paymentToken,
                    fundingSource: $fundingSource,
                    integrationArtifact: $integrationArtifact,
                    userExperienceFlow: $userExperienceFlow,
                    productFlow: $productFlow,
                    buttonSessionID: $buttonSessionID
                )
            }
        
{
  "paymentToken": {{paymentToken}},
  "fundingSource": "paypal",
  "integrationArtifact": "JS_V4",
  "userExperienceFlow": "INCONTEXT",
  "productFlow": "SMART_PAYMENT_BUTTONS",
  "buttonSessionID": null
}

响应:

{
  "data": {
    "updateClientConfig": null
  },
  "extensions": {
    "tracing": {
      "version": 1,
      "startTime": "2022-04-13T12:49:51.854Z",
      "endTime": "2022-04-13T12:49:51.938Z",
      "duration": 84116563,
      "execution": {
        "resolvers": [
          {
            "path": [
              "updateClientConfig"
            ],
            "parentType": "Mutation",
            "fieldName": "updateClientConfig",
            "returnType": "Boolean",
            "startOffset": 1044862,
            "duration": 83027846
          }
        ]
      }
    },
    "correlationId": "3535ba30e2627"
  }
}

工作 CODEPEN 解决方案

---

分析负载:

{
    "analytics": [
        {
            "kind": "web.paypal-checkout.createPayment",
            "isAsync": false,
            "timestamp": 1649854795783
        }
    ],
    "braintreeLibraryVersion": "braintree/web/3.85.3",
    "_meta": {
        "merchantAppId": "cdpn.io",
        "platform": "web",
        "sdkVersion": "3.85.3",
        "source": "client",
        "integration": "dropin2",
        "integrationType": "dropin2",
        "sessionId": {{sId}},
        "dropinVersion": "1.33.1"
    },
    "authorizationFingerprint": {{token}}
}

设置结算协议(protocol)响应:

{
    "agreementSetup": {
        "tokenId": {{paymentToken}},
        "approvalUrl": "https://www.sandbox.paypal.com/agreements/approve?nolegacy=1\u0026ba_token={{paymentToken}}"
    }
}

ectoken 响应:

{
    "ack": "success",
    "data": {
        "type": "ba-token",
        "token": {{paymentToken}}
    },
    "meta": {
        "calc": "3f508c09dd431",
        "rlog": "rZJvnqaaQhLn%2FnmWT8cSUueWscmrtUHe5Y1Bd%2FeqyvyOTq66rSXAciiXRg7dClMl1o2iporwJbYz7mI0k8X%2B5vvp6t7dnU%2B%2B_180230253f6"
    },
    "server": {{serverId}}
}

UpdateClientConfig graphql:

要求:

            mutation UpdateClientConfig(
                $paymentToken : String!,
                $fundingSource : ButtonFundingSourceType!,
                $integrationArtifact : IntegrationArtifactType!,
                $userExperienceFlow : UserExperienceFlowType!,
                $productFlow : ProductFlowType!,
                $buttonSessionID : String
            ) {
                updateClientConfig(
                    token: $paymentToken,
                    fundingSource: $fundingSource,
                    integrationArtifact: $integrationArtifact,
                    userExperienceFlow: $userExperienceFlow,
                    productFlow: $productFlow,
                    buttonSessionID: $buttonSessionID
                )
            }
        
{
  "paymentToken": {{paymentToken}},
  "fundingSource": "paypal",
  "integrationArtifact": "JS_V4",
  "userExperienceFlow": "INCONTEXT",
  "productFlow": "SMART_PAYMENT_BUTTONS",
  "buttonSessionID": null
}

响应:

{
  "data": {
    "updateClientConfig": null
  },
  "extensions": {
    "tracing": {
      "version": 1,
      "startTime": "2022-04-13T12:59:57.407Z",
      "endTime": "2022-04-13T12:59:57.491Z",
      "duration": 84834935,
      "execution": {
        "resolvers": [
          {
            "path": [
              "updateClientConfig"
            ],
            "parentType": "Mutation",
            "fieldName": "updateClientConfig",
            "returnType": "Boolean",
            "startOffset": 1231858,
            "duration": 83540568
          }
        ]
      }
    },
    "correlationId": "f6e5896873a1"
  }
}

Answer 1

对于我的具体问题，VS2022 打开一个带有默认调试开关的 chrome 窗口，这些开关会干扰 Braintree Paypal 集成的功能。具体来说，它似乎是 --disable-background-networking 开关。一旦我禁用了这个开关，Paypal 就可以正常工作了。打开一个新窗口并导航到路径或使用不同的浏览器也可以解决问题。