Hosted checkout

Using hosted checkout means using our payment page, to which you should redirect your customer. You receive the URL to the payment page in the response to the request for the hosted payment creation. The hosted checkout link can also be obtained through the merchant portal.

The structure of the hosted checkout includes information about the order (its number and description), the payment amount, as well as one or more payment methods configured on the corresponding live project.

Depending on which payment methods you work with, hosted checkout supports classic payment methods (payment by payment cards) and combinations of several different payment methods, for example, card data and digital wallets Apple Pay, Google Pay™, GG, Privat24.

Features supported on hosted checkouts:

Payment by payment cards
Validation of card data
Error messages
Alternative payment methods (Apple Pay, Google Pay™, Privat24, GG)
Compliance with PCI DSS standards
Different languages
Payment by saved cards
Checkouts with a free amount
Ability to manage the result page
Ability to pay fee by customers
Collecting data on payers
Auto redirect of customers to your site

The link to the hosted checkout can be sent to customers both in the form of a URL and in the form of a QR code.

Customization of the hosted checkout includes such features:

Using your payment page subdomain, such as pay.example.com, checkout.example.com.
Displaying a branded favicon (requires an image in ico format).
Placement of your company logo (requires svg image).
Setting preloader color (requires color information in hex format).
Setting the color of the payment button (requires color information in hex format).

Let Tranzzo Support know about your preferences for the hosted checkout customization of your live project.

caution

When using hosted checkout in iframe mode or a payment widget, for security reasons, the Apple Pay method is only supported on devices with Safari version 17 or higher.

caution

The Google Pay payment method is not supported when using a solution that displays the checkout in WebView mode in mobile apps on Android. To use this method, we recommend integrating through the Mobile SDK.

When using the hosted checkout in iframe mode, it is possible to receive events about the payment status. To receive these events, it is necessary to include information about the domain where the checkout is opened and where the corresponding events will be received in the request for the iframe checkout, in the following format: ?parentOrigin=https://example.com"

Example of initiating the checkout in iframe mode:

<iframe src="https://cpay-stg.tranzzo.com/api/v1/checkout/.../form?parentOrigin=https://example.com"></iframe>

The hosted checkout in iframe mode supports sending the following events:

Event status name	Description
`payment.success`	Payment has been successfully completed
`payment.failed`	Payment has failed. It also contains error code (errorCode) and its description (errorMessage)

Example of an event for an unsuccessful payment:

{
    status: 'payment:failed',
    errorCode: '123',
    errorMessage: 'Insufficient funds'
}