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
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, then your are go to go
Payment Issue
Coming soon
Top comments (0)