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.

```js
const 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.

import StorefrontClient, { gql } from '@afosto/storefront';

const client = StorefrontClient({
  storefrontToken: 'STOREFRONT_TOKEN',
});

const query = gql`
  mutation ConfirmCart($confirm_cart_input: ConfirmCartInput!) {
    confirmCart(input: $confirm_cart_input) {
      order {
        id
        number
        options {
          proceeding_step {
            is_action_required
            proceeding {
              action
              options {
                type
                method
                url
              }
            }
          }
        }
      }
    }
  }
`;

const params = new URL(document.location).searchParams;
const cartId = params.get('cart_id');

const variables = {
  confirmCartInput: {
    cartId,
  },
};

const 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:

const params = new URL(document.location).searchParams;
const orderId = params.get('order_id');
const 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 spec](https://github.com/afosto/storefront/blob/main/src/fragments/CoreOrderFragment.ts)ific data from the order. You can replace this with your own fields to match your specific requirements.

import { gql, CoreOrderFragment } from '@afosto/storefront';

const params = new URL(document.location).searchParams;
const orderId = params.get('order_id');

const query = gql`
${CoreOrderFragment}
  query GetOrder($id: String!) {
    order(id: $id) {
      ...CoreOrderFragment
    }
  }
`;

const variables = {
  id: orderId,
};

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

import { gql, PaymentOrderFields } from '@afosto/storefront';

const params = new URL(document.location).searchParams;
const orderId = params.get('order_id');

const query = gql`
  ${PaymentOrderFields}
  query GetOrder($id: String!) {
    order(id: $id) {
      ...PaymentOrderFields
    }
  }
`;

const variables = {
  id: orderId,
};

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