YandexCheckout UI
SDK is deprecated. We recommend using the widget for embedding the form.
UI library is a ready-made form for accepting payments made via bank cards. Works with YandexCheckout.js.
The form can:
  • show messages to users in English and Russian languages;
  • validate card data in real time;
  • identify the card’s issuing bank and add the bank’s brand color palette to the image of the card.
YandexCheckout UI exchanges the data entered by the user for a one-time payment token so that you won’t have to process payment data in your system. You need to include this token to Yandex.Checkout in a request for creating a payment.
 Initialization
You can connect to the library only via CDN.
Add the script from CDN. The library will be available in the global scope as 
YandexCheckoutUI
.
Adding the script from CDN
HTML
<script src="https://static.yamoney.ru/checkout-ui/v1/checkout-ui.js"></script>
After that you can create a YandexCheckoutUI instance and use
$checkout
to generate bank card data tokens.
You can create payments using tokens after making a corresponding request to your Yandex.Checkout manager.
Creating a YandexCheckoutUI instance
JavaScript
const $checkout = YandexCheckoutUI(123456);

//123456 — your shopId
 Configuration
You can configure the form by:
  • choosing the interface language (to display the text in forms and user errors);
  • selecting the amount to be shown in the form;
  • setting up the autopayment notification (when the option to make direct debits from this card within your service becomes available after a successful payment).
Example of a form configuration
JavaScript
const $checkout = YandexCheckoutUI(123456, {
    language: 'en',
    domSelector: '.my-selector',
    amount: 99.99
});
ParameterDescriptionTypeDefault
language
Interface language (display text, responses, errors). Possible values:
en
or 
ru
string
ru
amount
Payment amount shown in the formnumber0
isRecurrent
Add the message informing of further direct debits (recurring payments) to the formboolean
false
JSON
{
    // response messages language
    language: string ('en' | 'ru') ['ru'],

    // amount shown in the form
    amount: number ['0'],

    // Recurrent payments enabled
    isRecurrent: true [false]
}
 Methods
MethodDescriptionRecievesReturns
.open
Shows the form{void}
.close
Hides the form{void}
.on
Enables notifications
yc_error
,
yc_success
{void}
.showLantern
Shows message to usertext string{void}
.hideLantern
Hides message to user{void}
.toggleLantern
Changes the status of the message for usertext string{void}
.chargeSuccessful
Tells the form of a successful response from the Yandex.Checkout APItext string{void}
.chargeFailful
Tells the form of an error from the Yandex.Checkout APItext string{void}
 .open
Shows the payment form.
JavaScript
const $checkout = YandexCheckoutUI(123456);
$checkout.open();
 .close
Hides the payment form.
JavaScript
const $checkout = YandexCheckoutUI (123456);
$checkout.close ();
 .on
Allows subscribing to notifications informing of everything going on with the library.
Available notifications:
  • on errors —
    yc_error
    ;
  • on successful token creation —
    yc_success
    .
EventDescriptionReturns
yc_error
Error of some kind has occurredObject is identical to the error in Yandex.Checkout JS
yc_success
Token has been successfully createdObject is identical to the successful response in Yandex.Checkout JS
Example of error
JavaScript
$checkout.on('yc_error', response => {
    /*
    {
        status: 'error',
        error: {
            type: 'validation_error',
            message: undefined,
            status_code: 400,
            code: undefined,
            params: [
                {
                    code: 'invalid_number',
                    message: 'Invalid card number'
                },
                {
                    code: 'invalid_expiry_month',
                    message: 'Invalid month value'
                }
            ]
        }
    }
    */
});
Example of successful token creation
JavaScript
$checkout.on('yc_success', response => {
    /*
    {
        status: 'success',
        data: {
            message: 'Payment token created',
            status_code: 200,
            type: 'payment_token_created',
            response: {
                paymentToken: 'eyJlbmNyeXB0ZWRNZXNzYWdlIjoiWlc1amNubHdkR1ZrVFdWemMyRm5aUT09IiwiZXBoZW1lcmFsUHVibGljS2V5IjoiWlhCb1pXMWxjbUZzVUhWaWJHbGpTMlY1IiwidGFnIjoiYzJsbmJtRjBkWEpsIn0K'
            }
        }
    }
    */
    console.log(response);
});
 .showLantern
Shows a message above the form to the user (in case there’s a request error in the Yandex.Checkout API).
ParameterTypeDescription
text
stringError description
JavaScript
const $checkout = YandexCheckoutUI(123456);
$checkout.showLantern('Error text');
 .hideLantern
Allows hiding the error message.
JavaScript
const $checkout = YandexCheckout(123456);
$checkout.hideLantern();
 .toggleLantern
Shows or hides the error message.
ParameterTypeDescription
text
stringError description
JavaScript
const $checkout = YandexCheckoutUI(123456);
$checkout.toggleLantern('Error text');
 .chargeSuccessful
Tells the form of a successful response from the Yandex.Checkout API.
After this method is called:
  • the error message will be hidden (if it’s shown);
  • the form will be closed.
JavaScript
const $checkout = YandexCheckoutUI(123456);

// Open the form
$checkout.open();

// Token successfully created
$checkout.on('yc_success', () => {
    // Request to Yandex.Checkout API
    // ...

    // If the payment is successful, call the method
    $checkout.chargeSuccessful();
});
 .chargeFailful
Tells the form about an error from the Yandex.Checkout API.
After this method is called, the error message will be displayed to the user.
ParameterTypeDescription
text
stringError description
JavaScript
const $checkout = YandexCheckoutUI(123456);

// Open the form
$checkout.open();

// Token successfully created
$checkout.on('yc_success', () => {
    // Request to Yandex.Checkout API
    // ...

    // Payment failure
    $checkout.chargeFailful();
});
 See also
YandexCheckout.jsPayment tokenPayment processNotifications