diff --git a/_data/toc/graphql.yml b/_data/toc/graphql.yml index b7d72938b43..a6ecc40ba6c 100644 --- a/_data/toc/graphql.yml +++ b/_data/toc/graphql.yml @@ -49,7 +49,7 @@ pages: children: - label: CMS endpoint url: /graphql/reference/cms.html - + - label: CustomAttributeMetadata endpoint url: /graphql/reference/custom-attribute-metadata.html @@ -143,6 +143,10 @@ pages: - label: Wishlist endpoint url: /graphql/reference/wishlist.html - + + - label: Tutorial + class: tutorial + url: /graphql/tutorials/checkout/index.html + - label: Release Notes - url: /graphql/release-notes.html \ No newline at end of file + url: /graphql/release-notes.html diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-add-product-to-cart.md b/guides/v2.3/graphql/tutorials/checkout/checkout-add-product-to-cart.md new file mode 100644 index 00000000000..446e35618af --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-add-product-to-cart.md @@ -0,0 +1,149 @@ +--- +layout: tutorial +group: graphql +title: Step 3. Add products to the cart +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 30 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +GraphQL supports [two types of product]({{ page.baseurl }}/graphql/reference/product-interface-implementations.html) which can be added into shopping cart: + + * simple product + * virtual product + +{:.bs-callout .bs-callout-info} +If you add a product to the shopping cart as a registered customer, be sure to send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more details. + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +## Add a simple product into the shopping cart + +The following mutation adds a **simple product** into shopping cart. + +**Request** + +```text +mutation { + addSimpleProductsToCart( + input: { + cart_id: "{ CART_ID }" + cart_items: [ + { + data: { + quantity: 1 + sku: "simple-product" + } + } + ] + } + ) { + cart { + items { + id + product { + sku + stock_status + } + quantity + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "addSimpleProductsToCart": { + "cart": { + "items": [ + { + "id": "508", + "product": { + "sku": "simple-product", + "stock_status": "IN_STOCK" + }, + "quantity": 1 + } + ] + } + } + } +} +``` + +## Add a virtual product into the shopping cart + +The following mutation adds a **virtual product** into shopping cart. + +**Request** + +```text +mutation { + addVirtualProductsToCart( + input: { + cart_id: "{ CART_ID }" + cart_items: [ + { + data: { + quantity: 1 + sku: "virtual-product" + } + } + ] + } + ) { + cart { + items { + id + product { + sku + stock_status + } + quantity + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "addVirtualProductsToCart": { + "cart": { + "items": [ + { + "id": "509", + "product": { + "sku": "virtual-product", + "stock_status": "IN_STOCK" + }, + "quantity": 1 + } + ] + } + } + } +} +``` + +Use the `updateCartItems` mutation to update shopping cart items and `removeItemFromCart` to remove a product from the shopping cart. + +## Verify this step {#verify-step} + +1. Sign in as a customer to the website using the email `john.doe@example.com` and password `b1b2b3l@w+`. + +2. Go to the shopping cart. All the items you added are displayed. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-billing-address.md b/guides/v2.3/graphql/tutorials/checkout/checkout-billing-address.md new file mode 100644 index 00000000000..99175ca4a3e --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-billing-address.md @@ -0,0 +1,324 @@ +--- +layout: tutorial +group: graphql +title: Step 5. Set billing address +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 50 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +{:.bs-callout .bs-callout-tip} +You must always set the billing address to place an order. + +Use the [setBillingAddressOnCart]({{ page.baseurl }}/graphql/reference/quote-set-billing-address.html) mutation to set a billing address. You can set the billing address in the following ways: + +* Add a new billing address +* Add a new billing address and set it as the shipping addresses +* Use an address from the logged-in customer's address book + +## Add a new billing address + +The following mutation adds a new billing address. `{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +**Request** + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +```text +mutation { + setBillingAddressOnCart( + input: { + cart_id: "{ CART_ID }" + billing_address: { + address: { + firstname: "John" + lastname: "Doe" + company: "Company Name" + street: ["320 N Crescent Dr", "Beverly Hills"] + city: "Los Angeles" + region: "CA" + postcode: "90210" + country_code: "US" + telephone: "123-456-0000" + save_in_address_book: false + } + } + } + ) { + cart { + billing_address { + firstname + lastname + company + street + city + postcode + telephone + country { + code + label + } + address_type + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "setBillingAddressOnCart": { + "cart": { + "billing_address": { + "firstname": "John", + "lastname": "Doe", + "company": "Company Name", + "street": [ + "320 N Crescent Dr", + "Beverly Hills" + ], + "city": "Los Angeles", + "postcode": "90210", + "telephone": "123-456-0000", + "country": { + "code": "US", + "label": "US" + }, + "address_type": "BILLING" + } + } + } + } +} +``` + +## Add a new address for billing and shipping + +The following mutation includes the `use_for_shipping` attribute, which allows the same address to be used for billing and shipping. + +**Request** + +```text +mutation { + setBillingAddressOnCart( + input: { + cart_id: "{ CART_ID }" + billing_address: { + address: { + firstname: "John" + lastname: "Doe" + company: "Company Name" + street: ["320 N Crescent Dr", "Beverly Hills"] + city: "Los Angeles" + region: "CA" + postcode: "90210" + country_code: "US" + telephone: "123-456-0000" + save_in_address_book: false + } + use_for_shipping: true + } + } + ) { + cart { + billing_address { + firstname + lastname + company + street + city + postcode + telephone + country { + code + label + } + address_type + } + shipping_addresses { + firstname + lastname + company + street + city + postcode + telephone + country { + code + label + } + address_type + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "setBillingAddressOnCart": { + "cart": { + "billing_address": { + "firstname": "John", + "lastname": "Doe", + "company": "Company Name", + "street": [ + "320 N Crescent Dr", + "Beverly Hills" + ], + "city": "Los Angeles", + "postcode": "90210", + "telephone": "123-456-0000", + "country": { + "code": "US", + "label": "US" + }, + "address_type": "BILLING" + }, + "shipping_addresses": [ + { + "firstname": "John", + "lastname": "Doe", + "company": "Company Name", + "street": [ + "320 N Crescent Dr", + "Beverly Hills" + ], + "city": "Los Angeles", + "postcode": "90210", + "telephone": "123-456-0000", + "country": { + "code": "US", + "label": "US" + }, + "address_type": "SHIPPING" + } + ] + } + } + } +} +``` + +## Use an existing customer address + +First, query the customer to return the list of address IDs. + +**Request** + +```text +query { + customer { + addresses { + id + default_billing + default_shipping + } + } +} +``` + +**Response** + +```text + "data": { + "customer": { + "addresses": [ + { + "id": 2, + "default_billing": true, + "default_shipping": true + } + ] + } + } +} +``` + +Set `{ CUSTOMER_ADDRESS_ID }` to an `id` returned in the query. + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +**Request** + +```text +mutation { + setBillingAddressOnCart( + input: { + cart_id: "{ CART_ID }" + billing_address: { + customer_address_id: { CUSTOMER_ADDRESS_ID } + } + } + ) { + cart { + billing_address { + firstname + lastname + company + street + city + postcode + telephone + country { + code + label + } + address_type + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "setBillingAddressOnCart": { + "cart": { + "billing_address": { + "firstname": "John", + "lastname": "Doe", + "company": "Company Name", + "street": [ + "320 N Crescent Dr", + "Beverly Hills" + ], + "city": "Los Angeles", + "postcode": "90210", + "telephone": "123-456-0000", + "country": { + "code": "US", + "label": "US" + }, + "address_type": "BILLING" + } + } + } + } +} +``` + +## Verify this step {#verify-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. Go to the Review & Payments step. The Billing Address form is populated with the address details you entered. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-coupon.md b/guides/v2.3/graphql/tutorials/checkout/checkout-coupon.md new file mode 100644 index 00000000000..c2d4b645f1a --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-coupon.md @@ -0,0 +1,102 @@ +--- +layout: tutorial +group: graphql +title: Step 8. Apply a coupon +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 80 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +Use [applyCouponToCart]({{ page.baseurl }}/graphql/reference/quote-apply-coupon.html) to apply a discount coupon to the the specified `cart_id`. + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +`{ COUPON_CODE }` is an existing Magento coupon code. It cannot be generated with GraphQL. + +**Request** + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +```text +mutation { + applyCouponToCart( + input: { + cart_id: "{ CART_ID }" + coupon_code: "{ COUPON_CODE }" + } + ) { + cart { + applied_coupon { + code + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "applyCouponToCart": { + "cart": { + "applied_coupon": { + "code": "{ COUPON_CODE }" + } + } + } + } +} +``` + +Use [removeCouponFromCart]({{ page.baseurl }}/graphql/reference/quote-remove-coupon.html) to remove a discount coupon from the shopping cart. + +**Request** + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +```text +mutation { + removeCouponFromCart(input: { cart_id: "{ CART_ID }" }) { + cart { + applied_coupon { + code + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "removeCouponFromCart": { + "cart": { + "applied_coupon": { + "applied_coupon": null + } + } + } + } +} +``` + +## Verify this step {#verify-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 discount is displayed in the Order Summary block. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-customer.md b/guides/v2.3/graphql/tutorials/checkout/checkout-customer.md new file mode 100644 index 00000000000..f902cc7f66b --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-customer.md @@ -0,0 +1,99 @@ +--- +layout: tutorial +group: graphql +title: Step 1. Create a customer +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 10 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +Customers can make purchases in two ways: + +* As a logged-in user +* As a guest user who does not create an account + +To place order as a new customer, use the `createCustomer` mutation to register the new customer account in the store. + +{:.bs-callout .bs-callout-info} +Skip this step if you want to place order as a guest user. + +**Request** + +```text +mutation { + createCustomer( + input: { + firstname: "John" + lastname: "Doe" + email: "john.doe@example.com" + password: "b1b2b3l@w+" + is_subscribed: true + } + ) { + customer { + id + firstname + lastname + email + is_subscribed + } + } +} +``` + +**Response** + +```json +{ + "data": { + "createCustomer": { + "customer": { + "id": 6, + "firstname": "John", + "lastname": "Doe", + "email": "john.doe@example.com", + "is_subscribed": true + } + } + } +} +``` + +["Customer endpoint"]({{ page.baseurl }}/graphql/reference/customer.html#create-a-customer) describes additional `createCustomer` parameters. + +To place an order as a new customer, you must get the customer's authorization token. Use the `generateCustomerToken` mutation for that. + +**Request** + +```text +mutation { + generateCustomerToken(email: "john.doe@example.com", password: "b1b2b3l@w+") { + token + } +} +``` + +**Response** + +```json +{ + "data": { + "generateCustomerToken": { + "token": "zuo7zor5jfldft2nmu2gtylnm8ui7e8t" + } + } +} +``` + +["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) describes the mutation further. + +## Verify this step {#verify-step} + +Sign in as a customer to the website using the email `john.doe@example.com` and password `b1b2b3l@w+`. You should be successfully logged in. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-payment-method.md b/guides/v2.3/graphql/tutorials/checkout/checkout-payment-method.md new file mode 100644 index 00000000000..e67aa0e02d4 --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-payment-method.md @@ -0,0 +1,105 @@ +--- +layout: tutorial +group: graphql +title: Step 7. Set the payment method +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 70 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +{:.bs-callout .bs-callout-tip} +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]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +**Request** + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +```text +query { + cart(cart_id: "{ CART_ID }") { + available_payment_methods { + code + title + } + } +} +``` + +**Response** + +```json +{ + "data": { + "cart": { + "available_payment_methods": [ + { + "code": "checkmo", + "title": "Check / Money order" + } + ] + } + } +} +``` + +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** + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +```text +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. + +```json +{ + "data": { + "setPaymentMethodOnCart": { + "cart": { + "selected_payment_method": { + "code": "checkmo" + } + } + } + } +} +``` + +## Verify this step {#verify-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. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-place-order.md b/guides/v2.3/graphql/tutorials/checkout/checkout-place-order.md new file mode 100644 index 00000000000..28363ca8088 --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-place-order.md @@ -0,0 +1,54 @@ +--- +layout: tutorial +group: graphql +title: Step 10. Place order +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 100 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +The `placeOrder` mutation places an order. + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +**Request** + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +```text +mutation { + placeOrder(input: {cart_id: "{ CART_ID }"}) { + order { + order_id + } + } +} +``` + +**Response** + +```json +{ + "data": { + "placeOrder": { + "order": { + "order_id": "000000001" + } + } + } +} +``` + +## Verify this step {#verify-step} + +1. Sign in as a customer to the website using the email `john.doe@example.com` and password `b1b2b3l@w+`. + +2. Go to **My Account** > **My Orders**. The order you created is displayed. The order is also displayed on the Orders grid (**Sales** > **Orders** in the Magento Admin. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-quote-email.md b/guides/v2.3/graphql/tutorials/checkout/checkout-quote-email.md new file mode 100644 index 00000000000..3f3e6413035 --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-quote-email.md @@ -0,0 +1,55 @@ +--- +layout: tutorial +group: graphql +title: Step 9. Set email on the cart (guest customers only) +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 90 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +{:.bs-callout .bs-callout-tip} +Skip this step if you placed the order as a registered customer. + +If you place an order as a guest user, you must set a quote email address. Use the `setGuestEmailOnCart` mutation query for that. + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +**Request** + +```text +mutation { + setGuestEmailOnCart(input: { + cart_id: "{ CART_ID }" + email: "guest@example.com" + }) { + cart { + email + } + } +} +``` + +**Response** + +```json +{ + "data": { + "setGuestEmailOnCart": { + "cart": { + "email": "guest@example.com" + } + } + } +} +``` + +## Verify this step {#verify-step} + +There are no additional verification steps. `quote`.`customer_email` is displayed for administrator on back-end side. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-address.md b/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-address.md new file mode 100644 index 00000000000..a463b19edc1 --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-address.md @@ -0,0 +1,249 @@ +--- +layout: tutorial +group: graphql +title: Step 4. Set the shipping address +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 40 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +Use the [setShippingAddressesOnCart]({{ page.baseurl }}/graphql/reference/quote-shipping-method.html) mutation to set a shipping address. You can set the shipping address in the following ways: + +* Add a new shipping address +* Assign the shipping address to be the same as the billing address +* Use an address already defined in the logged-in customer's address book + +## Create a new shipping address + +The following mutation adds a shipping address to the quote. + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +**Request** + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +```text +mutation { + setShippingAddressesOnCart( + input: { + cart_id: "A7jCcOmUjjCh7MxDIzu1SeqdqETqEa5h" + shipping_addresses: [ + { + address: { + firstname: "John" + lastname: "Doe" + company: "Company Name" + street: ["320 N Crescent Dr", "Beverly Hills"] + city: "Los Angeles" + region: "CA" + postcode: "90210" + country_code: "US" + telephone: "123-456-0000" + save_in_address_book: false + } + } + ] + } + ) { + cart { + shipping_addresses { + firstname + lastname + company + street + city + region + postcode + telephone + country { + code + label + } + address_type + } + } + } +} +``` + +**Response** + +`setShippingAddressesOnCart` returns the new address details. + +```json +{ + "data": { + "setShippingAddressesOnCart": { + "cart": { + "shipping_addresses": [ + { + "firstname": "John", + "lastname": "Doe", + "company": "Company Name", + "street": [ + "320 N Crescent Dr", + "Beverly Hills" + ], + "city": "Los Angeles", + "region": { + "code": "CA", + "label": "California" + }, + "postcode": "90210", + "telephone": "123-456-0000", + "country": { + "code": "US", + "label": "US" + }, + "address_type": "SHIPPING" + } + ] + } + } + } +} +``` + +## Assign the shipping address to be the same as the billing address + +[Add a new address for billing and shipping]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-billing-address.html) shows how to do this. + +## Use the existing customer's address + +First, query the customer to return a list of address IDs. + +**Request** + +```text +query { + customer { + addresses { + id + default_billing + default_shipping + } + } +} +``` + +**Response** + +```text +{ + "data": { + "customer": { + "addresses": [ + { + "id": 2, + "default_billing": true, + "default_shipping": false + }, + { + "id": 3, + "default_billing": false, + "default_shipping": false + }, + { + "id": 4, + "default_billing": false, + "default_shipping": true + } + ] + } + } +} +``` + +Set `{ CUSTOMER_ADDRESS_ID }` to an `id` returned in the query. + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +**Request** + +```text +mutation { + setShippingAddressesOnCart( + input: { + cart_id: "{ CART_ID }" + shipping_addresses: { + customer_address_id: { CUSTOMER_ADDRESS_ID } + } + } + ) { + cart { + shipping_addresses { + firstname + lastname + company + street + city + region { + code + label + } + postcode + telephone + country + { + code + label + } + address_type + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "setShippingAddressesOnCart": { + "cart": { + "shipping_addresses": [ + { + "firstname": "John", + "lastname": "Doe", + "company": "Company Name", + "street": [ + "320 N Crescent Dr", + "Beverly Hills" + ], + "city": "Los Angeles", + "region": { + "code": "CA", + "label": "California" + }, + "postcode": "90210", + "telephone": "123-456-0000", + "country": { + "code": "US", + "label": "US" + }, + "address_type": "SHIPPING" + } + ] + } + } + } +} +``` + +## Verify this step {#verify-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. On the Shipping step, the Shipping Address form contains the address details you entered. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-method.md b/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-method.md new file mode 100644 index 00000000000..7ec6fd96bb7 --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-shipping-method.md @@ -0,0 +1,84 @@ +--- +layout: tutorial +group: graphql +title: Step 6. Set the shipping method +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 60 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +The `setShippingMethodsOnCart` mutation defines the shipping methods for your order. It requires these input parameters: + + * `cart_id` + * `carrier_code` + * `method_code` + +`{ CART_ID }` is the unique shopping cart ID from [Step 2. Create empty cart]({{ page.baseurl }}/graphql/tutorials/checkout/checkout-add-product-to-cart.html). + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the `Authorization` parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +**Request** + +The following mutation query assigns UPS "Ground" method. + +```text +mutation { + setShippingMethodsOnCart(input: { + cart_id: "{ CART_ID }" + shipping_methods: [ + { + carrier_code: "ups" + method_code: "GND" + } + ] + }) { + cart { + shipping_addresses { + selected_shipping_method { + carrier_code + method_code + label + } + } + } + } +} +``` + +**Response** + +```json +{ + "data": { + "setShippingMethodsOnCart": { + "cart": { + "shipping_addresses": [ + { + "selected_shipping_method": { + "carrier_code": "ups", + "method_code": "GND", + "label": "United Parcel Service - Ground" + } + } + ] + } + } + } +} +``` + +## Verify this step {#verify-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 shipping method is displayed in the Shipping Methods section on the Shipping step. diff --git a/guides/v2.3/graphql/tutorials/checkout/checkout-shopping-cart.md b/guides/v2.3/graphql/tutorials/checkout/checkout-shopping-cart.md new file mode 100644 index 00000000000..a73e1f6e03d --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/checkout-shopping-cart.md @@ -0,0 +1,46 @@ +--- +layout: tutorial +group: graphql +title: Step 2. Create an empty cart +subtitle: GraphQL checkout tutorial +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +menu_order: 20 +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +The `createEmptyCart` mutation creates an empty shopping cart and generates a cart ID. + +{:.bs-callout .bs-callout-info} +For logged-in customers, send the customer's authorization token in the Authorization parameter of the header. See ["Get customer authorization token"]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for more information. + +**Request** + +The following mutation creates an empty cart: + +```text +mutation { + createEmptyCart +} +``` + +**Response** + +```json +{ + "data": { + "createEmptyCart": "A7jCcOmUjjCh7MxDIzu1SeqdqETqEa5h" + } +} +``` + +In the subsequent tutorial steps, the unique shopping cart identifier `A7jCcOmUjjCh7MxDIzu1SeqdqETqEa5h` will be listed as `{ CART_ID }`. + +## Verify this step {#verify-step} + +There are no additional verification steps. The values of `quote` and `entity_id` value are not displayed on the website or in the Magento Admin. diff --git a/guides/v2.3/graphql/tutorials/checkout/index.md b/guides/v2.3/graphql/tutorials/checkout/index.md new file mode 100644 index 00000000000..c340a13ef4f --- /dev/null +++ b/guides/v2.3/graphql/tutorials/checkout/index.md @@ -0,0 +1,47 @@ +--- +layout: tutorial +group: graphql +title: GraphQL checkout tutorial +menu_title: Initial tasks +menu_order: 0 +level3_subgroup: graphql-checkout +return_to: + title: GraphQL Overview + url: graphql/index.html +functional_areas: + - Integration +contributor_name: Atwix +contributor_link: https://www.atwix.com/ +--- + +This tutorial describes how to place an order through GraphQl. Customers can make purchases in two ways: + +* As a logged-in user +* As a guest user who does not create an account + +The **10-step tutorial** generally takes **30 minutes**. + +The checkout process in GraphQl consists of 10 steps. Magento GraphQL is designed to run queries and perform actions on behalf of a customer. Magento GraphQL does not perform backend tasks, such as manage invoices or shipments. + +### Before you begin +{:.tutorial-before} + +Complete the following prerequisites: + +* Install a Magento 2.3.2 instance with sample data. + + The sample data defines a functional store, called Luma, that sells fitness clothing and accessories. The store does not provide any sandbox accounts for testing credit card payments, so transactions will be simulated using an offline {% glossarytooltip 422b0fa8-b181-4c7c-93a2-c553abb34efd %}payment method{% endglossarytooltip %}. + +* Install a GraphQl client. You can use any GraphQl client to send calls to Magento. [GraphiQL](https://electronjs.org/apps/graphiql) is recommended. + +* Learn about GraphQL, how it works, and how to use it. See [Introduction to GraphQL](https://graphql.org/learn/) for details. + +* Know how to generate a customer token. See [Get customer authorization token]({{ page.baseurl }}/graphql/get-customer-authorization-token.html) for details. + +* Find the Magento Merchant documentation. Refer to [Getting Started with {{site.data.var.ce}}](http://docs.magento.com/m2/ce/user_guide/getting-started.html) for information about the Luma store that is created when you install Magento with the sample data. + +### Other resources + +* [Order processing tutorial]({{ page.baseurl }}/rest/tutorials/orders/order-intro.html) shows a system integrator how REST APIs are used in the lifecycle of an order, including configuring a store and creating a customer; creating quotes, orders, invoices, and shipments; preparing for checkout; and more order-related tasks. + +* [REST Tutorials]({{ page.baseurl }}/rest/tutorials/index.html) provides additional information about completing any Magento REST tutorial.