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.

```js
import { gql } from '@afosto/graphql-client';

const getCartPaymentMethodsQuery = gql`
  query getCartPaymentMethods($id: String!) {
    cart(id: $id) {
      options {
        payment {
          methods {
            id
            code
            name
            description
            instruction
            issuers {
              id
              label
            }
            pricing {
              fixed
              percentage
            }
          }
        }
      }
      billing {
        payment {
          method {
            id
          }
        }
      }
      vat {
        rate
        amount
      }
    }
  }
`;

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

import { gql } from '@afosto/graphql-client';
import CoreProjectionFields from './CoreProjectionFields';

const addPaymentMethodToCartMutation = gql`
  ${CoreProjectionFields}
  mutation AddPaymentMethodToCart($payment_method_payload: AddPaymentMethodToCartInput!) {
    addPaymentMethodToCart(input: $payment_method_payload) {
      cart {
        ...CoreProjectionFields
        billing {
          payment {
            method {
              id
              code
              name
            }
            issuer {
              id
              label
            }
          }
        }
      }
    }
  }
`;

const variables = {
  paymentMethodPayload: {
    cartId: 'my_cart_token',
    methodId: 'selected_payment_method_id',
  },
};

const response = await client.query(addPaymentMethodToCartMutation, 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;

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

const variables = {
  paymentMethodPayload: {
    cartId: 'my_cart_token',
    methodId: 'selected_payment_method_id',
    issuerId: 'selected_issuer_id',
  },
};

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.