API : Affichage de la page de signature électronique en ligne

Une fois un contrat créé pour un client donné, il est possible de continuer le processus de signature directement depuis le cloud SELL&SIGN en intégrant une iframe à votre site. Pour réaliser cela, il faut déléguer l’authentification à l’utilisateur de votre site. Nous proposons une mécanique de token temporaire pouvant être restreint à certaines formes d’usage et/ou à l’accès à un contrat précis / client / type de contrat.

Création d’un token temporaire

Afin de limiter l’accès à la page de signature aux signataires que vous avez définis, vous devez générer un token temporaire qui permettra de les représenter et de contôler leurs accès.

La méthode à utiliser est :

https://[host]/calinda/hub/createTemporaryToken.action

 Elle ne peut être appelée qu’en HTTP POST.

Le contenu des données POST doit être en JSON :

{ "actorId": [actor id], 
   "time": [time],
   "profile": "sign_contract",
   "parameters": { 
	"contract_definition_id": [contract definition id],
	"customer_id": [customer number],
 	"contract_id": [contract id],
	"contractor_id": [contractor id]
   }
}
  • actor_id : identifiant de l’utilisateur ‘guest’ qui vous sera fourni par Calinda
  • time :  date en millisecondes UTC d’expiration du token
  • parameters : permet de définir le périmètre d’action autorisé du signataire. Insérez les identifiants de client (champ number), de contrat (champ id) et de signataire (champ id) obtenus précédemment.

Le service retourne alors un token de ce type :

1P4o!Z|dkKdGePcpSMhJtDKfRofYKH+Ez2Jr8pCUmVFZVYGW/skM0b+gglYMsjhcmAP7DRFYVpmQegWd2Ugs5PoiWQoESrxBECk7Hvs+Q2jK0IgndaAEkmhyC99z5QUVLqiU+5MvfE9QuTD8Ex2H38qFfmmyPgtU4wTpMaK57CNye49ISc= 

Affichage de la page de signature

Ce token s’emploie comme le token d’authentification décrit précédemment. Dans le cadre d’un usage par entête HTTP ou cookie, aucune modification n’est requise. En cas d’usage par paramètre (Query string), il faut « url encoder » le paramètre.

Exemple d’usage dans une iframe intégrée sur votre page web :

<html>
  <head>
  </head>
  <body>
    <iframe src="https://cloud.sellandsign.com/calinda/s/generic_sign_contract_index.html?l_id=id&direct_contract=1&cd_id=1&c_id=2&page=1&no_ui=true&customer_number=NC4xNDU1NTU3NjAxNTk0LjY2OTA0&j_token=%21%21%215tJ%7CS6Esy6OCRR62Jgp8df5JgUY2f2EoY3wFUmVFZVYGW%2FskM0b%2BgglYMsjhcmAP7DRFYVpmQegWd2Ugs5PoiWQoESrxBECk7Hvs%2BQ2jK0IgndaAEkmhyC99z5QUVLqiU%2B5MvfE9QuTD8Ex2H38qFfmmyPgtU4wTpMaK57CNye49ISc%3D">
    </iframe>
  </body>
</html>

Il est également possible de diriger directement le signataire sur la page de signature :

https://[host]/calinda/hub/selling/sign_contract.html?cd_id=1&c_id=2&page=1&j_token=%21%21%215tJ%7CS6Esy6OCRR62Jgp8df5JgUY2f2EoY3wFUmVFZVYGW%2FskM0b%2BgglYMsjhcmAP7DRFYVpmQegWd2Ugs5PoiWQoESrxBECk7Hvs%2BQ2jK0IgndaAEkmhyC99z5QUVLqiU%2B5MvfE9QuTD8Ex2H38qFfmmyPgtU4wTpMaK57CNye49ISc%3D

L’utilisateur peut continuer son processus de signature. Il faut modifier les paramètres suivants de l’url :

  • c_id : l’identifiant du contrat à faire signer
  • cd_id et direct_contract : l’identifiant du contrat type

Callback sur la signature

Pour pouvoir personnaliser la réponse à donner à votre client lors de la signature, vous pouvez enregistrer un callback.

Lorsque l’utilisateur a terminé son processus de signature, la page Sell&Sign contenu par l’iframe va générer un événement vers son parent. En se mettant à l’écoute de cet événement, il sera possible de connaître l’état de la transaction, de télécharger le contrat signé auprès de notre plateforme, de continuer un processus métier.

Pour s’enregistrer :

window.addEventListener("message", function(data){
	// your code here
 }, false); 

Quand le processus de signature est terminé, la fonction passée en paramètre ci dessus est appelée.

Les données (paramètre data ci dessus) reçues lorsque le message provient de l’iframe SELL&SIGN sont de la forme :

var data = { 
    action: "cal_callback",<= discriminant du message
    contract_id: <Id du contrat>,
    signed: <true si le contrat est signé>, 
    customer: <structure json du client> 
};