Checkout summary
After the customer has entered their shipping and billing information, selected shipping and payment methods, you might want to display a summary of all the checkout data. This documentation will show you how to fetch a comprehensive checkout summary using GraphQL queries, add notes to the cart, and finally how to proceed to the payment process.
Fetching checkout summary
Retrieving a summary of the checkout data is crucial for user confirmation before proceeding to payment. The summary includes details like shipping and billing addresses, shipping and payment methods, and any customer notes.
1import { gql } from '@afosto/graphql-client';
2import { CoreAddressFields, CoreProjectionFields } from '../fragments';
3
4const getCheckoutSummaryQuery = gql`
5 ${CoreAddressFields}
6 ${CoreProjectionFields}
7 query getCheckoutSummary($id: String!) {
8 cart(id: $id) {
9 ...CoreProjectionFields
10 items {
11 sku
12 quantity
13 total
14 image
15 label
16 }
17 customer {
18 notes
19 }
20 checkout {
21 url
22 }
23 delivery {
24 address {
25 ...CoreAddressFields
26 options {
27 format {
28 address
29 }
30 }
31 }
32 method {
33 id
34 name
35 carrier
36 pricing {
37 fixed
38 percentage
39 }
40 }
41 pickup_point {
42 name
43 address {
44 ...CoreAddressFields
45 options {
46 format {
47 address
48 }
49 }
50 }
51 }
52 }
53 billing {
54 address {
55 ...CoreAddressFields
56 options {
57 format {
58 address
59 }
60 }
61 }
62 payment {
63 method {
64 name
65 code
66 pricing {
67 fixed
68 percentage
69 }
70 }
71 issuer {
72 id
73 label
74 }
75 }
76 }
77 fees {
78 shipping {
79 total
80 vat {
81 rate
82 amount
83 }
84 }
85 payment {
86 total
87 vat {
88 rate
89 amount
90 }
91 }
92 }
93 }
94 }
95`;
96
97const variables = {
98 id: 'my_cart_token',
99};
100
101const response = await client.query(getCheckoutSummaryQuery, variables);Adding Customer Notes to Cart
Sometimes customers may want to add specific notes or instructions to their orders. For instance, they might want to specify a preferred delivery time, or maybe add a note for gift wrapping.
1import { gql } from '@afosto/graphql-client';
2import { CoreProjectionFields } from '../fragments';
3
4const addNoteToCartMutation = gql`
5 ${CoreProjectionFields}
6 mutation AddNoteToCartMutation($note_payload: SetNoteOnCartInput!) {
7 setNoteToCart(input: $note_payload) {
8 cart {
9 customer {
10 notes
11 }
12 ...CoreProjectionFields
13 }
14 }
15 }
16`;
17
18const variables = {
19 notePayload: {
20 cartId: 'my_cart_token',
21 note: 'Customer note',
22 },
23}
24
25const response = await client.query(addNoteToCartMutation, variables);Once the customer has reviewed all the information in the checkout summary and maybe added notes, you can proceed to accept the cart as an order, which then initiates the payment process.
By integrating these GraphQL queries and mutations into your custom checkout process, you allow for a seamless, user-friendly experience, right up to the point where payment is processed.