Dashboard
Project settings

Integrations: Payment systems

30min

By connecting payment systems, you will be able to accept payments for goods and services on your website. For example, you can create an online store without a shopping cart option by adding a payment form for each product.

With Taptop you can connect one of 24 payment systems:

  1. PayAnyWay
  2. Robokassa
  3. Uniteller
  4. Alfa Bank
  5. SberBank
  6. CDEK Pay
  7. IntellectMoney
  8. IntellectMoney2022
  9. LifePay (RFI)
  10. PayKeeper
  11. PayMaster
  12. PayPal
  13. T-Bank (Tinkoff)
  14. Unitpay
  15. PSKB Bank
  16. SDM-Bank
  17. WalletOne (WalletOne Checkout)
  18. ModulBank
  19. Yoomoney (Yandex2019)
  20. WebPay
  21. Alfa Bank Belarus
  22. Click
  23. Octo.Uz
  24. Payme

You can connect payment systems to the project only on the Basic hosting plan.

How payment method integration works

To connect a payment system to the project, you must first conclude an agreement with the selected payment service and fill in the necessary parameters in your payment account.

To set up integration with the payment system in Taptop, you need to:

1. Connect a payment system to the project. In the project settings, on the Integrations tab, you need to add one or more payment systems and configure the necessary parameters.

2. Create and configure a payment form on the website. In the Design Editor, you need to create a payment form (separate for each product) by adding the Payment widget on the canvas. Next, you need to configure the parameters of the payment form - link the payment system and indicate the name and price of the product. Now you can accept payments from users.

Accepting payments:

After filling out the payment form on your website, users will be redirected to the selected payment system page to pay for the product or service. You can view all orders and their payment statuses in the project settings in the Leads section.

Below, you can find detailed description of payment systems integration.

Connecting a payment system in the project settings

You can connect one or more payment systems on the Dashboard in the project settings. To do this, go to Integrations -> Payment systems.

To add a payment system to the project, click the Connect button.

Document image


Payment system setup steps

1. Select the name of the payment system from the list. If you start entering the name in the field, the system will automatically offer suitable options.

Document image


2. Select the payment currency. The list of available currencies depends on the selected payment system.

Document image


If a payment system offers more than one currency, you make connect several payment currency options. For example, you can add four options for Robokassa payment system for payment options in rubles, dollars, euros and Kazakhstani tenge. Each payment system and currency combination can be connected only once.

3. Fill in all the necessary settings — basic and additional settings.

The basic settings of the payment system allow you to transfer your data received when registering with the payment service to the system.

The list of main settings may differ depending on the selected payment system. The list is generated automatically based on the payment system data. However, login, password or other methods of identifying your account are mandatory.

Document image


Also in the main settings you will find a payment link URL to which payment notifications will be sent. You must copy the link and add it to the appropriate field in your payment service account. The field name may differ for different payment systems, e.g. Pay URL, Notify URL, etc.

Document image


Additional payment system settings include the following parameters:

  • Tax name and percentage are fields for specifying taxes. By default, the option is disabled. If you want to add a tax, enable it and enter the name of the tax and its value as a percentage.
Document image

  • Sign of payment method: product or service.
Document image

  • Sign of payment method: full payment or prepayment.
Document image

  • System of taxation: tax calculation method
Document image


4. After filling out the form fields, click the Connect button to complete the payment system integration procedure.

Document image


Ready! You have connected the payment system.

You can see the list of all added payment services in the Payment systems section in the project settings.

Document image


Editing and deleting a payment system

The added payment system can be edited or deleted. To do this, click on the three dots to the right of the service name and select the corresponding menu item.

Document image


Creating and setting up a payment form on the website

After connecting the payment system to the project, you can create and set up a payment form. To do this, go to the Design Editor and add the Payment widget to the canvas.

