Betaal proces

Na het toevoegen van alle benodigde informatie aan de winkelwagen, kan de winkelwagen worden bevestigd en omgezet in een bestelling. Dit kan worden gedaan met behulp van een JavaScript-client, zoals getoond in de onderstaande codefragment, of een GraphQL-query.

Winkelwagen bevestigen

Met de JavaScript-client kan een bestelling worden bevestigd met de methode confirmCart.

1const order = await client.confirmCart(cartId);

Als alternatief kan een GraphQL-query worden gebruikt om de winkelwagen te bevestigen en de bestelling te creëren. Deze aanpak maakt gebruik van de confirmCart mutatie, die beschikbaar is in de Afosto GraphQL API.

1import StorefrontClient, { gql } from '@afosto/storefront';
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});
6
7const query = gql`
8  mutation ConfirmCart($confirm_cart_input: ConfirmCartInput!) {
9    confirmCart(input: $confirm_cart_input) {
10      order {
11        id
12        number
13        options {
14          proceeding_step {
15            is_action_required
16            proceeding {
17              action
18              options {
19                type
20                method
21                url
22              }
23            }
24          }
25        }
26      }
27    }
28  }
29`;
30
31const params = new URL(document.location).searchParams;
32const cartId = params.get('cart_id');
33
34const variables = {
35  confirmCartInput: {
36    cartId,
37  },
38};
39
40const response = await client.query(query, variables);

Na succesvolle uitvoering geeft deze actie een order object terug. De options eigenschap van dit object bevat de volgende stappen die nodig zijn om door te gaan met het afrekenproces. Dit proceeding_step object bevat een ander object genaamd proceeding, dat op zijn beurt een array options bevat. Onder deze opties is een URL waarheen je de klant kunt omleiden, waardoor ze naar de juiste betaalpagina voor hun gekozen betaalmethode gaan.

Betaling afhandelen en succesvol afrekenen

Nadat de betaling is voltooid, worden klanten omgeleid naar een succespagina. Deze pagina moet hun bestelinformatie en gekochte items tonen, en een link bieden om terug te keren naar de winkel. Als je een aangepaste URL wilt gebruiken voor deze succespagina, kun je tijdens het aanmaken van de winkelwagen een successReturnUrl instellen. De omgeleide URL bevat een zoekparameter met het order-id als waarde.

Op de succespagina kan de bestelling worden opgehaald met behulp van de JavaScript-client of een GraphQL-query. Zo haal je de bestelling op met de JavaScript-client:

1const params = new URL(document.location).searchParams;
2const orderId = params.get('order_id');
3const order = await client.getOrder(orderId);

Alternatively, you can retrieve the order using a GraphQL query. This approach leverages a GraphQL fragment provided by Afosto, CoreOrderFragment, to select specific data from the order. You can replace this with your own fields to match your specific requirements.

1import { gql, CoreOrderFragment } from '@afosto/storefront';
2
3const params = new URL(document.location).searchParams;
4const orderId = params.get('order_id');
5
6const query = gql`
7${CoreOrderFragment}
8  query GetOrder($id: String!) {
9    order(id: $id) {
10      ...CoreOrderFragment
11    }
12  }
13`;
14
15const variables = {
16  id: orderId,
17};
18
19const response = await client.query(query, variables);

Bij mislukte betalingen

In geval van een mislukte betaling, annulering of verloop wordt de klant omgeleid naar een foutpagina. Deze pagina moet opties bieden om ofwel een andere betaalmethode te kiezen, dezelfde methode opnieuw te proberen, of het betalingsproces te annuleren en terug te keren naar de winkel.

Voor deze betaalpagina moet je de benodigde gegevens ophalen met behulp van een GraphQL-query, aangezien er geen ingebouwde methode in de client is voor deze bewerking. Afosto biedt een fragment, PaymentOrderFields, dat je kunt gebruiken om alle benodigde gegevens op te halen voor het maken van je eigen betaalpagina. Zie de voorbeeldquery hieronder.

1import { gql, PaymentOrderFields } from '@afosto/storefront';
2
3const params = new URL(document.location).searchParams;
4const orderId = params.get('order_id');
5
6const query = gql`
7  ${PaymentOrderFields}
8  query GetOrder($id: String!) {
9    order(id: $id) {
10      ...PaymentOrderFields
11    }
12  }
13`;
14
15const variables = {
16  id: orderId,
17};
18
19const response = await client.query(query, variables);

Met deze tools kun je effectief de laatste stappen van het afrekenproces beheren, zodat je klanten een soepele ervaring hebben, van het selecteren van artikelen tot het afronden van de betaling.