Integrations: Payment systems

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:

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.

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.

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.

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

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.

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.

Additional payment system settings include the following parameters:

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

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

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.

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.

The payment form contains:

Payment title that is displayed on the site.

Input fields for user data and comments:

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.

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

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.

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.

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

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 one or more payment services have been added to the project, you will see the Add a payment system button.

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

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.

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.

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

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

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.

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.

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.

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