Cannot 'CAPTURE ORDER' on Commerce JS

Question

I've been trying to build an Ecommerce website using Commerce JS. I'm stuck at 'Capturing Order' phase. Here is my orderData code that I'm sending to Commerce JS to capture, but it returns an error code of 401 & 422. 1st error is this:

{
    "status_code": 401,
    "error": {
        "message": "You did not provide an API key. You need to provide your API key in the X-Authorization header (e.g. 'X-Authorization: YOUR_API_KEY').",
        "type": "authentication_error"
    }
}

Now if I've not provided API key then how am I able to use other functions of Commerce JS.

2nd error is: 'Line item ID not found', on the contrary line item ID is present with each item and it is maintained by Commmerce.js itself, I can see the line item ID in my console.

line_items : checkoutToken.live.line_items,
customer: {
    firstname : shippingData.firstName,
    lastname: shippingData.lastName,
    email: shippingData.email
},
shipping: {
    name :"Primary",
    street: shippingData.address1,
    town_city: shippingData.city,
    county_state: shippingData.shippingSubdivision,
    postal_zip_code: shippingData.zip,
    country: shippingData.shippingCountry
},
fulfillment: {
    shipping_method: shippingData.shippingOption
},
billing:{
    "name": "John Doe",
    "street": "234 Fake St",
    "town_city": "San Francisco",
    "county_state": "US-CA",
    "postal_zip_code": "94103",
    "country": "US"
},
payment : {
    gateway: 'stripe',
    stripe: {
        payment_method_id: paymentMethod.id
    }
}

Answer 1

You haven't shown any code that actually uses Commerce.js here. Your first problem is simply that your API key is not being provided to Commerce.js when you construct it:

import { Commerce } from '@chec/commerce.js';

const commerce = new Commerce('put_your_api_key_here');

It's likely that you're using an environment variable here, and it's possible that the environment variable isn't being loaded correctly. In this case please ensure that the .env file in your project is in the project root folder (same level as package.json), and that it has the environment variable defined correctly as referenced by your code.

Regarding the second error, the code you've shared with us that relates to this error is line_items : checkoutToken.live.line_items. It looks like you are passing your line items list directly from the live object into the capture method. This does not provide the information in the way Commerce.js expects it.

This is what your line_items object should look like:

commerce.checkout.capture('chkt_ABC123', {
  line_items: {
    item_7RyWOwmK5nEa2V: {
      quantity: 1,
      variants: {
        vgrp_p6dP5g0M4ln7kA: 'optn_DeN1ql93doz3ym',
      }
    }
  },
  ...

The quantity argument is optional, and will use your line item's stored quantity if you don't provided it (see your checkout token to find out what the quantity is - it's 1 by default). variants is also optional. If your product has no variants, or you've previously used the "check variant" helper, then you may not need to provide this. Nevertheless it's always good to provide this information for clarity if you can.

Answer 2

Check your PaymentForm.jsx component and check the the orderData object, then check shipping and => street.shippingdata.{the name here must be equal to that on the name of the address form in the AddressForm.jsx }

Answer 3

Not sure if you have figured it out eventually. I had the same issues as well.

1nd problem: API key not provided.

From what I have gathered this happens when you rush through your checkout before the checkout token was loaded from the API. You can console.log the checkoutToken to see if when it was loaded.

If you use TypeScript, you will also get an "Object is possibly undefined" - error at the line_items

So you need to make sure that the checkout token has loaded before submitting the order.

2nd problem

This is what worked for me:

 const orderData = {
    line_items: checkoutToken.live.line_items,
  };

Than passing orderData along with the other checkoutData to commerce.js like this:

  const order = await commerce.checkout.capture(checkoutToken.id, {
    orderData,
    checkoutToken,
    payment,
    customer,
    billing_details,
  });

Answer 4

In my case this works I know it's not the solution but as if process.env.API_KEY is not working so i did this,

import { Commerce } from '@chec/commerce.js';

const commerce = new Commerce('api_key');