GraphQL Storefront API: Carts and Checkout

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:

  • Create a cart
  • Add products to a cart
  • View or manage a cart
  • Create cart redirect URLs
  • Create cart metafields
  • Fill out checkout details
  • Determine the cost of shipping and select a shipping method
  • Complete checkout by converting a cart into an order
  • Generate a payment access token

Limitations As of this writing, the GraphQL Storefront API does not support the following features:

  • File upload product options
  • Buy Online, Pick up in Store
  • Checkout directly from the Product Details Page, or Buy Now carts

Tokens

To make requests, create a store-level API account with one or more of the following token creation OAuth scopes:

  • Storefront API Tokens
  • Storefront API Customer Impersonation Tokens

No additional scopes are required to use the GraphQL Storefront API.

To generate a bearer token to authenticate calls to the GraphQL Storefront API, use either the Create a storefront token or the Create a customer impersonation token REST endpoint. On a Stencil storefront, you can also access a token at render time using a Handlebars property. Learn more about Authenticating requests to the GraphQL Storefront API.

For more information, see Creating a token in Authenticating requests to the GraphQL Storefront API and dynamic tokens in the Authentication and example requests article.

Handling payments

To handle payments, use the Payments API (Overview).

For PCI compliance-related reasons, the GraphQL Storefront API does not handle payments. You can use the Payments API (Reference) to process payments.

The GraphQL Storefront API returns the checkout ID and order ID, which you can use to Get accepted payment methods and Create a payment access token.

The GraphQL Storefront API returns the customer ID, which you can use to Get stored payment instruments. To learn more about authenticating REST endpoints, locate the Authentication section at the top of each endpoint, then click Show Details.

Gift certificates are a type of payment instrument similar to a debit card, so the Payments API must apply the gift certificate to the checkout.

The API account you use to process payments must have the scopes specified in the Payments API Overview.

Example queries and mutations

Create a cart using a simple product

Example mutation: Create a cart (simple)
1# Creates a new cart, adding a simple product.
2# In the GraphQL Playground, this will fail if you already have a cart.
3
4mutation createCartSimple($createCartInput: CreateCartInput!) {
5 cart {
6 createCart(input: $createCartInput) {
7 cart {
8 entityId
9 lineItems {
10 physicalItems {
11 name
12 quantity
13 }
14 digitalItems {
15 name
16 quantity
17 }
18 giftCertificates {
19 name
20 }
21 customItems {
22 name
23 quantity
24 }
25 }
26 }
27 }
28 }
29}
GraphQL variables
1{
2 "createCartInput": {
3 "lineItems": [
4 {
5 "quantity": 1,
6 "productEntityId": 111
7 }
8 ]
9 }
10}

Get a cart

If using the getCart query with customer impersonation tokens, you must include the cart’s entityId.

