Payment widget

The payment widget is a pop-up window that is embedded on the Merchant's website and appears when the Customer clicks the Pay button. It includes secure payment data fields (the data is processed by Payture in compliance with security standards) and an email field for sending an electronic fiscal receipt as required by Federal Law No. 54-FZ (the Russian law on cash registers and fiscal receipts). The payment widget is optimized for mobile devices and for different browsers.

To test the widget, use test cards.
The result for this widget is always a successful payment without 3DS.
For example, card number 4111 1111 1111 1111. The expiration date, CVC2/CVV2, and cardholder can be arbitrary.
The receipt sent is not a fiscal document and serves only to demonstrate how the widget works.

Installation

Example of the head section on a page with the widget:

<head>
    <script type="text/javascript" src="path/to/widget/payture-widget.min.js"></script>
    <link rel="stylesheet" type="text/css" href="path/to/widget/widgetStyles.css">
</head>

Example of opening the widget when Pay is clicked:

<button id="start_widget" onclick="openWidget()">Pay</button>

To install the widget on their website, the Merchant needs to complete the following steps:

1. Request test access parameters from Payture support.
2. By default, the widget uses the standard Payture templates. If the Merchant wants to change the look of the templates, they need to prepare and send to support a payment form template (Type=Pay) and an operation result template (Type=Return), which opens after the 3DS check. The Merchant can either create their own templates from scratch or modify the standard Payture widget templates. Information, detailed technical guidance on creating templates, and sample widget templates are available on the templates page in the "Widget templates" section.
3. Include the payture-widget.min.js library in the head section of the page. Download payture-widget.min.js.
4. Add the styles required by the widget to the head section. Download widgetStyles.css.
5. Define the function that opens the widget. The required parameters are set in the PaytureWidget() constructor.
6. Configure the widget to open on some event, for example, when the Pay button is clicked.
7. If needed, configure the website's behavior depending on the success argument of the OnTransactionCompleted function.
8. Test the widget in the test environment using test cards.
9. Obtain production access parameters from Payture support and switch to the production environment.

Widget parameters

Example of a function that opens the widget:

function openWidget() {
    var widget = new PaytureWidget({
        Key : "Merchant_Widget",
        Amount : 20,
        Product : "Payment for order No. 1",
        Domain : 2,
        CustomParams :
        {
            TemplateTag : "Default",
            Language : "Default",
            Name : "John Smith",
            Delivery : "Pickup",
            OrderID : "1233abc6688",
            Url : "https://site.com/order"
        },
        ChequeParams :
        {
            Positions:[
               {
                  Quantity: 1.000,
                  Price: 10.00,
                  Tax: 2,
                  Text: "Tea"
               },
               {
                  Quantity : 2.000,
                  Price : 5.00,
                  Tax: 2,
                  Text: "Pie"
               }
            ],
            CustomerContact : "",
            Message: "Payture receipt"
        },
        OnTransactionCompleted : function(success) {
            alert( success );
        }
    });
}

Parameters passed to the PaytureWidget() constructor:

CustomParams

Widget template parameters. You can additionally pass any custom Merchant fields; they will be available in the template as placeholders.

ChequeParams

Fiscal receipt parameters. The minimum set of fields is listed below: