Виджет получения информации о карте в интернет-магазине

Виджет предназначен для:

получения информации о существующей карте лояльности в интернет-магазине;
регистрации клиента в программе лояльности (только о телефону)

Может использоваться:

в личном кабинете или и на чекауте, чтобы связать пользователя сайта с пользователем CRM и получить его данные (ФИО, email, данные анкеты и прочее)
для авторизации доступа пользователя в личный кабинет
Пользователь вводит телефон, нажимает капчу “я не робот”, нажимает “отправить”.
Виджет проверяет есть ли телефон в CRM, если есть, то отправляет код подтверждения. a. Если телефона нет, создает новую карту или выдает ощибку в зависимости от настройки embed.create-cards
Пользователь вводит код.
При вводе правильного в ЛК или в чекаут возвращается ФИО, номер карты, размер скидки или число накопленных бонусов (вызывается коллбек onReady).

В случае, если параметр saveInfo = true (по умолчанию), виджет сохраняет данные о факте авторизации карты лояльности клиента в LocalStorage. При следующих загрузках страницы данные о карте будут перезапрошены из CRM, форма будет скрыта, коллбек onReady будет вызван из конструктора объекта.

Настройки системы (общие)

embed.secret — из настроек reCaptcha
embed.create-cards — разрешить создавать карты
embed.sites — сайт на котором установлена форма
embed.workplace — код рабочего места от имени которого выполняются запросы
sms.template.remote-auth — шаблон СМС сообщения Код <%- authreqCode %>.

Пример использования на странице

Виджет может находиться в состояниях:

начальное
AuthCodeRequested
AuthCodeRequested + AuthCodeCanResend

Виджет добавляет класс с именем состояни к контейнеру. Таким образом разработчик может управять видимостью и стилем отображения элементов через CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <script src="https://wallet.client.ru/api/embed/v1/loader.v001.js"></script>
</head>
<body>
   <style>
   #AuthRestart {
       display: none;
   }
   #AuthError {
       visibility: hidden;
   }
   #AuthCode {
       visibility: hidden;
   }
   #AuthSent {
       display: none;
   }
   #AuthResend {
       display: none;
   }
   .AuthHasError #AuthError {
       visibility: visible;
   }
   .AuthCodeRequested #AuthRestart {
       display: block;
   }
   .AuthCodeRequested #AuthGreeting {
       display: none;
   }
   .AuthCodeRequested #AuthCode {
       visibility: visible;
   }
   .AuthCodeRequested #AuthSent {
       display: block;
   }
   .AuthCodeRequested #AuthCaptcha {
       display: none;
   }
   .AuthCodeRequested #AuthButton {
       display: none;
   }
   .AuthCodeRequested.AuthCodeCanResend #AuthSent {
       display: none;
   }
   .AuthCodeCanResend #AuthResend {
       display: block;
   }
   </style>
   <div id="AuthContainer">
       <div id="AuthGreeting">
            <h2>Войти или зарегистрироваться</h2>
            <p>мы отправим на номер SMS сообщение с кодом подтверждения</p>
       </div>
       <div id="AuthRestart">
           <button type="button">&larr;</button>
           Подтвердите номер
       </div>
       <div id="AuthPhone">
           +7 <input type="tel"/>
       </div>
       <div id="AuthCaptcha"></div>
       <div id="AuthButton">
           <button type="button">
               Войти или зарегистрироваться
           </button>
       </div>
       <div id="AuthCode">
           <input type="text">
       </div>
       <div id="AuthSent">
           код отправлен, запросить повторный можно через
           <span id="AuthSeconds"></span>
        </div>
       <div id="AuthResend">
           <button type="button">
               отправить код снова
           </button>
        </div>
       <div id="AuthError"></div>
   </div>
   <script>
       new ExtrovertRemoteAuth({
               host: 'https://wallet.client.ru',
               container: 'AuthContainer',
               input: 'AuthPhone',
               button: 'AuthButton',
               error: 'AuthError',
               code: 'AuthCode',
               resendSeconds: 'AuthSeconds',
               resend: 'AuthResend',
               restart: 'AuthRestart',
               captcha: 'AuthCaptcha',
               captchaParams: {
                   sitekey: "6Ldh8kEUAAAAAINO57VN4DJ1hAAAA__A_AAAAAA"
               },
               saveInfo: true,
               noAutoLogin: false,
               onReady: (cardInfo) => {
                    ...your code here...
               }
        });
    </script>
</body>
</html>

Параметры конструктора

Настройка	Описание
`container`	ID контейнера в котором находится HTML код, при ошибке контейнеру будет назначен класс `SurveyHasError`.
`input`	ID HTML элемента в котором находится input для ввода номера телефона.
`button`	ID HTML элемента в котором находится button “Получить карту”.
`error`	ID HTML элемента в который будет добавлено сообщение об ошибке.
`code`	ID HTML элемента в котором находится описание действий и input для ввода кода подтверждения.
`noAutoLogin`	По умалчанию, если клиент авторизировался через виджет, при следующей загрузке страницы сразу будет вызван колбек `onReady`. `noAutoLogin: true` отключает это.
`saveInfo`	Сохранять/не сохранять информацию о карте в LocalStorage после успешного ввода кода
`onReady`	Коллбек который будет вызван после того, как будет успешно пройдена идентификация.

Параметр коллбека `onReady` `cardInfo`

Параметр	Описание
`phone: string`	Номер телефона
`cardNumber: string`	Номер карты
`firstName: string`	Имя
`secondaryName: string`	Отчество
`familyName: string`	Фамилия
`discPercent: float`	Процент скидки
`discSavings: float`	Текущая сумму продаж клиенту
`bonusSum: float`	Количество бонусов
`bonusPercent: float`	Процент начисления бонусов
`authToken: string`	Токен для обращения к «API поддержки виджетов»

Важно! До инсталляции кода необходимо разрешить сайту, на который установлен код совершать CORS запросы через настройку embed.sites (или послать запрос на support@extrovert.online).

В примере необходимо заменить адрес wallet.client.ru на адрес системы (в 3-x местах).

При установке кода можно применять любые стили к HTML коду, а также изменять стили, которые есть в примере.

Во время работы, скрипт применяет к контейнеру (настройка container) класс SurveyHasError (если нужно показать ошибку) и SurveyCodeRequested если система отправила код подтверждения на телефон клиента.

Виджет получения информации о карте в интернет-магазине

Настройки системы (общие)

Пример использования на странице

Параметры конструктора

Параметр коллбека onReady cardInfo

Параметр коллбека `onReady` `cardInfo`