YandexCheckout UI
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 YooMoney 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 YooMoney 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 YooMoney APItext string{void}
.chargeFailful
Tells the form of an error from the YooMoney 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 YooMoney JS
yc_success
Token has been successfully createdObject is identical to the successful response in YooMoney 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 YooMoney 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 YooMoney 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 YooMoney API
    // ...

    // If the payment is successful, call the method
    $checkout.chargeSuccessful();
});
 
.chargeFailful
Tells the form about an error from the YooMoney 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 YooMoney API
    // ...

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