Payment methods

Managing payment methods is a vital aspect of the custom checkout process. With the Afosto Storefront JavaScript Client, you can easily fetch available payment methods that are applicable to a particular cart and add them to the cart as selected by the customer. This guide will walk you through both processes step-by-step.

Fetching available methods

The payment methods that are available can be specific to the current cart and its associated data. This query ensures you get the methods that are applicable, taking into account factors like pricing rules.

```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;

## Adding a payment method to the cart

Once the customer has selected a payment method, you can add it to the cart using the following 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;

## Handling issuers

Some payment methods may have issuers. For example, the Dutch iDEAL payment method has issuers representing various Dutch banks. The customer must select their preferred issuer for the transaction to proceed successfully.

The list of issuers is available in the payment methods fetched in the first query. You can select an issuer by adding an issuerId to the paymentMethodPayload variable when executing addPaymentMethodToCartMutation.

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

By integrating these GraphQL queries and mutations into your custom checkout process, you'll be able to manage payment methods effectively using the Afosto Storefront JavaScript Client.