Using Headless Woo commerce store api v1 in nextjs : issue faced and solutions

Must read note:
If you want only solution scroll directly to solution section

The blog is about the integrating WooCommerce Store API. Integrating it was very hard because the documentation was lacking. The documents looked simple but didn't have enough information. This blog talks about integrating WooCommerce with a Headless API for Nextjs or React applications, but it can be used for other client-side applications too.

Issue: Nonce
The first problem was I didn't know what a nonce was. WordPress uses a nonce to make requests more secure. At first, I didn't know what it was. After researching for a while, I found out it was for security purposes. The documentation said the nonce should be retrieved using a PSP code in function.pho. However, they didn’t mention the function.psb part clearly. They only provided the code to generate the token, which frustrated me because there wasn't enough information.

After deep research on how to generate the nonce, I created an endpoint to generate it. Then, I faced another issue. It wasn’t about the nonce this time; it was about something else. They were using a nonce from the cart list API, and I was shocked to find out that I had created a separate route for something already present in the cart list API.

Solution: nonce was present in cart items api

OR

Also you can create your custom route by editing in functions.php
which is located in your applied
wp-content/themes/[your_theme]/functions.php

/**********************/
// Api to generate nonce
/**********************/
function get_wc_api_nonce() {
    // Generate WooCommerce nonce
    $nonce = wp_create_nonce( 'wc_store_api' );

    // Return the nonce in a JSON response
    return rest_ensure_response( array( 'nonce' => $nonce ) );
}

add_action( 'rest_api_init', function() {
    register_rest_route( 'secure/v1', '/wc-nonce', array(
        'methods' => 'GET',
        'callback' => 'get_wc_api_nonce',
    ));
});

Issue: Cart Token
I found a problem with the user trying to add items to the cart multiple times. The user wanted the cart to merge when they logged in. They provided a workflow example, and I noticed a cart token in the response error. I decoded it and found it stored the user ID and some other minor details, but nothing important, so I ignored it.

After not finding anything helpful, I dug into the source code and implementation. After a long time, I discovered that only two headers were allowed: the cart token and nonce. I realized the cart token was used in previous issues. So, I tried using the JWT token from the response header in our application, and it worked.

If this had been mentioned in the documentation, it would have been easier for me.

Solution: First use add to cart api, get the cart-token from response header and add header Cart-token :YOUR_JWT token, to access this in client side you need to create an serverside endpoint so that you can access the Cart-token as it is not exposed for cors config., then your are go to go. Sample endpoint for nextjs

import { storeApi } from '@/lib/api';

const CART_TOKEN_HEADER_KEY = 'cart-token';

/**
 * info: this route is used to get the cart data from the store api by appending the cart token to the body
 * @param request
 * @returns
 */
export async function GET(request: Request) {
  const headers = request.headers;

  const savedCartToken = headers.get(CART_TOKEN_HEADER_KEY);

  const res = await storeApi.get('/cart', {
    headers: {
      ...(savedCartToken ? { [CART_TOKEN_HEADER_KEY]: savedCartToken } : {}),
    },
  });

  const responseData = {
    data: res.data,
    cartToken: res.headers[CART_TOKEN_HEADER_KEY],
  };

  return Response.json(responseData);
}

Docs
https://github.com/woocommerce/woocommerce/blob/trunk/plugins/woocommerce/src/StoreApi/docs/cart-tokens.md

Payment Issue

Coming soon