# Telegram MiniApp

Now you can accept cryptocurrency payments via the TON network in Telegram using our mini-app. It’s easy to integrate, allows seamless interaction with customers directly in Telegram, and opens new opportunities for businesses in the TON ecosystem.

***

## Parameters

The following parameters are available to manage payment creation:

| Parameter          | Required | Description                                                |
| ------------------ | -------- | ---------------------------------------------------------- |
| **apiKey**         | NO       | Public part of the API key (used to sign payment webhooks) |
| **orderId**        | YES      | Payment identifier                                         |
| **description**    | NO       | Payment description                                        |
| **organizationId** | YES      | Organization ID                                            |
| **amount**         | NO       | Payment amount                                             |
| **payerEmail**     | NO       | Payer’s email address                                      |
| **returnUrl**      | NO       | Return URL after successful payment                        |

> You can get the API key in your personal account under the "Integrations" section.

***

## Integration

Two convenient methods are available to integrate our mini-app for receiving cryptocurrency payments.

### 1. Payment Button via Script

You can integrate the payment system into your service or mini-app by adding a pre-built button script. This is a quick and easy way to set up the payment process via the TON network in widely used wallets.

#### Script Integration

To enable the payment button, add the script to your service:

```html
<script src="https://cdn.onchainpay.io/images/PaymentButtonMiniApp.js"></script>
```

Example of a payment button tag with required parameters:

```html
<payment-button
    data-orderid="test"
    data-organizationid="your_organization_id"
    data-description="test"
    data-payeremail="email@test.mail"
    data-apikey="your_public_api_key"
    data-label="Pay"
    data-accentcolor="red"
    data-returnurl="https://example.com/success"
>
</payment-button>
```

> Note! `data-` attributes must be written in lowercase.

***

### Payment Button Parameters

#### `data-label`

The text displayed on the button.

Example: `data-label="Pay"`

#### `data-accentcolor`

Button color. Available values: `purple, orange, green, red, yellow, blue`

### 2. Direct Link

Alternatively, you can use a direct link that you can embed into your service or mini-app. This link redirects the user to our payment app within Telegram.

> To open the payment mini-app, you need to generate a `base64` string from the parameters and insert it into the `startapp` query parameter.

#### Example of Generating a Base64 String in JavaScript:

```js
const encodeObjectToUrlString = (obj) => { 
  const jsonString = JSON.stringify(obj); // Convert object to JSON string 
  return encodeURIComponent(btoa(jsonString)); // Encode to Base64 and make URL-safe 
};

// Example usage:
const params = {
  apiKey: "apiKey",
  orderId: "Payment#1234",
  description: "Some payment description",
  organizationId: "organizationId",
  payerEmail: "email@mail.ru",
  returnUrl: "https://example.com/success"
};

const base64Params = encodeObjectToUrlString(params);
```

#### Example of a Link:

```
https://t.me/Onchainapay_app_bot/onchainpay?startapp=${base64Params}
```

You can open the link using the `window.open` function:

```js
window.open(`https://t.me/Onchainapay_app_bot/onchainpay?startapp=${base64Params}`);
```

> Insert the result from the `base64Params` function into the URL string.

***

> Supported currencies for payment: USDT (TON), TON (TON)

> Note! When opening the payment mini-app, your mini-app will close.