Composable Frontend 2.0 Learn more 

  • Orders/
    Create short order IDs

    Create short order IDs

    This example provides instructions to create short order IDs using webhooks.

    Prerequisites

    • Ensure that you have an account in the ngrok service to tunnel your development environment externally.
    • Ensure that yarn and other dependencies are installed.

    Procedure

    1. Run the following command to clone the repository:

      git clone https://github.com/moltin/examples.git
      
    2. Create a new flow by doing the following:

      1. In Commerce Manager, go to Flows.
      2. Click New Flow.
      3. In the Create New Flow page, enter a name and set the slug to products.
      4. Enter a description for the flow.
      5. Select Enabled.
      6. Click Save.
    3. Create a new field for the flow by doing the following:

      1. Click the flow you have created on the Flows page.

      2. Click New Field.

      3. In Field type, select one of the following options: - Boolean - Float - Integer - String - Date - Relationship

        1. Enter a name for the new field.
        2. Set the Slug to short_id.
        3. Enter a description for the flow field.
        4. Select the Required field?.
        5. Enter the Default Value and number of Order.
      4. In the Validation section, select the String Validation Type and enter the valid string options.

      5. Click Save.

    4. In the terminal, go to the examples/webhooks/short-order-id directory.

    5. Create an .env file in the /short-order-id directory and add the keys for the following environment variables:

      • MOLTIN_CLIENT_ID=
      • MOLTIN_CLIENT_SECRET=
      • MOLTIN_WEBHOOK_SECRET=

      Use any value that you want for MOLTIN_WEBHOOK_SECRET.

    6. Run the following command to start the development server:

      yarn dev
      

      By default, the server starts on port 3000. If the server starts on a different port, then use that port number in the next step.

    7. Run the following command to start ngrok:

      ngrok http 3000
      

      This exposes port 3000 externally.

    8. Go to the ngrok status page and make a note of the URL.

    9. Create a new integration in Commerce Manager by doing the following:

      1. Log into the Commerce Manager.

      2. Go to Settings > Integrations.

      3. Click New Integration.

      4. In the Integration details section, enter a name and description for your integration.

        We recommend to prefix the name with DEVELOPMENT for easier referencing.

      5. In the Configuration section, enter the ngrok URL and a secret key.

      6. In the Observes section, select Created option in Order.

      7. Select Enabled.

      8. Click Save.

    Previous
    Create formatted orders