Betaalmethodes

Met de Afosto Storefront JavaScript Client kun je eenvoudig beschikbare betaalmethoden ophalen die van toepassing zijn op de huidige winkelwagen en deze toevoegen aan de winkelwagen. Deze gids leidt je stap voor stap door beide processen.

Beschikbare methoden ophalen

De betaalmethoden die beschikbaar zijn, kunnen specifiek zijn voor de huidige winkelwagen en de bijbehorende gegevens. Deze query zorgt ervoor dat je de methoden krijgt die van toepassing zijn, rekening houdend met factoren zoals prijsregels.

1import { gql } from '@afosto/graphql-client';
2
3const getCartPaymentMethodsQuery = gql`
4  query getCartPaymentMethods($id: String!) {
5    cart(id: $id) {
6      options {
7        payment {
8          methods {
9            id
10            code
11            name
12            description
13            instruction
14            issuers {
15              id
16              label
17            }
18            pricing {
19              fixed
20              percentage
21            }
22          }
23        }
24      }
25      billing {
26        payment {
27          method {
28            id
29          }
30        }
31      }
32      vat {
33        rate
34        amount
35      }
36    }
37  }
38`;
39
40export default getCartPaymentMethodsQuery;

Een betaalmethode toevoegen aan de winkelwagen

Zodra de klant een betaalmethode heeft geselecteerd, kun je deze aan de winkelwagen toevoegen met behulp van de volgende query:

1import { gql } from '@afosto/graphql-client';
2import CoreProjectionFields from './CoreProjectionFields';
3
4const addPaymentMethodToCartMutation = gql`
5  ${CoreProjectionFields}
6  mutation AddPaymentMethodToCart($payment_method_payload: AddPaymentMethodToCartInput!) {
7    addPaymentMethodToCart(input: $payment_method_payload) {
8      cart {
9        ...CoreProjectionFields
10        billing {
11          payment {
12            method {
13              id
14              code
15              name
16            }
17            issuer {
18              id
19              label
20            }
21          }
22        }
23      }
24    }
25  }
26`;
27
28const variables = {
29  paymentMethodPayload: {
30    cartId: 'my_cart_token',
31    methodId: 'selected_payment_method_id',
32  },
33};
34
35const response = await client.query(addPaymentMethodToCartMutation, variables);

Afhandeling van issuers

Sommige betaalmethoden kunnen issuers hebben. Bijvoorbeeld de methode iDEAL heeft issuers die verschillende Nederlandse banken vertegenwoordigen. De klant moet voor deze methode een bank selecteren om de transactie succesvol te laten verlopen.

De lijst met issuers is beschikbaar in de betaalmethoden die zijn opgehaald in de eerste query. Je kunt een uitgever selecteren door een issuerId toe te voegen aan de paymentMethodPayload variabele bij het uitvoeren van addPaymentMethodToCartMutation.

1const variables = {
2  paymentMethodPayload: {
3    cartId: 'my_cart_token',
4    methodId: 'selected_payment_method_id',
5    issuerId: 'selected_issuer_id',
6  },
7};

Door deze GraphQL-queries en -mutaties te integreren in je maatwerk checkout, kun je betaalmethoden effectief beheren met behulp van de Afosto Storefront JavaScript Client.