Braintree Drop-In UI Paypal 集成未加载

Question

我已经在 UI 中加载了 drop，我的身份验证有效，UI 加载正确，但是当我点击 Paypal Checkout 时，会弹出一个新的 window，它仍然存在在 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: "7.88"
   currency: "USD"
   flow: "checkout"
   }
}

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

在内部应用程序中，调用updateClientConfig 后似乎失败了。它从不填充弹出窗口 window，也不会放置叠加层。附件是内部应用程序的 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}}
}

设置结算协议响应：

{
    "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}}
}

设置结算协议响应：

{
    "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 window 带有默认调试开关的干扰 Braintree Paypal 集成的功能。具体来说，它似乎是 --disable-background-networking 开关。一旦我禁用了这个开关，Paypal 就可以正常工作了。打开一个新的 window 并导航到路径或使用不同的浏览器也可以解决问题。

Braintree Drop-In UI Paypal 集成未加载

Braintree Drop-In UI Paypal integration not loading

c#

braintree

blazor-webassembly

.net-6.0

visual-studio-2022