This is a beta release of documentation for Magento 2.4, published for previewing soon-to-be-released functionality. Content in this version is subject to change. Links to the v2.4 code base may not properly resolve until the code is officially released.

Step 4. Set the shipping address

GraphQL checkout tutorial

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 Authorization tokens 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
41
42
43
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 {
          code
          label
        }
        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.