Skip to content

Commit

Permalink
DEVDOCS-5038:[update] add GraphQL Carts and Checkout link (#2068)
Browse files Browse the repository at this point in the history
Co-authored-by: Sarah Riehl <[email protected]>
  • Loading branch information
bc-traciporter and Sarah Riehl authored Sep 27, 2023
1 parent 711e45d commit 70880b5
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 10 deletions.
10 changes: 4 additions & 6 deletions docs/api-docs/building-checkouts/checkout-customizability.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,18 @@ BigCommerce provides significant levels of checkout customizability. If you just

The first path is to render the checkout on the BigCommerce storefront. With the storefront suite of APIs and SDKs, BigCommerce as a platform maintains responsibility for managing shopper sessions using cookies and all our standard mechanisms.

The second path is to render the checkout experience outside of the BigCommerce storefront. The Server to Server APIs are for consumption by other servers on the internet, which in turn are responsible for session management, whether that's a website running on a CMS or a native mobile app.

![Checkout options](https://raw.githubusercontent.com/bigcommerce/dev-docs/master/assets/images/checkout_options.png "Checkout options")
The second path is to render the checkout experience outside of the BigCommerce storefront. The Management APIs are for consumption by other servers on the internet, which in turn are responsible for session management, whether that's a website running on a CMS or a native mobile app.

Once a developer has chosen a path, they can choose the options they want to use to build the custom checkout. The table below provides an overview of the different options available to help developers select the one that best suits their needs.

## Checkout options

| | What is it? | When should I use it? | Where do I find it? |
|-|-|-|-|
|**Open Checkout**| Open checkout is the open-source option of BigCommerce's Optimized One-Page Checkout.<br/><br/> A browser-based application that converts a cart to an order, allowing shoppers to complete checkout.<br/><br/> Our reference implementation of checkout built on top of the Checkout JS SDK. | This option allows developers to create a custom checkout from a fully functional foundation (as a starting point for their efforts or even contribute to it).<br/> <br/>Add features or make moderate-sized changes to BigCommerce’s checkout (hosted on the BigCommerce storefront). | [Open Checkout Quick Start](/stencil-docs/customizing-checkout/open-checkout-quick-start)
|**Open Checkout**| Open checkout is the open-source option of BigCommerce's Optimized One-Page Checkout.<br/><br/> A browser-based application that converts a cart to an order, allowing shoppers to complete checkout.<br/><br/> Our reference implementation of checkout built on top of the Checkout JS SDK. | This option allows developers to create a custom checkout from a fully functional foundation (as a starting point for their efforts or even contribute to it).<br/> <br/>Add features or make moderate-sized changes to BigCommerce’s checkout (hosted on the BigCommerce storefront). | [Open Checkout Quick Start](/stencil-docs/customizing-checkout/open-checkout-quick-start) |
|**Checkout JS SDK**| A client-side vanilla JavaScript library that is a wrapper for the Storefront Checkout API.<br/><br/> The SDK handles all the API calls necessary to move shoppers through the checkout experience. From customer login, fetching shipping quotes, and payment methods through to paying an order.| This option allows developers to build a custom checkout from scratch by creating a presentation layer for checkout. Completely replacing the UI/UX without having to do the heavy lifting of dealing with Storefront API endpoints.<br/><br/> Significant front-end customizations and/or feature additions to checkout (hosted on the BigCommerce storefront).<br/><br/> **Limitations:** <ul><li> SDK does not let you introduce new behavior. While you can filter based on shipping methods, you cannot create new shipping methods or payment methods. </li> <li> Hosted forms do not work with Stencil localhost since forms are served over https and Stencil only supports http. Developers must test the order confirmation flow on Stencil using offline payment methods.</li></ul> | [Checkout SDK](/stencil-docs/customizing-checkout/checkout-sdk) |
| **Storefront Checkout API** | REST APIs to create and update a checkout and convert it to an order. <br/><br/> | This option allows developers to build a custom checkout experience (within the context of a BigCommerce storefront session) by accessing raw API request/response data.<br/><br/> These are the APIs you would typically access from your browser using JavaScript to retrieve checkout data not available through the SDK. | [Storefront Checkout API](/docs/rest-storefront/checkouts)<br/><br/> [Storefront Cart and Checkout](/api-docs/storefront/overview)|
| **Server to server Checkout API** | REST APIs to create and update a checkout and convert it to an order. | This option allows developers to build a custom checkout (outside of a BigCommerce storefront session) and use the [Payments API](/docs/rest-payments/processing) to pay for an order.<br/><br/> When used with the [Server to Server Cart API](/docs/rest-management/carts) it allows you to make modifications similar to those performed using the control panel option **Orders > Add**. These modifications include the ability to create custom products, modify prices, add custom discounts, set custom prices for shipping, etc.<br/><br/> These are the APIs that will power your headless checkout solutions on channels such as: <ul><li> Content management systems</li> <li> Native mobile apps (non-web view)</li> <li> Internet of Things (IoT) devices</li> <li> Recurring order and/or subscription apps (e.g. OrderGroove)</li></ul> <br/> **Note:** Currently, this API currently does not support using store credit or gift certificates as payment methods. | [Server to Server Checkout API](/docs/rest-storefront/checkouts) |
| **Storefront Checkout API** | GraphQL and REST APIs create and update a checkout and convert it to an order. <br/><br/> | This option allows developers to build a custom checkout experience (within the context of a BigCommerce storefront session) by accessing raw API request/response data.<br/><br/> These are the APIs you would typically access from your browser using JavaScript to retrieve checkout data not available through the SDK. | [GraphQL Storefront API: Carts and Checkout](/api-docs/storefront/graphql/carts-and-checkout)<br/><br/> [Storefront GraphQL API Reference](/graphql-storefront/reference#definition-Checkout)<br/><br/> [Storefront Checkout API](/docs/rest-storefront/checkouts)<br/><br/> [Storefront Cart and Checkout](/api-docs/storefront/overview)|
| **Management Checkout API** | REST APIs create and update a checkout and convert it to an order. | This option allows developers to build a custom checkout (outside of a BigCommerce storefront session) and use the [Payments API](/docs/rest-payments/processing) to pay for an order.<br/><br/> When used with the [Management Cart API](/docs/rest-management/carts) it allows you to make modifications similar to those performed using the control panel option **Orders > Add**. These modifications include the ability to create custom products, modify prices, add custom discounts, set custom prices for shipping, etc.<br/><br/> These are the APIs that will power your headless checkout solutions on channels such as: <ul><li> Content management systems</li> <li> Native mobile apps (non-web view)</li> <li> Internet of Things (IoT) devices</li> <li> Recurring order and/or subscription apps (e.g. OrderGroove)</li></ul> <br/> **Note:** Currently, this API currently does not support using store credit or gift certificates as payment methods. | [Management Checkout API](/docs/rest-storefront/checkouts) |

## Resources

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ keywords: graphql, carts, checkout, address, headless, currency, currencies, pay

# GraphQL Storefront API: Carts and Checkout

<Callout type="info">
While the GraphQL Storefront API is feature-complete, the carts and checkouts schemas are in **beta**. We may introduce changes without notice.
</Callout>

BigCommerce's GraphQL Storefront API provides the same access to cart and checkout objects as the REST Storefront API. Having access to cart and checkout data in the graph alongside related data makes it easier to build headless storefront applications.

Developers can use frontend GraphQL to create an end-to-end shopper experience. Cart and checkout-related mutations and queries can do the following:
Expand Down
2 changes: 2 additions & 0 deletions docs/msf/msf-api-guide.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ When your integration creates a cart or checkout, make sure it specifies the `ch

If the cart is associated with the shopper's channel and the relationship between a storefront's channel and site has been properly configured with the [Sites API](/docs/rest-management/sites#create-a-site), both [cart redirect URLs](/docs/rest-management/carts/redirects#create-cart-redirect-url) and [embedded checkout URLs](/api-docs/storefronts/embedded-checkout/embedded-checkout-overview) will refer the shopper to the correct site.

If your application interacts with shoppers, you can use the [GraphQL Storefront API: Carts and Checkout](/api-docs/storefront/graphql/carts-and-checkout) to access cart and checkout data for shoppers in real time.

## Categories

[Categories API reference documentation](/docs/rest-catalog/category-trees/categories#get-all-categories)
Expand Down

0 comments on commit 70880b5

Please sign in to comment.