How to troubleshoot Checkout Branding API errors?

Shopify Plus
, ,
1

Hi all,

I’m trying to update my checkout with the checkout Branding API.

However, when I send the query to update the checkout I get an error
The query:

def q1():
     query = """
     mutation checkoutBrandingUpsert($checkoutBrandingInput: CheckoutBrandingInput!, $checkoutProfileId: ID!) {
  checkoutBrandingUpsert(checkoutBrandingInput: $checkoutBrandingInput, checkoutProfileId: $checkoutProfileId) {
    checkoutBranding {
      designSystem {
        # This property group applies to globel corner radius token values
        cornerRadius {
          small
          base
          large
        }
        colorPalette {
          # This property group applies to the body background
          #(For example, the checkout loading page or payment processing page)
          canvas {
            background
            foreground
          }
          # This property group applies to the main checkout form
          color1 {
            background
            foreground
          }
          # This property group applies to the order summary
          color2 {
            background
            foreground
          }
          # This property group applies to the primary button
          primary {
            accent
            foreground
            background
          }
          # This property group applies to the color of links and interactive components
          interactive {
            accent
            foreground
            background
          }
        }
        # This property group applies to global typography font faces, sizes, and weights
        typography {
          size {
            base
            ratio
          }
          primary {
            base {
              sources
              weight
            }
          }
          secondary {
            base {
              sources
              weight
            }
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}
     """
     
     return query

def v1():
     query = {
  "checkoutProfileId": "gid://shopify/CheckoutProfile/xxxxxx",
  "checkoutBrandingInput": {
    "designSystem": {
      "cornerRadius": {
        "large": 30
      },
      "colorPalette": {
        "canvas": {
          "background": "#FFE926",
          "foreground": "#D10088"
        },
        "color1": {
          "background": "#FFFAFD",
          "foreground": "#2E001E"
        },
        "color2": {
          "background": "#FFF5FB",
          "foreground": "#2E001E"
        },
        "primary": {
          "accent": "#1773B0",
          "background": "#FF9CDD",
          "foreground": "#2E001E"
        },
        "interactive": {
          "accent": "#D10088",
          "foreground": "#D10088",
          "background": "#FFF5FB"
        }
      },
      "typography": {
        "size": {
          "base": 16.0,
          "ratio": 1.4
        },
        "primary": {
          "shopifyFontGroup": {
            "name": "Sans-serif"
          }
        },
        "secondary": {
          "shopifyFontGroup": {
            "name": "Oswald"
          }
        }
      }
    }
  }
}
     
     return query

     
# sending GraphQL query to Shopify Admin API and returning the response
def request():
        url = 'https://xxx:yyy@myshopify.myshopify.com/admin/api/2023-04/graphql.json'
        response = requests.post(url, json={'query': q1(), 'variables': v1() })
        if response.status_code != 200:
            cf = currentframe()
            filename = getframeinfo(cf).filename
            logging.warning('Line ' + str(cf.f_lineno)  + ' in ' + filename.split('\\')[-1] + ', there is an issue with Shopify Admin GraphQL API,'   + ' status_code: ' + str(response.status_code) + ', reason: ' + response.reason)
        result = response.json()   
        print(result)
        return result

The error:

{'errors': [{'message': "CheckoutBrandingInput isn't a defined input type (on $checkoutBrandingInput)", 'locations': [{'line': 2, 'column': 38}], 'path': ['mutation checkoutBrandingUpsert'], 'extensions': {'code': 'variableRequiresValidType', 'typeName': 'CheckoutBrandingInput', 'variableName': 'checkoutBrandingInput'}}, {'message': "Field 'checkoutBrandingUpsert' doesn't exist on type 'Mutation'", 'locations': [{'line': 3, 'column': 3}], 'path': ['mutation checkoutBrandingUpsert', 'checkoutBrandingUpsert'], 'extensions': {'code': 'undefinedField', 'typeName': 'Mutation', 'fieldName': 'checkoutBrandingUpsert'}}, {'message': 'Variable $checkoutBrandingInput is declared by checkoutBrandingUpsert but not used', 'locations': [{'line': 2, 'column': 6}], 'path': ['mutation checkoutBrandingUpsert'], 'extensions': {'code': 'variableNotUsed', 'variableName': 'checkoutBrandingInput'}}, {'message': 'Variable $checkoutProfileId is declared by checkoutBrandingUpsert but not used', 'locations': [{'line': 2, 'column': 6}], 'path': ['mutation checkoutBrandingUpsert'], 'extensions': {'code': 'variableNotUsed', 'variableName': 'checkoutProfileId'}}]}

I took the example from Shopify documentation: https://shopify.dev/docs/apps/checkout/advanced-checkout-branding

Thanks for helpers

2

hello there

The error message suggests that the input type CheckoutBrandingInput is not defined, and the mutation checkoutBrandingUpsert does not exist on the type Mutation. It also mentions that the variables $checkoutBrandingInput and $checkoutProfileId are declared but not used.

This error can occur when the GraphQL query is not constructed correctly or there are typos or syntax errors in the query.

To troubleshoot this issue, I recommend checking the following:

  1. Ensure that the CheckoutBrandingInput input type and the checkoutBrandingUpsert mutation exist in the Shopify Admin GraphQL API version that you are using.

  2. Check that the query and variables are constructed correctly and match the schema of the defined input types and mutations.

  3. Double-check the syntax, including spelling and punctuation, of the query to ensure that there are no typos or syntax errors.

  4. Make sure that the variables $checkoutBrandingInput and $checkoutProfileId are being used in the query.

3

Check the API version, it should be an ‘unstable’ version, not 2023-04.