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 5. Set billing address

GraphQL checkout tutorial

You must always set the billing address to place an order.

Use the setBillingAddressOnCart mutation to set a billing address. You can set the billing address in the following ways:

  • Add a new billing address
  • Add a new billing address and set it as the shipping addresses
  • Use an address from the logged-in customer’s address book

Add a new billing address

The following mutation adds a new billing address. { 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
mutation {
  setBillingAddressOnCart(
    input: {
      cart_id: "{ CART_ID }"
      billing_address: {
        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 {
      billing_address {
        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
{
  "data": {
    "setBillingAddressOnCart": {
      "cart": {
        "billing_address": {
          "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"
          }
        }
      }
    }
  }
}

Add a new address for billing and shipping

The following mutation includes the same_as_shipping attribute, which allows the same address to be used for billing and shipping.

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
mutation {
  setBillingAddressOnCart(
    input: {
      cart_id: "{ CART_ID }"
      billing_address: {
        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
          }
          same_as_shipping: true
      }
    }
  ) {
    cart {
      billing_address {
        firstname
        lastname
        company
        street
        city
        region{
          code
          label
        }
        postcode
        telephone
        country {
          code
          label
        }
      }
      shipping_addresses {
        firstname
        lastname
        company
        street
        city
        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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
  "data": {
    "setBillingAddressOnCart": {
      "cart": {
        "billing_address": {
          "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"
          }
        },
        "shipping_addresses": [
          {
            "firstname": "John",
            "lastname": "Doe",
            "company": "Company Name",
            "street": [
              "320 N Crescent Dr",
              "Beverly Hills"
            ],
            "city": "Los Angeles",
            "postcode": "90210",
            "telephone": "123-456-0000",
            "country": {
              "code": "US",
              "label": "US"
            }
          }
        ]
      }
    }
  }
}

Use an existing customer address

First, query the customer to return the 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
  "data": {
    "customer": {
      "addresses": [
        {
          "id": 2,
          "default_billing": true,
          "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
mutation {
  setBillingAddressOnCart(
    input: {
      cart_id: "{ CART_ID }"
      billing_address: {
          customer_address_id: { CUSTOMER_ADDRESS_ID }
      }
    }
  ) {
    cart {
      billing_address {
        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
{
  "data": {
    "setBillingAddressOnCart": {
      "cart": {
        "billing_address": {
          "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. Go to the Review & Payments step. The Billing Address form is populated with the address details you entered.