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

Question

In stripe.redirectToCheckout() we use lineItems to list which Products to render; those Products are items configured in Stripe Dashboard (in either Test mode or Production mode).

I can't seem to find a way to control the order in which products are rendered:

• No change observed if I change the order of array elements in lineItems (see screenshot).
• No obvious tool within Stripe Dashboard , to re-order products eg via a "Move up/down" or draggable card.

I thought about trying to change the order by archiving and re-creating Products, but this seems like a hack and would be unsustainable even for 2-3 Products. What do stores do when wanting to A/B test the ordering of Products, or when they have a large number of Products?

It's an awkward one to troubleshoot because "order/ordering", "arrange", "sequence" all have ambiguous meanings...!

Answer 1

The ordering/sequencing of products using lineItems array does work (see comment by @v3nkman on OP) but in my case the specific rendered page is not connected to that array on checkout.js ; it is instead governed by a GraphQL string on Products.js and I solved the issue by adding a sort field into that as follows:

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