javascript - 如何确定出现在 Stripe 结帐中的产品的顺序/顺序

Question

我们stripe.redirectToCheckout()用来lineItems列出要呈现的产品；这些产品是在 Stripe Dashboard 中配置的项目（在测试模式或生产模式下）。

我似乎找不到控制产品呈现顺序的方法：

• 如果我更改数组元素的顺序（lineItems请参见屏幕截图），则没有观察到任何变化。
• Stripe Dashboard中没有明显的工具来重新订购产品，例如通过“上移/下移”或可拖动卡片。

我曾考虑尝试通过归档和重新创建产品来更改订单，但这似乎是一种 hack，即使对于 2-3 个产品也是不可持续的。当想要对产品的订购进行 A/B 测试时，或者当他们有大量产品时，商店会怎么做？

排错很麻烦，因为“order/ordering”、“arrange”、“sequence”都有不明确的含义……！

标签： javascriptstripe-paymentse-commerceaws-amplify

Answer 1

使用lineItems数组对产品进行排序/排序确实有效（请参阅@v3nkman 对 OP 的评论），但在我的情况下，特定呈现的页面未连接到该数组checkout.js；相反，它由一个 GraphQL 字符串控制Products.js，我通过在其中添加一个sort字段解决了这个问题，如下所示：

const Products = () => {
  return (
    <StaticQuery
      query={graphql`
        query ProductPrices {
          prices: allStripePrice(
            filter: { active: { eq: true } }
            sort: { fields: [created], order: ASC } // new line
          ) {
            edges {
              node {
                id
                active
                currency
                unit_amount
                product {
                  id
                  name
                  images
                  description
                }
              }
            }
          }
        }
      `}
      render={({ prices }) => {
        // Group prices by product
        const products = {}
        for (const { node: price } of prices.edges) {
          const product = price.product
          if (!products[product.id]) {
            products[product.id] = product
            products[product.id].prices = []
          }
          products[product.id].prices.push(price)
        }
        return (
          <div style={containerStyles}>
            {Object.keys(products).map(key => (
              <ProductCard key={products[key].id} product={products[key]} />
            ))}
          </div>
        )
      }}
    />
  )
}