DEV Community

admond
admond

Posted on • Updated on

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

Image description

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',
    ));
});
Enter fullscreen mode Exit fullscreen mode

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.

Image description

Solution: First use add to cart api, get the cart-token from response header and add header Cart-token :YOUR_JWT token, then your are go to go

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

Payment Issue

Coming soon

Top comments (0)