Integración API para principiantes

Aprende a integrar la API de Signaturit con esta guía paso a paso

REQUISITOS

Antes de empezar a programar, necesitas lo siguiente para crear tu aplicación web: 

1. Editor de texto:

Necesitarás un editor de texto para escribir el código de este tutorial.

Descarga Atom Editor, un editor gratuito y muy completo.

2. XAMPP:

Para ejecutar el código PHP necesitas instalar el lenguaje y un servidor web para crear la página. XAMPP es un paquete que incluye el lenguaje PHP, Apache Web Server y MySQL (no lo necesitarás para este tutorial pero viene incluido en el paquete).

Descarga XAMPP desde su página web. 

3. Composer:

Composer es un gestor de paquetes para PHP. Te permite instalar muchas bibliotecas que están disponibles para que las uses en tus proyectos.

Descarga Composer y sigue las instrucciones.

4. SDK de Signaturit en PHP:

Necesitarás nuestro SDK para crear el script "send.php", el cuál generará la petición de firma. 

Descarga el SDK y obtén más información

5. Lo fundamental de Signaturit:

Registra una cuenta en el entorno de Sandbox para realizar las pruebas, obtén tu token y ten toda la documentación a mano

CÓDIGO

1. Comprueba la instalación de XAMPP:

Para comprobar que la instalación de XAMPP se ha llevado a cabo con éxito, crea un archivo llamado "info.php" en c:\xampp\htdocs\info.php con lo siguiente: 

<?php
phpinfo();

Abre tu navegador y ve a http://localhost/info.php. Debería aparecer una pantalla como esta: 

Esta pantalla confirma que PHP y XAMPP se han instalado con éxito y que ya puedes comenzar con el proceso de integración.

2. Crea la carpeta de tu proyecto: 

Crea una carpeta en C:\xampp\htdocs con el nombre de "Signaturit". En esta carpeta irán todos los archivos relacionados con tu proyecto. 

3. Crea un formulario en HTML:

Abre el editor de texto y crea un archivo llamado "index.html". Copia el siguiente código:  

<!DOCTYP html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Signaturit</title>
</head>
<body>
<h3>Please fill-out the following form:</h3>

<form method="post" action="send.php">
First name: <input type="text" name="name" />
<br>
Email Address: <input type="text" name="email" />
<br>
<hr>
<input type="submit" value="Submit" />
</body>

</html>

Se trata de un formulario sencillo que recogerá el nombre y el email del firmante y lo pasará a "send.php". 

4. Instala el composer: 

Crea un archivo llamado "composer.json" en la carpeta del proyecto:

{
"require": {
"signaturit/signaturit-sdk": "^1.0"
}
}

A continuación, abre el Command Prompt y dirígete a la carpeta del proyecto. 

Ejecuta el comando de "Composer install".

Si todo va bien se creará una carpeta llamada "vendor" en la carpeta de Signaturit y verás algo como esto:

5. Crea el archivo de "send.php":

"send.php" gestionará toda la información recogida en el formulario HTML y la enviará a Signaturit. Crea un archivo en tu editor llamado "send.php" y guárdalo en la carpeta del proyecto. Copia el siguiente código:

<?php
require_once __DIR__.'/vendor/autoload.php';
$client = new Signaturit\Client('LxSOTPJUsvDaFaENENuLiOoHvRFVyusIBXarOaEtQnCQWpjznUmRURGCemiIzNCRTPQPMQpRiPuNkxEQQwRHaZ');

$response = $client->createSignature(
[],
[
'name'=> $_POST['name'],
'email' => $_POST['email'],
],
[
'templates' => ['#test'],
'delivery_type' => 'url',
]
);
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html"; charset="utf-8">
<title>Signaturit</title>
</head>
<body>
<h3>Please sign the document:</h3>
<iframe src="<?php echo $response['url'] ?>" width="800" height="600"</iframe>
</body>
</html>

6. Crea una plantilla:

Crea una plantilla en Signaturit y nómbrala "#test". Mira este tutorial para saber cómo crear una plantilla.

Este será el documento de prueba a firmar. 

PRUEBA EL CÓDIGO

Ve a http://localhost/signaturit y comprueba los resultados.

Rellena la información y haz click en "Submit". Te debería aparecer la pantalla de "Ver Documento" y la plantilla de prueba que has llamado "#test", lista para ser firmada. 

  • Formulario en HTML: 

 

  • Aplicación de firma: 

 

 

¿Tiene más preguntas? Enviar una solicitud

0 Comentarios

El artículo está cerrado para comentarios.
Tecnología de Zendesk