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.
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);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.
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);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.