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 |
Deprecated 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.
The setPaymentMethodAndPlaceOrder
mutation has been deprecated.
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
-
Sign in as a customer to the website using the email
john.doe@example.com
and passwordb1b2b3l@w+
. -
Go to Checkout.
-
The selected payment method is displayed in the Payment Method section on the Review & Payments step.