The Payment 'applicationId' option is not in the correct format error

Hello Square community,

I recently encountered this issue when trying to load the web payment sdk on our frontend app (using vue.js). I followed instructions here for going to production: Take a Card Payment

We were able to successfully take payments from this API (2019-03-13) version which I realized is way behind. Then we tried 2023-12-13 version, and this is where we are getting the The Payment 'applicationId' option is not in the correct format. error.

This is how we are loading the web payment

    async loadCard() {
      this.card = null;
      console.log("app id", this.appId);
      const payments = Square.payments(this.appId, this.locationId);
      try {
        this.card = await payments.card();
        this.isCardInitialized = true;
        await this.card.attach("#card-container");
      } catch (e) {
        this.notifyVue("Initializing Card failed", e, "error");
        return;
      }
    },

I also made sure i am using the production version of the squarecdn which is: https://web.squarecdn.com/v1/square.js

I logged the application id which starts with sqOidp-..., and i am getting correct value in the console. I am not really sure what I am missing here, any help is appreciated! Let me know if you need me to provide more details. thank you!

:wave: I’m Square Dev AI, here to help answer your question!
Based on the information you’ve provided, the following documentation will help answer your question:

Additional Documentation

Web Payments SDK Requirements
Payment APIs
Online Payment Solutions

If this documentation helped you find a solution, please check the box indicating that this reply solves the problem.
Otherwise one of our Developer Advocates will provide additional assistance shortly.

I also tried to follow this tutorial because maybe something is wrong with my FE app.

But I was also getting the same error

  const appId = 'sqOidp-vcTR1zol-NGRtvVZog5bAQ';
  const locationId = 'L8G189XWVE0W3';

Are you able to get the form to load with versions from 2020 or 2021? Wondering if we can try to identify which version it actually broke at? :slightly_smiling_face:

1 Like