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
-
Sign in as a customer to the website using the email
john.doe@example.comand passwordb1b2b3l@w+. -
Go to Checkout.
-
Go to the Review & Payments step. The Billing Address form is populated with the address details you entered.