无法在 Commerce JS 上“捕获订单”答案

【问题标题】：Cannot 'CAPTURE ORDER' on Commerce JS无法在 Commerce JS 上“捕获订单”
【发布时间】：2021-06-01 22:00:36
【问题描述】：

我一直在尝试使用 Commerce JS 构建电子商务网站。我被困在“捕获订单”阶段。这是我发送给 Commerce JS 以捕获的 orderData 代码，但它返回错误代码 401 和 422。第一个错误是：

{
    "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"
    }
}

现在，如果我没有提供 API 密钥，那我怎么能使用 Commerce JS 的其他功能。

第二个错误是： “找不到订单项 ID”，相反，订单项 ID 存在于每个项目中，并且由 Commmerce.js 自己维护，我可以在控制台中看到订单项 ID。

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
    }
}

【问题讨论】：

标签： javascript e-commerce commerce commerce.js

【解决方案1】：

您没有在这里展示任何实际使用 Commerce.js 的代码。您的第一个问题只是在构建 Commerce.js 时没有将您的 API 密钥提供给它：

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

const commerce = new Commerce('put_your_api_key_here');

您可能在此处使用了环境变量，并且该环境变量可能未正确加载。在这种情况下，请确保您项目中的 .env 文件位于项目根文件夹（与 package.json 相同的级别）中，并且它具有正确定义的环境变量，如您的代码所引用。

关于第二个错误，您与我们分享的与此错误相关的代码是line_items : checkoutToken.live.line_items。看起来您正在将您的订单项列表直接从 the live object 传递到捕获方法中。这不提供the way Commerce.js expects it 中的信息。

这就是您的line_items 对象的样子：

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

quantity 参数是可选的，如果您未提供它，它将使用您的订单项的存储数量（查看您的结帐令牌以了解数量是多少 - 默认情况下为 1）。 variants 也是可选的。如果您的产品没有变体，或者您之前使用过“检查变体”帮助程序，那么您可能不需要提供此信息。不过，如果可以的话，最好还是提供这些信息以便清楚。

【讨论】：

【解决方案2】：

检查您的 PaymentForm.jsx 组件并检查 orderData 对象，然后检查 shipping 和 => street.shippingdata。{此处的名称必须与 AddressForm.jsx 中地址表单名称上的名称相同}

【讨论】：