EC function - How to check the operation using API settings and Swagger UI

In this tutorial, we will explain the API settings required to build an e-commerce (EC) site and how to check the ordering procedure using Swagger UI.
For this procedure, it is assumed that the configuration from the tutorial of EC function - Configure shop and add products is already completed.

Create API

First, we will create an API for EC.
On the API list page, click [Create new API]. Image from Gyazo

Enter Title, Version and Description and click [Add]. For this tutorial, we'll enter:

ItemSettings
TitleEC API
Version1
DescriptionEC

Image from Gyazo

Next, let's configure the security.
Click [Security] on the API page you have just created.
Image from Gyazo

Select Dynamic Token or Cookie for the security.
We'll use cookies for this tutorial, so select 'cookie' and click [Save].
Image from Gyazo

Next, let's configure CORS. Click [Operation CORS] on the API page you have just created. Image from Gyazo

Set it up as follows and click [Save].

ItemSettings
CORS_ALLOW_ORIGINS
  • Management page URL
  • Front-end domain
  • Local domain (e.g. http://localhost:3000)
  • CORS_ALLOW_METHODS
  • GET
  • POST
  • Image from Gyazo

    Create an endpoint

    Next, let's create an endpoint.
    Click [Configure Endpoint] on the API list page. Image from Gyazo

    Create the following endpoints which are required for EC.

    Endpoint for login

    ItemSettings
    Pathlogin
    Enabled/DisabledEnabled
    ModelCategoryAuthentication
    ModelLogin
    OperationLogin_challenge

    Image from Gyazo

    Endpoint for fetching profile information

    ItemSettings
    Pathuser/profile
    Enabled/DisabledEnabled
    ModelCategoryAuthentication
    ModelLogin
    Operationprofile

    Image from Gyazo

    Endpoint for adding products to the cart

    ItemSettings
    Pathec/cart/add
    Enabled/DisabledEnabled
    ModelCategoryEC
    ModelECCart
    Operationadd

    Image from Gyazo

    Endpoint for order processing

    ItemSettings
    Pathec/order/purchase
    Enabled/DisabledEnabled
    ModelCategoryEC
    ModelECOrder
    Operationpurchase

    Image from Gyazo

    We have created all the required endpoints for this tutorial, as shown below:
    Image from Gyazo

    Check API's operation

    After completing the endpoint configuration, we will check the API's operation on Swagger UI and confirm that users can purchase products properly.

    Login

    It's expected for the user making orders to be logged in, so it'll be necessary to log in from the Swagger UI screen.
    Note: Register the address of the member used for login on the [Profile Information] page of [Edit Member] in advance since it will be used when ordering.

    On the API list page, click [Swagger UI] to access the Swagger UI page. Image from Gyazo

    ​Click the endpoint of login.
    Image from Gyazo

    Click [Try it out]. Image from Gyazo

    Enter your login information in the Request body as below and click [Execute].

    Request body
    {
      "email": "YOUR_MAIL_ADDRESS@example.com",
      "password": "PASSWORD",
      "login_save": 0
    }
    

    Note: replace YOUR_MAIL_ADDRESS@example.com and PASSWORD by your actual e-mail address and password.

    Image from Gyazo

    If you log in successfully, you'll get response code: 200.
    Image (fetched from Gyazo)

    Fetching cart ID

    After login, we will fetch the cart ID.
    The cart ID is linked with the logged-in user's information, so you can fetch it from the profile endpoint.
    Click user/profile endpoint. Image from Gyazo

    Click [Try it out].
    Image from Gyazo

    Click [Execute].
    Image from Gyazo

    The data will get a response with the code: 200. Save the value of ec_cart_id.
    Image from Gyazo

    In the above case, 1306 is the cart ID.

    Add product to the cart

    Let's check the desired Product ID, then add it to cart by specifying the ID.
    First, check the product ID from product edit page.
    Image from Gyazo

    In the above case, 41201 is a product ID.

    Go back to Swagger UI page and click /ec/cart/add endpoint.
    Image from Gyazo

    Click [Try it out].
    Image from Gyazo

    Enter the cart ID and product information in the Request body as below and click [Execute].

    The parameters you need to set are as follows:

    • ec_cart_id: cart ID (prepare in advance)
    • product_id: ID of the product which you want to purchase
    • quantity: purchasing quantity

    For this tutorial, we'll enter:

    ItemSettings
    ec_cart_id1306
    product_id41211
    quantity1
    Request body
    {
      "ec_cart_id": 1306,
      "item": {
        "product_id": 41201,
        "quantity": 1
      }
    }
    

    Image from Gyazo

    Once the products are added successfully, the data will respond with code: 200, and "Added" will be displayed in messages.
    Image from Gyazo

    Purchase products in the cart

    You need to specify the payment method when purchasing products so check the payment method ID on [Payment method settings] page.
    Image from Gyazo This time, we will proceed with ID 58 which is "bank transfer".

    Go back to Swagger UI page and click /ec/order/purchase endpoint. Image from Gyazo

    Click [Try it out].
    Image from Gyazo

    Enter the cart ID and payment method ID in Request body and click [Execute].

    The parameters you need to set are as follows:
    Note: we'll proceed here with only the required parameters, but you can change optional ones if necessary.

    • ec_cart_id: cart ID you have checked in advance
    • ec_payment_id: payment method ID

    For this tutorial, we'll enter:

    ItemSettings
    ec_cart_id1306
    ec_payment_id58
    Request body
    {
      "ec_cart_id": 1306,
      "ec_payment_id": 58
    }
    

    Image from Gyazo

    Once the products are purchased successfully, the data will respond with code: 200. "Order has been completed" will be displayed in message and the Order ID will be returned in ids.
    In addition, "Purchase completion notification" e-mail will be sent to the purchaser's e-mail address.
    Orders may be divided into multiple units depending on the condition of the cart.
    Image from Gyazo

    Checking the order information

    You can check the order you purchased earlier using Swagger UI earlier from [Order List] Image from Gyazo

    This concludes the explanation of the API settings required to build an EC site and how to check the ordering procedure using Swagger UI.