# Платежные кнопки

Фирменные кнопки CryptoCloud способствуют мгновенному и интуитивно понятному совершению платежей или пожертвований от ваших клиентов.

<figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FvkYqctyJQsywFMcr6QHN%2Fcover-buttons.png?alt=media&#x26;token=62b76b14-62b1-491b-875b-53597fdbdb56" alt=""><figcaption></figcaption></figure>

### Кнопки для оплаты

Используйте представленные ниже варианты кнопок на своем сайте для того, чтобы выделить доступный способ оплаты криптовалютой. После нажатия на кнопку пользователь будет перенаправлен на страницу созданного счета для осуществления платежа.

<div data-full-width="true"><figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FS7b4DWTe6ZHYpVu2FsdZ%2FCC-PayWith-Button-Colour-Exm%20(1).png?alt=media&#x26;token=e0c11c01-3319-4e43-8ec7-514d8068c3ae" alt=""><figcaption><p>cc-paywith-button</p></figcaption></figure> <figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FufqWPvImblQfsvmqjBIi%2FCC-PayWithCurrency-Button-Colour-Exm%20(1).png?alt=media&#x26;token=771951cf-a493-4849-bf7f-8f898f892003" alt=""><figcaption><p>cc-paywithcurrency-button</p></figcaption></figure> <figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FBpaW6BqnJToSYlsVOy9H%2FCC-PayWithCC-Button-Colour-Exm%20(1).png?alt=media&#x26;token=28005d1e-04f8-48fa-9f06-4e5f52ed650c" alt=""><figcaption><p>сс-paywithcc-button</p></figcaption></figure></div>

Вы можете ознакомиться со всеми вариантами использования платежных кнопок в разных цветах, скачав архив ниже. Файлы доступны в форматах SVG и PNG.

{% file src="<https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2Fsv6DWMhxzx5VxpghytGI%2Fcc-paywith-button.zip?alt=media&token=968f9aa3-8911-4f3f-9b77-946dc4736c40>" %}

{% file src="<https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2F76pgCPvsKxRs9YKOcxAi%2Fcc-paywithcurrency-button.zip?alt=media&token=66893707-443c-43fe-a819-1f14b734659d>" %}

{% file src="<https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FBrFcRucB7aZ6pUrlqH91%2Fcc-paywithcc-button.zip?alt=media&token=3e412f1f-9c6a-48e1-b41f-8a0c6b5fc990>" %}

Скопируйте и вставьте приведенный ниже фрагмент в свой HTML-код, чтобы добавить это изображение на свой сайт. Пример:

{% code title="HTML" overflow="wrap" %}

```html
<input type="image" src="https://cdn.cryptocloud.plus/brand/cc-paywith-button-colour.svg" alt="Pay with CryptoCloud" width="250px" />

<input type="image" src="https://cdn.cryptocloud.plus/brand/cc-paywithcc-button-black.png" alt="Pay with CryptoCloud" width="250px" />
```

{% endcode %}

Вы можете вручную поменять название файла в ссылке и формат (SVG, PNG) для выбора подходящего варианта. Также вы можете настроить ширину так, чтобы она соответствовала другим элементам на вашей странице.

<details>

<summary>Названия файлов</summary>

* cc-paywith-button-colour — цветная кнопка Pay with Crypto
* cc-paywith-button-white — белая кнопка Pay with Crypto
* cc-paywith-button-black — темно-серая кнопка Pay with Crypto
* cc-paywithcurrency-button-colour — цветная кнопка Pay with Cryptocurrency
* cc-paywithcurrency-button-white — белая кнопка Pay with Cryptocurrency
* cc-paywithcurrency-button-black — темно-серая кнопка Pay with Cryptocurrency
* cc-paywithcc-button-colour — цветная кнопка Pay with CryptoCloud
* cc-paywithcc-button-white — белая кнопка Pay with CryptoCloud
* cc-paywithcc-button-black — темно-серая кнопка Pay with CryptoCloud

</details>

### Кнопки для пожертвований

Представленные ниже варианты оптимальны для благотворительных организаций и других пользователей, кому необходим прием пожертвований.

<div data-full-width="true"><figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FYBqLXjlNcKdwSoNjfqf2%2FCC-DonateCrypto-Button-Colour-Exm%20(1).png?alt=media&#x26;token=0d6ae2df-a0bc-476a-b528-007b017c4b07" alt=""><figcaption><p>cc-donatecrypto-button</p></figcaption></figure> <figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2F0K6JedTw0aTsgCl7ZdW0%2FCC-DonateCurrency-Button-Colour-Exm%20(1).png?alt=media&#x26;token=bf5189ec-ebb6-4fc3-9db5-89051d83594e" alt=""><figcaption><p>сс-donateсurrency-button</p></figcaption></figure> <figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FgZsrAGke95LCoVOslxE0%2FCC-DonateWith-Button-Colour-Exm%20(1).png?alt=media&#x26;token=5c0b1c94-17d3-4c2d-af35-5ea14838228b" alt=""><figcaption><p>сс-donatewith-button</p></figcaption></figure></div>

