Payment page

On the payment page the buyer pays for an order: they choose a payment method, fill in the payer details and get a confirmation. By default the page looks like the Invoicebox service, but it can be branded as yours — from the colours to a custom header and footer. Invoicebox does the setup at your request.

How the buyer reaches the page

The buyer opens the payment page via a link:

from the store — after checkout, the store's website or app redirects the buyer to payment;
from the invoice email — the link leads to the page of a specific order;
from the Invoicebox account — via an invoice awaiting payment.

After payment the buyer returns to the store. You pass the return URLs for successful and failed payments when creating the order.

Where the page works

There is one page for all devices: desktop, tablet and smartphone get the same layout, adjusted to the screen width. Besides opening in a browser, the page can be embedded:

in an iframe — right on your website;
in a WebView — inside a mobile app.

Embedding has its limitations:

In an iframe the page lives on its own domain, so the buyer's browser must allow third-party cookies. Without them, profile sign-in and saved payer details won't work; payment itself works without signing in.
Card details are entered on the bank's side, not on the payment page: at the moment of payment the buyer is redirected to the bank's page and back. Your website or app must not block these redirects.
Paying via SBP opens the bank's app through an external link. The WebView must let such links out.

Note

Planning to open the page in an iframe or WebView? Tell your Invoicebox manager: it is best to agree on the domains and embedding scenarios in advance.

What can be customised

Logo — your logo in the page header instead of the Invoicebox logo.
Colours — body text, buttons and button text, links, payment method icons, the background of the cards and the whole page, state colours: success, error, warning. Hover and pressed shades are calculated automatically.
Images — a cover under the header and a background image for the whole page. File requirements are in the section below.
Header and footer — the standard Invoicebox template, a neutral version without a logo, or custom components in the style of your website.
Loading animation — a custom splash screen while the order is being prepared: for example, a plane for air tickets or a train for railway services. The terminology changes along with it: "Order" on the page becomes "Booking".
Promo blocks — banners for related Invoicebox services on the post-payment screens can be turned off.
Payment button — a style of its own: custom colour and text weight.

Tip

A logo and two or three brand colours are often enough to make the payment page look like an extension of your website. A custom header and footer come as a second step.

No redirect to the store after a guarantee payment

With a guarantee payment, the system places a hold on the order amount on a card or in the guarantee fund, and the invoice is paid later. By default, after such a payment the buyer stays on the payment page: they see that the funds are on hold, the invoice due date and a "Return" button that opens the store in a new tab. This keeps the invoice in front of the buyer until it is paid.

At your request, automatic return can be enabled: an individual goes to your website straight away, an organisation — after a window reminding them that the invoice has been sent by email.

Image requirements

Cover

The cover is a strip spanning the full window width, 154 pixels tall, under the page header. Prepare two files:

for wide screens (wider than 1400 pixels) — the image is centred;
for medium screens (up to 1400 pixels) — the image is aligned to the left edge.

Preparation rules:

The image is displayed at its natural size, without scaling, and any missing width is filled by repetition. Make the image exactly 154 pixels tall and generously wide: about 2560 pixels for the wide version and 1400 for the medium one. A seamless pattern designed to repeat also works.
The top 80 pixels of the cover are covered by the header: the logo on the left, the language switcher and the "Sign in" button on the right. Don't place accent elements near the top edge, especially in the top-right corner: they will end up under the header elements.
At the bottom centre, the order card overlaps the cover by 50 pixels. Only the margins to its left and right and a narrow strip in the middle stay fully clear.
On smartphones (screens up to 767 pixels) the cover is not shown. Don't put information on it that the buyer cannot do without: the mobile audience won't see it.
In the medium-screen version keep the accents closer to the left edge: as the window narrows, the right part of the image goes off screen.

Page background

The background image is stretched over the whole window without repeating and is centred. One high-resolution image works well; check that the form cards and text stay readable on top of it.

Custom header and footer

The header and footer can be made in the style of your website. Invoicebox develops the components from your materials; agree on the timeline with your manager.

What to prepare:

the logo in a vector format;
brand colours and, if available, header and footer mockups;
footer content: the support phone number, links to social media and mobile apps, the address of your privacy policy.

The header layout is the same in every theme: your logo on the left, the language switcher and the profile sign-in button on the right. The switcher and sign-in cannot be removed — the buyer needs them in any theme. You can add your own elements: for example, your phone number for the mobile version.

The footer has fewer restrictions: you define your own layout and fill it with your contacts, app links and documents.

Important

Every footer must include the Invoicebox block: the Invoicebox logo, a note that payments are accepted by OOO "ORC" as a party authorised by the supplier, and the "Offer" and "Support" links. Payments cannot be accepted without them, so they always stay in the layout.

Extra fields for the buyer

You can add fields that are not in the standard set to the order form for legal entities and sole proprietors (ИП). The filled-in values are saved with the order and available to you.

A field can be:

text — with a length limit;
numeric;
a list — the buyer picks from predefined values; a list can also be grouped, with sections inside.

Any field can be made required — the order won't be submitted without it.

For example:

"Business type" — the organisation picks its profile from a list, and you immediately know who you are dealing with;
delivery address — if the organisation has delivery addresses saved in Invoicebox, the buyer picks the right one from a list right on the payment page.

How to enable the settings

Write to your Invoicebox manager or to support: c-support@invoicebox.ru, +7 (812) 448-08-01 (9:00–21:00 Moscow time). Describe what you want to change and attach the materials: logo, colours, images. If you don't accept payments through Invoicebox yet, start with Connecting and accepting payments.