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.

```js|getCheckoutSummaryQuery.js
import { gql } from '@afosto/graphql-client';
import { CoreAddressFields, CoreProjectionFields } from '../fragments';

const getCheckoutSummaryQuery = gql`
  ${CoreAddressFields}
  ${CoreProjectionFields}
  query getCheckoutSummary($id: String!) {
    cart(id: $id) {
      ...CoreProjectionFields
      items {
        sku
        quantity
        total
        image
        label
      }
      customer {
        notes
      }
      checkout {
        url
      }
      delivery {
        address {
          ...CoreAddressFields
          options {
            format {
              address
            }
          }
        }
        method {
          id
          name
          carrier
          pricing {
            fixed
            percentage
          }
        }
        pickup_point {
          name
          address {
            ...CoreAddressFields
            options {
              format {
                address
              }
            }
          }
        }
      }
      billing {
        address {
          ...CoreAddressFields
          options {
            format {
              address
            }
          }
        }
        payment {
          method {
            name
            code
            pricing {
              fixed
              percentage
            }
          }
          issuer {
            id
            label
          }
        }
      }
      fees {
        shipping {
          total
          vat {
            rate
            amount
          }
        }
        payment {
          total
          vat {
            rate
            amount
          }
        }
      }
    }
  }
`;

const variables = {
  id: 'my_cart_token',
};

const response = await client.query(getCheckoutSummaryQuery, variables);

import { gql } from '@afosto/graphql-client';

const CoreAddressFields = gql`
  fragment CoreAddressFields on Address {
    country_code
    administrative_area
    locality
    postal_code
    address_line_1
    address_line_2
    thoroughfare
    premise_number
    premise_number_suffix
    given_name
    additional_name
    family_name
    organisation
  }
`;

export default CoreAddressFields;

import { gql } from '@afosto/graphql-client';

const CoreProjectionFields = gql`
  fragment CoreProjectionFields on Cart {
    id
    adjustments {
      description
      amount
      is_discount
      is_percentage
      outcome {
        amount
      }
    }
    items {
      ids
      brand
      mpn
      gtin
      sku
      quantity
      subtotal
      total
      image
      label
      details {
        pricing {
          amount
        }
        meta_data
      }
      vat {
        rate
        amount
      }
    }
    currency
    is_including_vat
    is_vat_shifted
    subtotal
    total
    total_excluding_vat
    fees {
      shipping {
        description
        total
        vat {
          rate
          amount
        }
      }
      payment {
        description
        total
        vat {
          rate
          amount
        }
      }
    }
    vat {
      rate
      amount
    }
  }
`;

export default CoreProjectionFields;

## 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.

import { gql } from '@afosto/graphql-client';
import { CoreProjectionFields } from '../fragments';

const addNoteToCartMutation = gql`
  ${CoreProjectionFields}
  mutation AddNoteToCartMutation($note_payload: SetNoteOnCartInput!) {
    setNoteToCart(input: $note_payload) {
      cart {
        customer {
          notes
        }
        ...CoreProjectionFields
      }
    }
  }
`;

const variables = {
  notePayload: {
    cartId: 'my_cart_token',
    note: 'Customer note',
  },
}

const response = await client.query(addNoteToCartMutation, variables);

import { gql } from '@afosto/graphql-client';

const CoreProjectionFields = gql`
  fragment CoreProjectionFields on Cart {
    id
    adjustments {
      description
      amount
      is_discount
      is_percentage
      outcome {
        amount
      }
    }
    items {
      ids
      brand
      mpn
      gtin
      sku
      quantity
      subtotal
      total
      image
      label
      details {
        pricing {
          amount
        }
        meta_data
      }
      vat {
        rate
        amount
      }
    }
    currency
    is_including_vat
    is_vat_shifted
    subtotal
    total
    total_excluding_vat
    fees {
      shipping {
        description
        total
        vat {
          rate
          amount
        }
      }
      payment {
        description
        total
        vat {
          rate
          amount
        }
      }
    }
    vat {
      rate
      amount
    }
  }
`;

export default CoreProjectionFields;

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.