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.

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

1import StorefrontClient, { gql } from '@afosto/storefront';
2
3const client = StorefrontClient({
4  storefrontToken: 'STOREFRONT_TOKEN',
5});
6
7const query = gql`
8  mutation ConfirmCart($confirm_cart_input: ConfirmCartInput!) {
9    confirmCart(input: $confirm_cart_input) {
10      order {
11        id
12        number
13        options {
14          proceeding_step {
15            is_action_required
16            proceeding {
17              action
18              options {
19                type
20                method
21                url
22              }
23            }
24          }
25        }
26      }
27    }
28  }
29`;
30
31const params = new URL(document.location).searchParams;
32const cartId = params.get('cart_id');
33
34const variables = {
35	confirmCartInput: {
36		cartId,
37  },
38};
39
40const 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:

1const params = new URL(document.location).searchParams;
2const orderId = params.get('order_id');
3const 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 specific data from the order. You can replace this with your own fields to match your specific requirements.

1import { gql, CoreOrderFragment } from '@afosto/storefront';
2
3const params = new URL(document.location).searchParams;
4const orderId = params.get('order_id');
5
6const query = gql`
7${CoreOrderFragment}
8  query GetOrder($id: String!) {
9    order(id: $id) {
10      ...CoreOrderFragment
11    }
12  }
13`;
14
15const variables = {
16  id: orderId,
17};
18
19const 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.

1import { gql, PaymentOrderFields } from '@afosto/storefront';
2
3const params = new URL(document.location).searchParams;
4const orderId = params.get('order_id');
5
6const query = gql`
7  ${PaymentOrderFields}
8  query GetOrder($id: String!) {
9    order(id: $id) {
10      ...PaymentOrderFields
11    }
12  }
13`;
14
15const variables = {
16  id: orderId,
17};
18
19const 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.