For each product, you need to create a separate payment form and customize its parameters. You can add any number of payment forms to the site, choosing one payment system for each. For example, you can connect Sber payment for one product, and Robokassa for another.

Document image


You can add a payment form to a page or pop-up, and customize it as with a regular form.

The payment form contains:

Payment title that is displayed on the site.

Document image


Input fields for user data and comments:

  • Email
  • Phone
  • Description
Document image


You cannot add more fields to the form or delete existing ones.

You can configure settings for each input field on the Settings tab. You can add placeholders for all fields. For the Telephone field, you can additionally configure a mask that will allow you to check the correctness of the number entered by the user. Email and Telephone are mandatory fields, Description field is optional.

Configuring a mask for the Telephone field
Configuring a mask for the Telephone field

Description field settings
Description field settings




Pay button. After clicking this button, the user will be redirected to the payment service page and a new order will be created.

Document image


To change the form title, field or button name, click the corresponding element on the canvas.

For the payment form to work correctly, you need to configure its parameters on the Settings tab in the right panel.

Document image


General payment form settings

  • Form name. This name will be displayed in the list of orders in the project settings.
Document image

  • Form state. You can customize the appearance of default, successful payment or error forms. With these settings, you can provide the user with information about the payment status, as well as instructions in case of payment problems.
Document image


Having selected the desired form state, e.g. Error, you will see that the Error State element with an error message appears on the canvas instead of the form fields. You can edit this text to suit your needs and style it.

Document image

  • Fields state. You can customize the appearance of default and erroneous data entry fields. You will see an error message, if an incorrect phone number is entered or a required field is not filled in.
Document image


With Error status, red error messages are displayed. You can change the text of messages and style them based on your site design.

Document image


Payment system settings

With these settings you can link one of the connected payment services to the payment form. These parameters are mandatory for the form to work correctly on the site.

If no payment system is connected in the project settings, you will see a notification in this section.

Document image


If one or more payment services have been added to the project, you will see the Add a payment system button.

Document image


After clicking the button, you need to fill out Payment settings:

Document image

  • Payment. Select one of the payment services connected to the project. For each form, you can select only one payment system.
Document image

  • Product name and price. This data is transmitted to the selected payment service to process a payment. After the user orders the product, these parameters will be displayed in the order data. You can see them in the project settings in the Leads section.
Document image

  • Open in new tab. With this setting the user can open payment system page in a new tab. By default, the page will open in the current window.
Document image


Possible problems with the payment form

Users will not be able to pay for an order on your website in the following cases:

1. Integration with the payment system has not been completed.

  • You have added a payment form to the website but have not enabled the payment system in the form settings. You will see the following message in your payment form settings:
Document image

  • You have added a payment form to the website but have not connected any payment system in the project settings. You will see the following message in your payment form settings:
Document image

  • You have added a payment form and a payment system to the website, and then deleted this payment system in the project settings. In this case, you need to either link another payment system to the form (from the list of those connected to the project), or add a new payment system in the project settings and then link it to the form.

2. Hosting has been expired. In this case, integration with payment systems will be disabled. Even if you have previously added a payment system and configured the payment form correctly, payment will not be possible without active Basic hosting plan.

In the payment form settings, a message will be displayed stating that you need to pay for hosting to continue.

Document image


You can track payment problems on the Layers tab. Disabled payment forms will be marked with a special warning icon next to their names.

Document image


In this case, when users try to pay, they will see the Error message.

Document image


View orders

All orders placed with payment forms on the website are displayed in the project settings in the Leads section.

Document image


The list contains the order form name, date, price and payment status. You can view detailed information about the order by clicking the Show results button in the corresponding list line.

Document image


After clicking the button, a pop-up will open containing order details: date, order ID, product name, amount, payment system, status and user data: e-mail, phone and comment.

Document image


You can also select orders using the checkbox to the left of the name and export them by clicking the Export button at the bottom of the page.

Document image


The list of orders will be exported as .xls file.