Example query: Get a cart
1query getCart {
2 site {
3 cart {
4 entityId
5 currencyCode
6 isTaxIncluded
7 baseAmount {
8 currencyCode
9 value
10 }
11 discountedAmount {
12 currencyCode
13 value
14 }
15 amount {
16 currencyCode
17 value
18 }
19 discounts {
20 entityId
21 discountedAmount {
22 currencyCode
23 value
24 }
25 }
26 lineItems {
27 physicalItems {
28 entityId
29 parentEntityId
30 variantEntityId
31 productEntityId
32 sku
33 name
34 path
35 imageUrl
36 brand
37 quantity
38 isTaxable
39 discounts {
40 entityId
41 discountedAmount {
42 currencyCode
43 value
44 }
45 }
46 discountedAmount {
47 currencyCode
48 value
49 }
50 couponAmount {
51 currencyCode
52 value
53 }
54 listPrice {
55 currencyCode
56 value
57 }
58 originalPrice {
59 currencyCode
60 value
61 }
62 salePrice {
63 currencyCode
64 value
65 }
66 extendedListPrice {
67 currencyCode
68 value
69 }
70 extendedSalePrice {
71 currencyCode
72 value
73 }
74 isShippingRequired
75 selectedOptions {
76 entityId
77 name
78 ... on CartSelectedCheckboxOption {
79 value
80 valueEntityId
81 }
82 ... on CartSelectedDateFieldOption {
83 date {
84 utc
85 }
86 }
87 ... on CartSelectedFileUploadOption {
88 fileName
89 }
90 ... on CartSelectedMultiLineTextFieldOption {
91 text
92 }
93 ... on CartSelectedMultipleChoiceOption {
94 value
95 valueEntityId
96 }
97 ... on CartSelectedNumberFieldOption {
98 number
99 }
100 ... on CartSelectedTextFieldOption {
101 text
102 }
103 }
104 giftWrapping {
105 name
106 amount {
107 currencyCode
108 value
109 }
110 message
111 }
112 }
113 digitalItems {
114 entityId
115 parentEntityId
116 variantEntityId
117 productEntityId
118 sku
119 name
120 path
121 imageUrl
122 brand
123 quantity
124 isTaxable
125 discounts {
126 entityId
127 discountedAmount {
128 currencyCode
129 value
130 }
131 }
132 discountedAmount {
133 currencyCode
134 value
135 }
136 couponAmount {
137 currencyCode
138 value
139 }
140 listPrice {
141 currencyCode
142 value
143 }
144 originalPrice {
145 currencyCode
146 value
147 }
148 salePrice {
149 currencyCode
150 value
151 }
152 extendedListPrice {
153 currencyCode
154 value
155 }
156 extendedSalePrice {
157 currencyCode
158 value
159 }
160 selectedOptions {
161 entityId
162 name
163 ... on CartSelectedCheckboxOption {
164 value
165 valueEntityId
166 }
167 ... on CartSelectedDateFieldOption {
168 date {
169 utc
170 }
171 }
172 ... on CartSelectedFileUploadOption {
173 fileName
174 }
175 ... on CartSelectedMultiLineTextFieldOption {
176 text
177 }
178 ... on CartSelectedMultipleChoiceOption {
179 value
180 valueEntityId
181 }
182 ... on CartSelectedNumberFieldOption {
183 number
184 }
185 ... on CartSelectedTextFieldOption {
186 text
187 }
188 }
189 }
190 giftCertificates {
191 entityId
192 name
193 theme
194 amount {
195 currencyCode
196 value
197 }
198 isTaxable
199 sender {
200 name
201 email
202 }
203 recipient {
204 name
205 email
206 }
207 message
208 }
209 customItems {
210 entityId
211 sku
212 name
213 quantity
214 listPrice {
215 currencyCode
216 value
217 }
218 extendedListPrice {
219 currencyCode
220 value
221 }
222 }
223 totalQuantity
224 }
225 createdAt {
226 utc
227 }
228 updatedAt {
229 utc
230 }
231 locale
232 }
233 }
234}

Add cart line items

Example mutation: Add cart line items
1# Adds another line item.
2# Add the cart ID to the GraphQL variables, or the mutation will fail.
3mutation addCartLineItems($addCartLineItemsInput: AddCartLineItemsInput!) {
4 cart {
5 addCartLineItems(input: $addCartLineItemsInput) {
6 cart {
7 entityId
8 }
9 }
10 }
11}
GraphQL variables
1{
2 "addCartLineItemsInput": {
3 "cartEntityId": "bb916deb-ddd6-4586-b65b-b8385e0e7a9d",
4 "data": {
5 "lineItems": [
6 {
7 "quantity": 1,
8 "productEntityId": 107
9 }
10 ]
11 }
12 }
13}

Create a cart redirect URL

You can use a cart redirect URL for embedded checkouts or to redirect your
checkout. You need a cartEntity ID. To create a cartEntity ID, use the
create a cart mutation.

Example mutation: Create cart redirect URL
1mutation{
2 cart {
3 createCartRedirectUrls(input:{
4 cartEntityId: "dc5e7b24-0047-4b3e-b16b-2cdc90943b86"}) {
5 redirectUrls{
6 embeddedCheckoutUrl
7 redirectedCheckoutUrl
8 }
9 }
10
11 }
12}

Create cart metafield

The current platform limit is 250 metafields for a single cart. When you create metafields using the createCartMetafield mutation, the default namespace is bc_storefront.

Example mutation: Create cart metafield
1mutation createCartMetafield {
2
3cart {
4 createCartMetafield(input:{
5 cartEntityId: "9f3ffbd5-0066-4854-9e95-5bf30bfbcc87"
6 data: {
7 key: "color"
8 value: "blue"
9 }
10 }) {
11 metafield {
12 id
13 entityId
14 key
15 value
16 }
17 errors {
18 ...on Error {
19 message
20 }
21 }
22 }
23}
24}

