iframe-window(plugin)

Integration

This is the code of your widget. Copy and paste it into the code of the pages where you want to accept payments. You must fill in the parameters yourself:

<iframe id="kassma-plugin-frame" src="https://plugin.domain/?label=label&currency_code=currency_code&lang=lang&wallet_type=wallet_type&custom_transaction_id=custom_transaction_id&fixed_amount=fixed_amount&payment_url_success_id=payment_url_success_id&payment_url_fail_id=payment_url_fail_id&success_url=success_url&payment_url_pending_id=payment_url_pending_id&pending_url=pending_url&fail_url=fail_url" width="640" height="750" frameBorder="0"></iframe>
<script>document.querySelector('#kassma-plugin-frame').src += '&' + new Date().getTime();</script>

Decryption parameters:

Screening table:

If an error occurs, a window with an error code will be displayed on the plugin. At the same time, you need to contact the Paykassma support service and report the error code to solve the problem. There is a table with the decipher of error codes below

Deposit using a plugin

Attention: The plugin has a dynamic layout and is adapted to work on a range of devices, including tablets and mobile phones

Example 1:

1. The customer enters the payment window on the payment system selection page
   
2. The user chooses a payment system, in the first case, let’s look at the example of entering through the PayTM payment system
   1. The amount entry window is displaying
      

       2.1 After entering the amount and clicking the "Next" button, a window is displaying with information about the wallet to which you need to make a money transfer
            
      Also in the display window of the wallet, people can see an information about the minimum and maximum deposit and a hint about making a payment

      2.2 Next, after clicking the "Next" button, a window is displayed in which people must specify the Transaction ID received by the Customer when performing the transfer.

     2.3 After entering the Transaction ID and confirmation, the transaction is searched in the system

          2.3.1 If there is a transaction in the system, the user is redirected to the URL of a successful payment. The URL is specified in the settings.

          2.3.2 If the transaction is not in the system, the user will see a window with the text: "Transaction not found or was already activated. Please retry later." and two buttons. "Refresh" → the button will redirect the user to the URL of the unsuccessful payment and "Retry" → the button will return the user to the transaction activation form for a second activation attempt.
                   

         2.3.3 If the “Delayed automatic activation” functional is enabled on the server and the data confirming the transaction are not entered correctly, the following window may be displayed when you try to activate the transaction(see more about "Delayed automatic activation"):

      * Kindly check transaction ID, if you type everything correctly, your funds will be credited during 2 hours. If you made mistake while transaction ID typing, then try again.

      When clicking on the "Refresh" button, the user is redirected to the URL of a successful payment. The URL is specified in the settings.

Example 2:

1. The user enters the payment window on the payment system selection page.
   
2. The user selects a payment system, but not the PayTM

          2.1. The amount entry window is displaying
                

          2.2 After entering the amount and clicking the "Next" button, the data confirmation window is displaying
                

          2.3 After confirmation, the user is redirected to the payment page

Attention: Control over transactions and their statuses can always be checked in the PA, the "Transactions" menu. This section displays the transaction generated above with the status "Activated".

Settings of the plugin appearance

To create your own theme for the plugin and/or change the size of fields in the plugin, you must create a file in *.css format and upload it through Paykassma settings (see the description of the Plugin appearance section section for details)

1. Download a CSS file template ( A link to the CSS file is available on request through the Paykassma support team)
2. Make changes according to the given examples
3. Load this CSS file through the Paykassma settings

Examples of customization

Changing the background color

Pic 1. Options for displaying the appearance of the plugin

Changing the text color

Pic 2. Options for displaying the appearance of the wallet window

Styles for first level headers

Pic 3. Options for displaying window titles

Styles for displaying the payment system

Pic 4. Options for displaying payment systems

Styles of text for the name of the payment system

Pic 5. Options for displaying names of payment systems

Changing the background color for dropdown list items

Pic 6. Options for displaying the appearance of the payment window

Styles for icon backgrounds

Pic 7. Options for displaying the payment confirmation window

Styles for buttons

To change the style of the Back button, add the following code to the CSS file:

.app--custom .button {
  background-color: #1368d8;
  border-color: #1368d8;
  color: #fff;
} 

Pic 8. Options for displaying buttons

Styles for fields

Pic 9. Options for displaying buttons in the information window

Styles for fields

Pic 10. Options for displaying the «Wallet» field

Styles for field labels

Pic 11. Options for displaying labels

Styles for the "Copy" button

To change the size of the Copy button, add the following code to the CSS file:

.app--custom .copy-text-input-btn {
    min-width: 62px
}

Pic 12. Options for displaying buttons

Amount field styles

Pic 13. Options for displaying fields

Card expiration field styles

Pic 14. Options for displaying the drop-down list