Интеграция HelloSign с React и Ruby on Rails

Что такое HelloSign?

HelloSign позволяет вам электронно запрашивать и добавлять юридически действительные подписи к любым документам, от договоров с новыми сотрудниками до кредитов и NDA. HelloSign доступен в интуитивно понятном веб-интерфейсе, удобном для разработчиков API или в виде дополнения для Salesforce.

Способы использования HelloSign

HelloSign можно использовать двумя способами:

1. Используя свой интерфейс
2. Использование веб-сайта HelloSign

Первый способ подразумевает интеграцию вашего API с HelloSign. Это позволит вам запрашивать подписи различными способами и в широком диапазоне технологий, таких как PHP, Ruby, Java, Node.js и других. Другая альтернатива дает вам возможность отправлять юридический документ (документы) на электронную почту человека.

В этой статье мы поговорим об использовании интерфейса.

Шаблоны

Шаблоны — это многократно используемые документы для подписи, идеально подходящие для таких часто используемых форм, как NDA, письма-предложения или договоры купли-продажи. Создайте их один раз, сохраните как шаблоны и используйте в следующий раз, когда они вам понадобятся.

Как они создаются? На приборной панели HelloSign есть раздел «Создать шаблон». Там вы можете загрузить документ, установить роли для каждого подписанта (например: клиент, я, менеджер). Затем вы можете начать добавлять поля для заполнения или метки полей (только для чтения). Крайне важно, чтобы эти поля были написаны так же, как они заполняются API (они чувствительны к регистру).

Бэкэнд

Для начала

Прежде чем погрузиться в реализацию бэкенда, необходимо убедиться, что у вас уже есть учетная запись HelloSign и хотя бы один созданный шаблон.

HelloSign Ruby SDK

HelloSign предоставляет Ruby SDK, с помощью которого вы можете взаимодействовать с их API. Запустить его довольно просто, единственное, что вам нужно сделать, кроме установки gem, это настроить api_key, который вы можете найти или создать в веб-приложении HelloSign в разделе Settings > API.

Использование

@client = HelloSign::Client.new(api_key: ENV['HELLOSIGN_API_KEY'])

Вот и все. Теперь через @client вы можете общаться с API HelloSign. И что теперь? Давайте создадим документ, который пользователь может подписать.

Для этого нам нужно знать несколько вещей:

Далее вы можете увидеть пример вызова для создания нового документа:

Таким образом, с помощью этого последнего фрагмента кода мы создали встроенный запрос на подпись. В ответе от API мы можем найти некоторую полезную информацию, например, sign_url. Вам нужно отправить его во фронтенд вашего приложения, чтобы документ мог быть встроен.

Вот и все! После того как фронтенд вашего приложения отобразит документ и пользователь подпишет его, он будет перенаправлен на url обратного вызова и продолжит движение.

Но что если вы хотите проверить, действительно ли документ был подписан? Легко, с помощью веб-крючков HelloSign.

Webhooks

HelloSign предоставляет веб-крючки, которые вы можете настроить на конечную точку вашего API, и вы начнете получать различные события. Подробную документацию по веб-крючкам и событиям вы можете найти здесь. Вам просто нужно слушать нужные вам события и делать соответствующие действия.

Фронтенд

HelloSign Embedded

HelloSign предоставляет библиотеку Javascript для React, которая позволяет встраивать документы для подписания в ваше собственное приложение с минимальными усилиями. В их репозитории, ссылка на который приведена выше, вы можете найти шаги по ее установке.

Использование

Для начала мы должны инстанцировать клиент HelloSign.

const helloSignClient = new HelloSign({ clientId: HELLOSIGN_CLIENT_ID })

Следующее, что нам нужно, это получить URL документов для подписи. Это должно быть предоставлено бэкендом, как мы уже упоминали выше. Как только мы получим эти урлы, мы сможем их отобразить. Чтобы отобразить документ, нам нужно иметь <div> с определенным id.

<div id="hellosign-document-container" />

Затем документ может быть отображен в указанном контейнере. Вот способ сделать это:

const showContract = signingUrl => {
  helloSignClient.open(signingUrl, {
    allowCancel: false, 
    container: document.getElementById('hellosign-document-container'),
    skipDomainVerification: process.env.HELLOSIGN_PRODUCTION_MODE !== 'true'
  });
};

Вы также можете обрабатывать события клиентов, такие как, например, знак.

helloSignClient.on('sign', () => { 
  yourRandomFunctionToDoRandomStuff();
});

Более подробную информацию о событиях, которые можно обрабатывать, вы можете найти здесь

Заключение

HelloSign — это простой способ позволить пользователям вашего приложения легально подписывать документы, довольно простым способом и с минимальными усилиями для разработчиков благодаря готовому решению, которое они предоставляют.