In order.yaml we used a component to place the order. Meya doesn't have a built-in pizza ordering component, though, so we'll have to build one. On the Meya platform, custom components are written using Python3.

Create the component

Open your app in the Meya Console.
Select the Components page.
Click the Create component button.
Rename the component from new_component.py to submit.py.
Paste the following code into the code editor, and click Save (ignore the error message for now):

from dataclasses import dataclass
from meya.component.element import Component
from meya.component.element import ComponentResponse
from meya.element.field import element_field
from meya.element.field import response_field
from meya.entry import Entry
from typing import List


@dataclass
class OrderComponent(Component):
    api_token: str = element_field()
    size: str = element_field()
    ingredients: List[str] = element_field()
    payment_method: str = element_field()
    address: str = element_field()
    is_delivery: bool = element_field()

    async def start(self) -> List[Entry]:
        # Example code only. You'll need to modify this code to get it working with
        # your API.
        url = "YOUR_API_URL"
        headers = {
            "Authentication": f"Bearer {self.api_token}",
        }
        data = dict(
            size=self.size,
            ingredients=self.ingredients,
            payment_method=self.payment_method,
            address=self.address,
            is_delivery=self.is_delivery,
        )
        # response = await self.http.post(
        #     f"{url}/orders/", headers=headers, data=data
        # )
        return self.respond(data=ComponentResponse(result=True))

Lines 12-17: Remember those variables we passed to the submit component in order.yaml? Well, here's where they're defined. We've specified six properties, and their data types, that are required in order to submit the order. (You can also add optional properties.)

Line 19: Here we override the start() method.

🚧
The start() method
All custom components should override the start() method. This is the main point of entry for a component.

The start() method can return a list of one or more entries, and (optionally) some data that will be placed on flow scope. In this case, we're setting flow.result to true.

Lines 33-35: If you already know Python, you may be familiar with the requests library, which is used for making HTTP calls. In Meya components you'll use self.http instead of requests. The good news is, self.http has a very similar API as the requests library so it feels very familiar and is simple to use.

🚧
You'll notice that this example component doesn't actually make an API call (lines 33-35 are commented out). Instead, the component always returns successfully. The purpose of this component is just to give you an idea of how components are typically laid out.

Update the vault

The component requires an API token which is stored in the vault. Let's update the vault now.

Select the Vault page.
Click the Add item button.
Change the item key from Item to api_token.
Set the value to be abc123.
Click the check mark button.
Click Save.

(Optional) Local IDE