Request For Comment: Transitioning from Checkout to Cart

[vixdug]

In 2021 Shopify released the Cart in the Storefront API. The Cart API offers several advantages:

• Scalability: It's designed to support sales of all sizes and seamlessly integrates with Bot Protection and the Queue page.
• Feature-Rich: It supports platform features such as Subscriptions, Bundles, and Discounts.
• Extensibility: It's compatible with Metafields, Runs Functions, and UI Extensions.
• No Throttle: Unlike the Checkout API, the Cart API doesn't have a hard throttle.
• Fast by Default: Deployed to the edge for fast performance as close to your buyer as possible

As of April 2024 (2024-04), the Checkout APIs (REST and Storefront API endpoints) will be marked as deprecated with an official end of life date on April 1st 2025 (2025-04). We understand that changes like this can have a significant impact on your work and we're committed to making this transition as smooth as possible.

To begin your migration, you can visit the tutorial documentation:

• https://shopify.dev/docs/custom-storefronts/building-with-the-storefront-api/cart/manage
• https://shopify.dev/docs/custom-storefronts/building-with-the-storefront-api/cart

For building Native Mobile Apps - we've released Checkout Sheet Kit in developer preview that integrate with the fully-featured web checkout, while retaining app idiomatic design. This eliminates the need to build and maintain a separate checkout but still preserves customizations and business logic.

To ensure we support all use cases of the legacy checkout mutations, we will be releasing new features to cart. We have documented these on the public roadmap.

Please let us know any feedback, we will be actively monitoring this forum!

[rommmy]

Hi there,

I'm currently in the process of migrating from the Checkout API to the Cart API.

There's one thing unclear to me, when using the Cart API, to proceed to checkout, are there any other solutions than just redirecting to a Shopify-hosted checkout page? I had a fully customized checkout experience from cart to payment with the Checkout API, but I'm unable to find equivalence with the Cart API. Where are the replacements for the checkoutShippingLineUpdate, checkoutCompleteWithTokenizedPaymentV3 mutations?

Also, previously when using the getCheckout query, we could ask for the availableShippingRates field, that we used to display a list of shipping rates that the user could select. Can we get the same behaviour with the Cart API?

Thanks!

[vixdug]

Hi @rommmy!

What type of application are you migrating to the Cart API? The Cart API does redirect to the hosted checkout page via the WebURL. If you are building a native mobile app - have you had a look at the Checkout Sheet Kit we have in dev preview? This will provide a native feeling checkout without having to fully rebuild and handle all steps.

For querying and updating the shipping options in the Cart API you can use:

• Query: cartDeliveryOptions: https://shopify.dev/docs/api/storefront/2023-10/objects/CartDeliveryGroup
• Mutation: cartSelectedDeliveryOptionsUpdate: https://shopify.dev/docs/api/storefront/2023-10/mutations/cartSelectedDeliveryOptionsUpdate

ex.

mutation cartSelectedDeliveryOptionsUpdate($cartId: ID!, $deliveryOptions: [CartDeliveryOptionInput!]!) {
  cartSelectedDeliveryOptionsUpdate(cartId: $cartId, deliveryOptions: $deliveryOptions) {
    cart {
      id
      deliveryOptions(first: 10) {
        edges {
          node {
            id
            group {
              id
              type
            }
          }
        }
      }
    }
    userErrors {
      field
      message
    }
  }
}

{
  "cartId": "Z2lkOi8vc2hvcGlmeS9DYXJ0LzEzMzU=",
  "deliveryOptions": [
    {
      "deliveryOptionId": "1234"
    }
  ]
}

[rommmy]

Hi @vixdug,

Thanks for the reply. I'm migrating a web application so unfortunately I can't use the Checkout Sheet kit. So basically in that case I have no other options than using the hosted checkout page, that's correct? no replacement is being planned for the checkoutCompleteWithTokenizedPaymentV3 mutation?

Thanks!

[vixdug]

Hi @rommmy - That is correct. For web applications, utilizing the webURL is the only option. This guarantees your checkout is compatible with all new product features that Shopify ships - including checkout extensions and functions.

[sylvaingi]

Hello @vixdug , not replacing the checkoutCompleteWithTokenizedPaymentV3 mutation effectively kills the ability of implementing a fully headless store, including the checkout experience.

Is that something only few Shopify customers actually implemented? I get that the Shopify provided checkout page is heavily optimized for conversions and brings a lot of features, but I find it a bit surprising that bringing our own checkout experience won't be allowed anymore.

[vixdug]

FYI As of 2024-07 the Cart API now supports applying a GIft Card to the cart to retain parity with the Checkout Mutations: https://shopify.dev/changelog/storefront-api-cart-now-supports-applying-gift-cards

[Mosnar]

One issue I've run into is I can't find a replacement for checkoutCompleteFree. I don't want to redirect users to the Shopify checkout in certain cases where the total would be $0 and the checkout process feels out of place. Am I missing something?

[vixdug]

Hey @Mosnar - Looking to learn a bit more about your flow. Can you let me know some details about what you are building (storefront, app, mobile app etc.) Comparing this to the standard web flow (Online Store Channel into Shopify Checkout) redirecting for a $0 item is common. I'd like to however better understand your business case so let me know.

[Mosnar]

We're embedding a Vue application on a non-Shopify-hosted website. The Vue app interacts with the Storefront API to list product samples that may or may not have a cost associated with them. We use the Cart API to handle the cart. We have the user fill out a form with contact information - when submitted, the server fetches the cart from Shopify and should either go to the Shopify hosted checkout to collect payment or simply create the checkout and mark it as paid since no payment was necessary.

[rommmy]

@Mosnar maybe you can use the draftOrderCreate (based on cart info) / draftOrderComplete mutations that will mark the order as paid through a "manual" gateway

[Mosnar]

@rommmy That's a decent work-around, but a pretty big hassle and introduces a lot of complexity & overhead. Seems like either an oversight on Shopify's side or it's something they don't want us doing anymore - either way, some official direction would be good to have on the migration guide.