Checkout samenvatting

Nadat de klant zijn verzend- en factuurgegevens heeft ingevoerd en verzend- en betaalmethoden heeft geselecteerd, wilt u misschien een samenvatting weergeven van alle checkout gegevens. Deze documentatie laat u zien hoe u een uitgebreide checkout samenvatting kunt ophalen met GraphQL queries, notities aan de winkelwagen kunt toevoegen en ten slotte hoe u kunt doorgaan naar het betalingsproces.

Checkout samenvatting ophalen

Het ophalen van een samenvatting van de checkout gegevens is cruciaal voor gebruikersbevestiging voordat men doorgaat met betalen. De samenvatting bevat details zoals verzend- en factuuradressen, verzend- en betaalmethoden, en eventuele klantnotities.

```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;

## Klantnotities toevoegen aan winkelwagen

Soms willen klanten specifieke notities of instructies aan hun bestellingen toevoegen. Ze willen bijvoorbeeld een voorkeurstijd voor levering aangeven, of misschien een notitie toevoegen voor het inpakken van een cadeau. Met behulp van onderstaande query kun je een notitie aan de winkelwagen toevoegen.

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;

Nadat de klant alle informatie in de checkout samenvatting heeft gecontroleerd en misschien notities heeft toegevoegd, kun je doorgaan met het accepteren van de winkelwagen als een bestelling, wat vervolgens het betalingsproces in gang zet.

Door deze GraphQL queries en mutaties te integreren in jouw maatwerk checkout proces, zorgt u voor een naadloze, gebruiksvriendelijke ervaring, tot op het punt waar de betaling wordt verwerkt.