> For the complete documentation index, see [llms.txt](https://readme.directual.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://readme.directual.com/plugins/using-plugins/blockchain-web3/ton-the-open-network.md).

# TON (The Open Network)

## What is TON?

[**The Open Network**](https://docs.ton.org/learn/introduction) **(TON)** is a decentralized and open internet platform made up of several components. These include: TON Blockchain, TON DNS, TON Storage, and TON Sites. TON Blockchain is the core protocol that connects TON’s underlying infrastructure together to form the greater TON Ecosystem.

## Directual TON plugin

Directual TON plugin allows you to create Web-apps, Telegram Mini Apps easily and securely using no-code approach.

{% embed url="<https://youtu.be/ITFuJdNdUkI>" %}

### Step 1. Install free TON plugin from the Marketplace in your Directual app

<figure><img src="/files/PkJxY4vh7mnzukDVi9gH" alt=""><figcaption></figcaption></figure>

### Step 2. Add a webhook for notifications

Go to API → [Webhooks](/api-integrations/webhooks.md) and add a new one. Turn on CORS for it!

<figure><img src="/files/zotdaYnrYTJaNFZj5Pxu" alt=""><figcaption></figcaption></figure>

### Step 3. Exploring the scenario plugin

First — you have **Get transactions** step in your scenario. It calls `/v2/blockchain/accounts/{account_id}/transactions` method of [TON API](https://docs.tonconsole.com/tonapi/api-v2).

<figure><img src="/files/fqzyZelGq9J1iT7DQGEY" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Usually, such scenarios run on a scheduler manner (hourly, for example), the data structure (let's name it `trigger`) contains a **single object**.
{% endhint %}

Specify the wallet address to get the transactions and the field where to save the API response:

<figure><img src="/files/WEHrdsCSDc1EEXD4QUcO" alt=""><figcaption></figcaption></figure>

The response looks like:

```json
{
    "transactions": [
        {
            "hash": "8c0276b72beecc5d7eba39d693fb9f8b266258caef1200f7970006b2f79d7c06",
            "lt": 46659096000001,
            "account": {
                "address": "0:84a12aee228a602c8e37a84c7e62d7846c26d6",
                "is_scam": false,
                "is_wallet": true
            },
            "success": true,
            "in_msg": {
                "msg_type": "int_msg",
                "value": 20000000,
                "fwd_fee": 266669,
                "destination": {
                    "address": "0:84a12aee228aa63a84c7e62d7846c26d6",
                    "is_scam": false,
                    "is_wallet": true
                },
                "source": {
                    "address": "0:18857605abfbbc6f1bfbb4f668bf3680",
                    "is_scam": false,
                    "is_wallet": true
                },
                "decoded_body": {
                    "text": "Order #123"
                }
            }
        }
    ]
}
```

Key things here are:&#x20;

* `transactions.in_msg.value`
* `transactions.in_msg.decoded_body.text`

Let's use [JSON-step](/scenarios/editing-scenarios/action-steps/json-step.md) for parsing the response! For that we need:

1. Create a new data structure `ton transactions` with needed fields;
2. Add a field type of `arrayLink` to transactions data structure to the structure `trigger`
3. Configure JSON-step: add the json-scheme (copy it above) and set up matching

<div><figure><img src="/files/qE96CCmADnmr4zL1RUmt" alt=""><figcaption></figcaption></figure> <figure><img src="/files/E8KKrlFduO043Amrqkgz" alt=""><figcaption></figcaption></figure> <figure><img src="/files/ptXkd63hMNIMzrctE07K" alt=""><figcaption></figcaption></figure></div>

All right, we get all the transactions. Then we can identify them using comments/values, etc.

{% hint style="warning" %}
Hint: if you want to extract oder number from text like `Your order is #12345`, use the following expression (turn on JS-evaluation):&#x20;

```
"{{text}}".match(/#(.+)/) ? "{{text}}".match(/#(.+)/)[1] : ""
```

{% endhint %}

### Step 4. Exploring web-plugin

Add a **Pay in TONs** component to your web-page

<figure><img src="/files/fmf57yjKgTkQEsR413S5" alt=""><figcaption></figcaption></figure>

Configure the plugin (paste to the `webhook` URL of the [webhook we'e created](#step-2.-add-a-webhook-for-notifications)).

<figure><img src="/files/QGuzI4jBsZA8yEZWrYlV" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Pay attention that `amount` is in nanoTons. 1 000 000 000 nanoTONs = 1 TON
{% endhint %}

The user will see the two-component:

1. First step – connecting wallet (Telegram wallet, MyTonWallet, Tonkeeper, etc.)
2. Second step – confirming transaction

<div><figure><img src="/files/gG5Q7Xh3KskcZwQn8HWn" alt=""><figcaption></figcaption></figure> <figure><img src="/files/C34PHt7Y6rnbZ9PcWa8O" alt=""><figcaption></figcaption></figure></div>

### Step 5. Processing transactions

When the user confirms the transaction, you'll get a notification via webhook (don't forget to turn on CORS for it!)

<figure><img src="/files/2qyK4GseIhvBaPnN6ndv" alt=""><figcaption></figcaption></figure>

Notification body:

```json
{
   "user": "36142243",
   "addressFrom": "0:18857605abf7216fa98ae1bbc6f1bfbb4f668bf3680",
   "addressTo": "UQCEoSruIoqmNBdQrEzTd6hMfmLXhGwm1hF4",
   "orderNumber": "123",
   "status": "success",
   "amountTons": "0.02",
   "amountNanoTons": 20000000
}
```

`user` will be `null` if your user is not authorised.

{% hint style="warning" %}
Don't use that notification for confirming your orders! Because one can send a fake request to your webhook. Use that notification as a trigger for checking the blockchain!
{% endhint %}

Bear in mind that there may be a certain lag between notification and transaction completing (usually 1-3 minutes). Thus, use [Delay step](/scenarios/editing-scenarios/system-steps/delay-step.md) in the scenario, that is triggered by the webhook.

<figure><img src="/files/F7khAPBeAIsZAh2iiGdE" alt=""><figcaption></figcaption></figure>