Delete cart

Example mutation: Delete cart
1# Delete your cart in the GraphQL Playground, which will enable you to create a new cart.
2# Add the cart ID to the GraphQL variables, or the mutation will fail.
3
4mutation deleteCart($deleteCartInput: DeleteCartInput!) {
5 cart {
6 deleteCart(input: $deleteCartInput) {
7 deletedCartEntityId
8 }
9 }
10}
GraphQL variables
1{
2 "deleteCartInput": {
3 "cartEntityId": "bb916deb-ddd6-4586-b65b-b8385e0e7a9d"
4 }
5}

Get Checkout

Example query: Get checkout
1query getCheckout {
2 site {
3 checkout {
4 entityId
5 billingAddress {
6 ...CheckoutBillingAddressFields
7 }
8 shippingConsignments {
9 ...CheckoutShippingConsignmentFields
10 }
11 order {
12 entityId
13 }
14 shippingCostTotal {
15 ...MoneyFields
16 }
17 giftWrappingCostTotal {
18 ...MoneyFields
19 }
20 handlingCostTotal {
21 ...MoneyFields
22 }
23 taxTotal {
24 ...MoneyFields
25 }
26 taxes {
27 ...CheckoutTaxFields
28 }
29 subtotal {
30 ...MoneyFields
31 }
32 grandTotal {
33 ...MoneyFields
34 }
35 createdAt {
36 utc
37 }
38 updatedAt {
39 utc
40 }
41 customerMessage
42 outstandingBalance {
43 ...MoneyFields
44 }
45 coupons {
46 ...CheckoutCouponFields
47 }
48 promotions {
49 ...CheckoutPromotionFields
50 }
51 }
52 }
53}
54
55fragment CheckoutConsignmentAddressFields on CheckoutConsignmentAddress {
56 ...CheckoutAddressFields
57}
58
59fragment CheckoutBillingAddressFields on CheckoutBillingAddress {
60 entityId
61 ...CheckoutAddressFields
62}
63
64fragment CheckoutAddressFields on CheckoutAddress {
65 firstName
66 lastName
67 email
68 company
69 address1
70 address2
71 city
72 stateOrProvince
73 stateOrProvinceCode
74 countryCode
75 postalCode
76 phone
77 customFields {
78 entityId
79 ... on CheckoutAddressCheckboxesCustomField {
80 valueEntityIds
81 }
82 ... on CheckoutAddressDateCustomField {
83 date {
84 utc
85 }
86 }
87 ... on CheckoutAddressMultipleChoiceCustomField {
88 valueEntityId
89 }
90 ... on CheckoutAddressNumberCustomField {
91 number
92 }
93 ... on CheckoutAddressPasswordCustomField {
94 password
95 }
96 ... on CheckoutAddressTextFieldCustomField {
97 text
98 }
99 }
100}
101
102fragment CheckoutShippingConsignmentFields on CheckoutShippingConsignment {
103 entityId
104 address {
105 ...CheckoutConsignmentAddressFields
106 }
107 availableShippingOptions {
108 ...CheckoutAvailableShippingOptionFields
109 }
110 selectedShippingOption {
111 ...CheckoutSelectedShippingOptionFields
112 }
113 coupons {
114 ...CheckoutCouponFields
115 }
116 shippingCost {
117 ...MoneyFields
118 }
119 handlingCost {
120 ...MoneyFields
121 }
122 lineItemIds
123}
124
125fragment CheckoutAvailableShippingOptionFields on CheckoutAvailableShippingOption {
126 entityId
127 description
128 type
129 imageUrl
130 cost {
131 ...MoneyFields
132 }
133 transitTime
134 isRecommended
135}
136
137fragment CheckoutSelectedShippingOptionFields on CheckoutSelectedShippingOption {
138 entityId
139 description
140 type
141 imageUrl
142 cost {
143 ...MoneyFields
144 }
145 transitTime
146}
147
148fragment MoneyFields on Money {
149 value
150 currencyCode
151}
152
153fragment CheckoutCouponFields on CheckoutCoupon {
154 entityId
155 code
156 couponType
157 discountedAmount {
158 ...MoneyFields
159 }
160}
161
162fragment CheckoutTaxFields on CheckoutTax {
163 name
164 amount {
165 ...MoneyFields
166 }
167}
168
169fragment CheckoutPromotionFields on CheckoutPromotion {
170 banners {
171 entityId
172 type
173 locations
174 text
175 }
176}