Вы можете ознакомиться со всеми вариантами использования платежных кнопок в разных цветах, скачав архив ниже. Файлы доступны в форматах SVG и PNG.

{% file src="<https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2Fsbo7EMSNNwTS73BWZXiJ%2Fcc-donatecrypto-button.zip?alt=media&token=ed3fb950-2a76-48af-9970-a60d63af931b>" %}

{% file src="<https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FwWx1dlUsOM0tRq3WooMg%2F%D1%81%D1%81-donate%D1%81urrency-button.zip?alt=media&token=4f77c0e1-23a5-4833-8a04-5277c1a44386>" %}

{% file src="<https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2F5QtFhDf0G1wGquGf7RVY%2F%D1%81%D1%81-donatewith-button.zip?alt=media&token=733de805-c673-4782-b62f-d86a9b2fb7f1>" %}

Скопируйте и вставьте приведенный ниже фрагмент в свой HTML-код, чтобы добавить это изображение на свой сайт. Пример:

{% code title="HTML" overflow="wrap" %}

```html
<input type="image" src="https://cdn.cryptocloud.plus/brand/сс-donateсurrency-button-colour.svg" alt="Pay with CryptoCloud" width="250px" />

<input type="image" src="https://cdn.cryptocloud.plus/brand/cc-donatecrypto-button-black.png" alt="Pay with CryptoCloud" width="250px" />
```

{% endcode %}

Вы можете вручную поменять название файла в ссылке и формат (SVG, PNG) для выбора подходящего варианта. Также вы можете настроить ширину так, чтобы она соответствовала другим элементам на вашей странице.

<details>

<summary>Названия файлов</summary>

* cc-donatecrypto-button-colour — цветная кнопка Donate crypto
* cc-donatecrypto-button-white — белая кнопка Donate crypto
* cc-donatecrypto-button-black — темно-серая кнопка Donate crypto
* сс-donateсurrency-button-colour — цветная кнопка Donate Cryptocurrency
* сс-donateсurrency-button-white — белая кнопка Donate Cryptocurrency
* сс-donateсurrency-button-black — темно-серая кнопка Donate Cryptocurrency
* сс-donatewith-button-colour — цветная кнопка Donate with CryptoCloud
* сс-donatewith-button-white — белая кнопка Donate with CryptoCloud
* сс-donatewith-button-black — темно-серая кнопка Donate with CryptoCloud

</details>

### Примеры использования кнопок

Ниже представлены некоторые варианты того, как вы можете использовать предложенные варианты платежных кнопок.

#### Тарифы

На странице с тарифами фирменные кнопки CryptoCloud могут быть размещены под каждым перечнем услуг или пакетов, позволяя клиентам немедленно выбрать и оплатить предпочитаемый тарифный план криптовалютой. Кнопки должны быть заметными, но не мешать сравнению различных тарифов.

<div data-full-width="true"><figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2F5JBH2NyZzfEAemQMw1Vn%2Fproduct-page.png?alt=media&#x26;token=13b42b03-daf3-4c05-8346-7bd5e1b83e40" alt=""><figcaption></figcaption></figure></div>

#### Страница подтверждения заказа

На этом этапе фирменная кнопка CryptoCloud располагается в зоне выбора способов оплаты, ясно демонстрируя пользователю возможность оплаты через CryptoCloud вместе с другими доступными опциями.

<div data-full-width="true"><figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FD1av2OAntg7dI30wjhz2%2Fcheckout%20(3).png?alt=media&#x26;token=8786c5e4-41d0-4206-aebe-f7ee890a5d6b" alt=""><figcaption></figcaption></figure></div>

#### Прием пожертвований

Фирменные кнопки для пожертвований могут использоваться на специализированных страницах для сбора средств, в блогах, в статьях и на главной странице. Они должны обеспечивать простую и быструю оплату, поддерживать возможность выбора суммы пожертвования и ясно информировать доноров о том, что их вклад может быть сделан в криптовалюте через CryptoCloud.

<div data-full-width="true"><figure><img src="https://2037202924-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAEkbmLzbjwQavK0esKZH%2Fuploads%2FsuqLJ3GMBaFrhnLgB8TB%2Fdonation%20(1).png?alt=media&#x26;token=155a2923-d88a-46e1-9512-f23e75f016fd" alt=""><figcaption></figcaption></figure></div>

### **Принципы использования:**

* Кнопки должны быть использованы в их исходной форме, соответствуя брендовым стандартам CryptoCloud и цветовой гамме.
* Не разрабатывайте собственные альтернативы или вариации этих кнопок, чтобы избежать путаницы и несоответствия бренду.
* Фирменные кнопки должны быть размещены в заметных, но не агрессивных позициях на сайте, обеспечивая комфортное взаимодействие с пользователем.

### **Рекомендации по размещению:**

* Убедитесь, что кнопки оплаты и пожертвований CryptoCloud размещены рядом с другими методами оплаты, облегчая пользователю выбор предпочтительного способа.
* Кнопки должны быть четко видимы и легко доступны на всех устройствах, адаптируясь к размерам экрана и типам устройств.
* В случае использования кнопок для сбора пожертвований, обозначьте четко суммы доната или позвольте пользователям выбрать сумму взноса.