GraphQL checkout tutorial

Step 9. Set the payment method

You must always set a payment method.

Use the following cart query to determine which payment methods which are available for your order.

{ CART_ID } is the unique shopping cart ID from Step 2. Create empty cart.

Request

For logged-in customers, send the customer’s authorization token in the Authorization parameter of the header. See “Get customer authorization token” for more information.

1
2
3
4
5
6
7
8
query {
  cart(cart_id: "{ CART_ID }") {
    available_payment_methods {
      code
      title
    }
  }
}

Response

1
2
3
4
5
6
7
8
9
10
11
12
{
  "data": {
    "cart": {
      "available_payment_methods": [
        {
          "code": "checkmo",
          "title": "Check / Money order"
        }
      ]
    }
  }
}

There are two mutation queries in GraphQl which can be use to set the payment method for your order:

Mutation Description
setPaymentMethodOnCart Sets the payment method for your order
setPaymentMethodAndPlaceOrder Sets the payment method and then immediately places your order. In this case “Step 10. Place the order” can be skipped

Set payment method on cart

Use the setPaymentMethodOnCart mutation to set the payment method for your order. The value checkmo (“Check / Money order” payment method code) was returned in the query.

Request

For logged-in customers, send the customer’s authorization token in the Authorization parameter of the header. See “Get customer authorization token” for more information.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
mutation {
  setPaymentMethodOnCart(input: {
      cart_id: "{ CART_ID }"
      payment_method: {
          code: "checkmo"
      }
  }) {
    cart {
      selected_payment_method {
        code
      }
    }
  }
}

Response

If the operation is successful, the response contains the code of the selected payment method.

1
2
3
4
5
6
7
8
9
10
11
{
  "data": {
    "setPaymentMethodOnCart": {
      "cart": {
        "selected_payment_method": {
          "code": "checkmo"
        }
      }
    }
  }
}

Set payment method and place order

Use the setPaymentMethodAndPlaceOrder mutation to set the payment method and place the order.

Request

1
2
3
4
5
6
7
8
9
10
11
12
mutation {
  setPaymentMethodAndPlaceOrder(input: {
      cart_id: "{ CART_ID }"
      payment_method: {
          code: "checkmo"
      }
  }) {
    order {
      order_id
    }
  }
}

Response

If the operation is successful, the response contains the order ID.

1
2
3
4
5
6
7
8
9
{
  "data": {
    "setPaymentMethodAndPlaceOrder": {
      "order": {
        "order_id": "000000001"
      }
    }
  }
}

Verify this step

  1. Sign in as a customer to the website using the email john.doe@example.com and password b1b2b3l@w+.

  2. Go to Checkout.

  3. The selected payment method is displayed in the Payment Method section on the Review & Payments step.