Add checkout billing address

Example mutation: Add checkout billing address
1mutation addCheckoutBillingAddress($addCheckoutBillingAddressInput: AddCheckoutBillingAddressInput!) {
2 checkout {
3 addCheckoutBillingAddress(input: $addCheckoutBillingAddressInput) {
4 checkout {
5 entityId
6 }
7 }
8 }
9}
GraphQL variables
1{
2 "addCheckoutBillingAddressInput": {
3 "checkoutEntityId": "812ece1a-da23-46eb-ab6b-c2ee210aae54",
4 "data": {
5 "address": {
6 "firstName": "Joe",
7 "lastName": "Blogs",
8 "email": "joe@example.com",
9 "company": "BlogIndustries",
10 "address1": "123 Yar st",
11 "address2": "",
12 "city": "RWC",
13 "stateOrProvince": "CA",
14 "stateOrProvinceCode": "CA",
15 "countryCode": "US",
16 "postalCode": "94061",
17 "phone": "6501231212",
18 "shouldSaveAddress": false
19 }
20 }
21 }
22}

Add a checkout shipping consignment

Example mutation: Add a checkout shipping consignment
1mutation addCheckoutShippingConsignments($addCheckoutShippingConsignmentsInput: AddCheckoutShippingConsignmentsInput!) {
2 checkout {
3 addCheckoutShippingConsignments(input: $addCheckoutShippingConsignmentsInput) {
4 checkout {
5 entityId
6 shippingConsignments {
7 entityId
8 availableShippingOptions {
9 entityId
10 }
11 selectedShippingOption {
12 entityId
13 }
14 }
15 }
16 }
17 }
18}
GraphQL variables
1{
2 "addCheckoutShippingConsignmentsInput": {
3 "checkoutEntityId": "812ece1a-da23-46eb-ab6b-c2ee210aae54",
4 "data": {
5 "consignments": [
6 {
7 "address": {
8 "firstName": "Joe",
9 "lastName": "Blogs",
10 "email": "joe@example.com",
11 "company": "BlogIndustries",
12 "address1": "123 Yar st",
13 "city": "RWC",
14 "stateOrProvince": "CA",
15 "stateOrProvinceCode": "CA",
16 "countryCode": "US",
17 "postalCode": "94061",
18 "phone": "6501231212",
19 "shouldSaveAddress": false
20 },
21 "lineItems": [
22 {
23 "lineItemEntityId": "0a281902-d548-4d2e-a930-dc2aae9bfc39",
24 "quantity": 1
25 }
26 ]
27 }
28 ]
29 }
30 }
31}

Select checkout shipping option

Example mutation: Select checkout shipping option
1 mutation selectCheckoutShippingOption($selectCheckoutShippingOptionInput: SelectCheckoutShippingOptionInput!) {
2 checkout {
3 selectCheckoutShippingOption(input: $selectCheckoutShippingOptionInput) {
4 checkout {
5 entityId
6 }
7 }
8 }
9 }
GraphQL variables
1 {
2 "selectCheckoutShippingOptionInput": {
3 "checkoutEntityId": "acd6f2ca-85c1-4b5f-8dab-d7d80521ecc5",
4 "consignmentEntityId": "6478ff925d33a",
5 "data": {
6 "shippingOptionEntityId": "9ba45e71fe66e1cd757f022dcae331b0"
7 }
8 }
9 }

Complete checkout

Example mutation: Complete checkout
1 mutation completeCheckout($completeCheckoutInput: CompleteCheckoutInput!) {
2 checkout {
3 completeCheckout(input:$completeCheckoutInput) {
4 orderEntityId
5 paymentAccessToken
6 }
7 }
8 }
GraphQL variables
1{
2 "completeCheckoutInput": {
3 "checkoutEntityId": "812ece1a-da23-46eb-ab6b-c2ee210aae54"
4 }
5}

Giving feedback

We invite you to give feedback on the GraphQL Storefront schema and the capabilities of the API to let us know if it meets your needs. In particular, we want to know about anything that seems confusing, or anything that you think is missing. We want to ensure that this API meets your needs, and we’re open to adding features.

Join our Developer Community to share your feedback with us in the BigCommerceDevs Slack or on our Discord server.

Resources

Articles

API reference

Storefront tokens

Payments API

REST Management API: Customers

Community