payment process

Once all required information is added to the cart, the cart can be confirmed and transformed into an order. This can be accomplished using either a JavaScript client, as demonstrated in the code snippet below, or a GraphQL query.

Confirm cart

Using the JavaScript client, an order can be confirmed with the confirmCart method.

```js
const order = await client.confirmCart(cartId);

Alternatively, a GraphQL query can be used to confirm the cart and create the order. This approach uses the confirmCart mutation, provided by the 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);

Upon successful execution, this action will return an order object. The options property of this object contains the next steps required to proceed with the checkout process. This proceeding_step object contains another object called proceeding, which in turn contains an array of options. Among these options is a URL to which you can redirect the customer, leading them to the correct payment page for their chosen payment method.

## Handling Payment and Successful Checkout

Once payment is completed, customers are redirected to a success page. This page should display their order information and purchased items, and provide a link to return to the store. If you wish to use a custom URL for this success page, you can set a successReturnUrl during cart creation. The redirected URL will contain a search parameter with the order id as a value.

On the success page, the order can be retrieved using either the JavaScript client or a GraphQL query. Here's how you can retrieve the order using the 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);

## Handling Failed Payments

In case of payment failure, cancellation, or expiration, the customer is redirected to a failure page. This page should provide options to either select a different payment method, retry the same method, or cancel the payment process and return to the store.

For this payment page, you must fetch the required data using a GraphQL query as there is no built-in method in the client for this operation. Afosto provides a fragment, PaymentOrderFields, that you can use to retrieve all required data for creating your own payment page. See the example query below.

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

With these tools, you can effectively handle the end stages of the checkout process, ensuring a smooth experience for your customers, from selecting items to finalizing payment.