GraphQL checkout tutorial

Step 4. Set the shipping address

Use the setShippingAddressesOnCart mutation to set a shipping address. You can set the shipping address in the following ways:

  • Add a new shipping address
  • Assign the shipping address to be the same as the billing address
  • Use an address already defined in the logged-in customer’s address book

Create a new shipping address

The following mutation adds a shipping address to the quote.

{ CART_ID } is the unique shopping cart ID from Step 2. Create empty cart.

Request:

For logged-in customers, send the customer’s authorization token in the Authorization parameter of the header. See “Get customer authorization token” for more information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
mutation {
  setShippingAddressesOnCart(
    input: {
      cart_id: "{ CART_ID }"
      shipping_addresses: [
        {
          address: {
            firstname: "John"
            lastname: "Doe"
            company: "Company Name"
            street: ["320 N Crescent Dr", "Beverly Hills"]
            city: "Los Angeles"
            region: "CA"
            postcode: "90210"
            country_code: "US"
            telephone: "123-456-0000"
            save_in_address_book: false
          }
        }
      ]
    }
  ) {
    cart {
      shipping_addresses {
        firstname
        lastname
        company
        street
        city
        region
        postcode
        telephone
        country {
          code
          label
        }
      }
    }
  }
}

Response:

setShippingAddressesOnCart returns the new address details.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "data": {
    "setShippingAddressesOnCart": {
      "cart": {
        "shipping_addresses": [
          {
            "firstname": "John",
            "lastname": "Doe",
            "company": "Company Name",
            "street": [
              "320 N Crescent Dr",
              "Beverly Hills"
            ],
            "city": "Los Angeles",
            "region": {
              "code": "CA",
              "label": "California"
            },
            "postcode": "90210",
            "telephone": "123-456-0000",
            "country": {
              "code": "US",
              "label": "US"
            }
          }
        ]
      }
    }
  }
}

Assign the shipping address to be the same as the billing address

Add a new address for billing and shipping shows how to do this.

Use the existing customer’s address

First, query the customer to return a list of address IDs.

Request:

1
2
3
4
5
6
7
8
9
query {
  customer {
    addresses {
      id
      default_billing
      default_shipping
    }
  }
}

Response:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
  "data": {
    "customer": {
      "addresses": [
        {
          "id": 2,
          "default_billing": true,
          "default_shipping": false
        },
        {
          "id": 3,
          "default_billing": false,
          "default_shipping": false
        },
        {
          "id": 4,
          "default_billing": false,
          "default_shipping": true
        }
      ]
    }
  }
}

Set { CUSTOMER_ADDRESS_ID } to an id returned in the query.

{ CART_ID } is the unique shopping cart ID from Step 2. Create empty cart.

Request:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
mutation {
  setShippingAddressesOnCart(
    input: {
      cart_id: "{ CART_ID }"
      shipping_addresses: {
          customer_address_id: { CUSTOMER_ADDRESS_ID }
      }
    }
  ) {
    cart {
      shipping_addresses {
        firstname
        lastname
        company
        street
        city
        region {
          code
          label
        }
        postcode
        telephone
        country
        {
          code
          label
        }
      }
    }
  }
}

Response:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "data": {
    "setShippingAddressesOnCart": {
      "cart": {
        "shipping_addresses": [
          {
            "firstname": "John",
            "lastname": "Doe",
            "company": "Company Name",
            "street": [
              "320 N Crescent Dr",
              "Beverly Hills"
            ],
            "city": "Los Angeles",
            "region": {
              "code": "CA",
              "label": "California"
            },
            "postcode": "90210",
            "telephone": "123-456-0000",
            "country": {
              "code": "US",
              "label": "US"
            }
          }
        ]
      }
    }
  }
}

Verify this step

  1. Sign in as a customer to the website using the email john.doe@example.com and password b1b2b3l@w+.

  2. Go to Checkout.

  3. On the Shipping step, the Shipping Address form contains the address details you entered.