PayPal Save for Purchase Later - Save cards issue

Question

I am creating a section on the checkout payment info where a customer should enter their card details so, in the case of market loss (*), we can charge him later on that card through PayPal. I am implementing this using the PayPal SDK for saving cPayPalards and charging later and I am having an issue with "createVaultSetupToken" callback. I created both the frontend and backend logic with a call to my backend to create a setup token and to PayPal API (FE code below, BE API request is just like in documentation paymnet_source with an empty card object).

createVaultSetupToken: async (data) => {
     const result = await fetch("/PayPalExtended/setup/token", { method: "POST" })
              var jsonRes = await result.json()
              const { id } = jsonRes;
              return id;
            },

This is successful with 201 Created and I get the token back I return it to the callback, and the SDK never calls OnApprove callback because I receive an error from PayPal SDK.

graphql_UpdateVaultSetupToken_error 
Object { err: "Cannot get vault - no customer id found in id token", timestamp: "1703524904796", referer: "www.sandbox.paypal.com", sdkCorrelationID: "f137663e5663e", sessionID: "sessionID", clientID: "clientID", env: "sandbox" }
card-field:40:65202

OnError callback logs this:

Something went wrong: Error: Cannot get vault - no customer id found in id token
 https://www.sandbox.paypal.com/smart/card-field?type=cvv&clientID=clientID&sessionID=sessionID&clientMetadataID=uid_a55f4eb2d9_mtc6mdm6ntu&cardFieldsSessionID=cardFieldsSessionID&env=sandbox&debug=false&locale.country=GB&locale.lang=en&sdkMeta=eyJ1cmwiOiJodHRwczovL3d3dy5wYXlwYWwuY29tL3Nkay9qcz9jbGllbnQtaWQ9QVFIR2Vna3lsX2RjRmdnVmoxODFOZG80cG5id3U1YmhwaFRyRFRKWXVpdXBHZlE2RVVvaWtWQjV3WTRJMXZzTi1VeldFVVFTNU5ubnVsNWgmY3VycmVuY3k9VVNEJmludGVudD1hdXRob3JpemUmY29tbWl0PWZhbHNlJnZhdWx0PXRydWUmZGVidWc9ZmFsc2UmY29tcG9uZW50cz1idXR0b25zLGNhcmQtZmllbGRzIiwiYXR0cnMiOnsiZGF0YS1wYXJ0bmVyLWF0dHJpYnV0aW9uLWlkIjoiTm9wQ29tbWVyY2VfUFBDUCIsImRhdGEtdWlkIjoidWlkX3pqdnRodHZsZmFxaW9udGdhcGxyeHl1bnpsemp6cyJ9fQ&disable-card=&currency=USD&intent=authorize&commit=false&vault=true&sdkCorrelationID=f137663e5663e:40

Card I used is from Card testing page for advanced checkout :

Number: 2223000048400011

date: 11/25

CCV:123

Name:  Mark Thomas

Response from API/my backend:

{
  "jsonRes ": {
    "id": "2DV308********",
    "payment_source": {
      "Card": null,
      "Token": null
    },
    "customer": {
      "id": "uCEH******"
    },
    "status": "CREATED"
  }
}

PayPal script src:

https://www.paypal.com/sdk/js?client-id=clientId&currency=USD&intent=authorize&commit=false&vault=true&debug=false&components=buttons,card-fields" data-partner-attribution-id="NopCommerce_PPCP" data-page-type="checkout" data-user-id-token="data-user-id"

No idea what is the issue, tried almost everything :) .

* Since this is a Wire payment method, it can fail or a customer can blackout the trade after some time, and we have this policy where if this happens we charge the customer for the money lost on their credit card.

Tried almost everything.

• With hardcoded card details (thought empty card was the problem)
• adding billing address with card (thought missing address was the problem for customer)
• tried different cards, names, expiry dates, ccv..
• changing paypal script src query paramaters

Answer 1

So, to answer, this script src and additional HTML tag attributes:

src="https://www.paypal.com/sdk/js?client-id=clientId&currency=USD&intent=authorize&commit=false&vault=true&debug=false&components=buttons,card-fields" data-partner-attribution-id="NopCommerce_PPCP" data-page-type="checkout" data-user-id-token="data-user-id"

Has too many extraneous things. In particular the data-user-id-token makes me suspicious there, but the intent might also be a problem for vault. In any case, seems the shorter SDK src from the documentation for Save Payment Methods will work:

https://www.paypal.com/sdk/js?components=card-fields&client-id=CLIENT-ID