c#blazor-webassembly .net-6.0 braintree visual-studio-2022

Braintree Drop-In UI Paypal integration not loading

I have loaded the drop in UI, my auth works, the UI loads correctly, but when I click on Paypal Checkout, a new window pops up, it remains on about:blank for 5-10s and then it closes. The UI then states: ⚠ Something went wrong on our end.

In the console I get:

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

Here is the initialization config for the drop-in UI:

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

I have used known working credentials to no avail, and it still does not work, despite them being known good credentials. In digging into the requests, it seems like somewhere after the web.paypal-checkout.createPayment POST call. it sets up the billing agreement seemingly successfully, gets the ectoken, makes the UpdateClientConfig graphql call, but never makes the call out to the sandbox.paypal.com/smart/api/checkout/{{ectoken}}/appData? endpoint.

In the internal application, it seems to fail after the updateClientConfig call. It never populates the popup window, nor places the overlay. Attached are the HAR files for the internal app and the working codepen for comparison. These HAR files comprise all calls made after the Paypal gold button was clicked. I am inlining the relevant responses for redundancy.

INTERNAL—NON-WORKING SOLUTION

Analytics payload:

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

Setup billing agreement response:

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

ectoken response:

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

UpdateClientConfig graphql:

Request:

            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
}

Response:

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

WORKING CODEPEN SOLUTION