Project

General

Profile

Paramétrage d'un formulaire de réservation d'activité en lien avec du paiement en ligne

Pour ce tutoriel nous utiliserons une régie Factice

Paramétrage d'une régie Factice

Pour créer une nouvelle régie, rendez-vous dans le back-office dans l'onglet d'édition du portail citoyen (CMS).
Cliquez en haut à droite sur l'icône de menu
Sélectionnez "paiement en ligne".
Sur la page suivante cliquez sur l'icône "Régies"

Vous avez maintenant la possibilité de créer une nouvelle régie. Si aucune régie factice n'existe déjà, cliquez en haut à droite sur "nouvelle".

Saisissez ensuite une libellé de régie, un identifiant (l'identifiant est destiné à la création des url, il ne doit contenir ni caractères accentués, ni espaces, ni caractères spéciaux autres que "_" ou "-"), une description.
Pour le service de paiement choisissez "Factice". Pour créer une régie en lien avec un prestataire bancaire, reportez vous à la section de paramétrage des régies. [fixme lien vers section de la doc paiement]

Les options de paiements doivent être pour cette régie :

{
  "siret": "siret_num" 
}

Nous n'avons pas besoin de fournir un webservice de récupération de factures dans notre exemple.
Le montant minimum est laissé à 0.

Saisissez un texte à afficher à l'usager lors du retour, suite à la validation du paiement.

Validez, la régie est maintenant créée.

Mettre en place les éléments front office d'affichage de panier et transactions pour l'usager

Dans la partie Édition du portail citoyen, choisissez la page sur laquelle vous souhaitez exposer ces blocs.
Dans la zone choisie, ajoutez une nouvelle cellule de type panier et une cellule de type transactions récentes.

Vous pouvez en régler la visibilité suivant le besoin. Temps qu'aucun élément ne sera présent dans le panier et qu'aucune transaction n'aura eu lieu pour l'usager, ces blocs luis seront invisibles en front office.

Les étapes de paiement dans le workflow.

création du paiement

Créez un nouveau workflow paiement.
Le moment de la création du panier de l'usager dépend de vos règles de gestion, le plus simple pour l'usager est de pouvoir payer instantanément après validation du formulaire et donc le panier est créé dès cet instant, mais dans certains cas une médiation sera nécessaire avant de lui permettre de payer (pour des tarifs liés à des quotients par exemple).

Ici nous déclenchons la création des éléments de panier à la soumission du formulaire, nous créons dons le panier dans le premier statut du workflow.

Créez un statut "création du panier" et un statut "En attente de paiement".

Conseil :
Pour optimiser l'utilisation de votre workflow et le relier éventuellement à plusieurs formulaires de paiements différents, il est conseillé de créer un certains nombre de variables 
de workflows afin de rendre votre paramétrage le plus flexible possible.

Par exemple, une variable Régie vous permettra de définir une régie différente suivant le formulaire en utilisant un seul workflow.
Une variable tarif unitaire, vous permettra de définir un tarif au niveau du formulaire...

Dans le statut "création du panier" ajoutez un élément de type "Appeler un webservice". C'est lui qui nous permet de communiquer avec le module de paiement et donc de créer un panier.
Donnez lui un libellé (facultatif) et founissez lui l'url d'appel :

[portal_url]/api/lingo/add-basket-item?NameId=[form_user_name_identifier_0]&regie_id=[form_option_regie]

ici [form_option_regie] correspond à une variable de workflow, si vous préférez vous pouvez saisir ici directement l'identifiant de la régie.

Dans la zone "envoyer les données" vous devez préciser le montant du panier qui va être créé. Ce montant est envoyé dans une valeur amount.

Ce montant peut être un montant fixe lié à un tarif défini dans le formulaire, il peut également être calculé.

Montant fixe :

Montant fixe issu d'une variable de workflow :

Montant calculé à partir d'une ou plusieurs variables (par exemple achats de plusieurs activités) :

Donnez ensuite un nom de variable à cet appel. Cette variable est importante car elle nous permettra ensuite l'annulation du panier si besoin.

Nous ne détaillons pas ici toutes les options de l'appel webservice (vous pouvez gérer les erreurs comme vous le souhaitez et les afficher si besoin). Pour plus d'information rendez-vous dans la section concernée : [fixme lien vers l'action appeler un webservice]

À la suite de cette action d'appel webservice, ajoutez une action de changement de statut automatique qui pointe vers le statut en attente de paiement.

Dans le statut en attente de paiement créez une action "afficher un message" dans lequel vous pouvez expliquer à l'usager qu'il doit régler sa commande pour la valider définitivement et lui afficher un lien vers le panier (page du CMS qui contient le panier).

validation du paiement

Lors de la création d'un élément dans le panier, l'usager doit payer sa commande pour finaliser la procédure, il faut donc pouvoir faire avancer la demande dans le workflow en parallèle de la réception du paiement.

Commencez par créer un statut "paiement reçu".

Nous allons maintenant placer dans le statut "en attente de paiement" un changement de statut automatique basé sur un déclencheur.

Dans le statut "en attente de paiement", ajoutez une action "changer de statut automatiquement". Cette action pointe vers le statut paiement reçu et possède dans le champ déclencheur la valeur suivante : paid

Lorsque l'élément du panier correspondant sera payé, la demande liée basculera automatiquement dans le statut "paiement reçu".

Annulation du paiement depuis une action de workflow

Créez un statut "Annulation du panier". Dans le statut en attente de paiement créez une action de changement de statut intitulée "Annuler ma commande" qui sera affichée à l'usager et lui permettra de basculer vers le statut "Annulation du panier".

Dans le statut Annulation du panier, déclarez une action "Appeler un webservice".

L'url d'annulation d'un panier est la suivante :

[portal_url]/api/lingo/remove-basket-item?NameId=[form_user_name_identifier_0]

Il faut ensuite décocher la case "Envoyer les données du formulaire".

Et renseigner manuellement l'envoi des données :

La variable [panier_response_id] correspond à l'identifiant de création du panier renvoyé lors de l'appel webservice de création dans le statut correspondant. la racine "panier" variera donc en fonction du nommage que vous aurez choisi.

Suite à l'annulation, il est possible de prévoir l'affichage d'un message à l'usager via l'action "afficher un message".

Annulation du paiement depuis le panier

Lors de la création d'un élément dans le panier, l'usager à la possibilité de supprimer celui-ci depuis le panier, il faut donc pouvoir annuler en parallèle la demande correspondante.
Nous allons donc placer dans le statut "en attente de paiement" un changement de statut automatique basé sur un déclencheur.

Dans le statut "en attente de paiement", ajoutez une action "changer de statut automatiquement". Cette action pointe vers le statut annulation du panier et possède dans le champ déclencheur la valeur suivante : cancelled

Annuler un paiement à l'issue d'un délais

Vous pouvez également annuler un paiement à l'issue d'un délais d'inaction de l'usager (s'il n'a pas validé son panier au bout de 24 heures par exemple).

Pour cela placez dans le statut en attente de paiement une action de changement de statut automatique vers le statut "annulation du panier" en donnant un délais d'expiration, par exemple "24 heures"

L'issue de ce délai la demande sera annulée et la commande supprimée du panier.

menu-paiement.png View - icone-paiement (362 Bytes) Victor Claudet, 07 Apr 2017 02:27 PM

calcul-montant.png View - montant calculé (6.62 KB) Victor Claudet, 07 Apr 2017 03:25 PM

tarif_variable_workflow.png View - montant variable de workflow (4.52 KB) Victor Claudet, 07 Apr 2017 03:25 PM

tarif_fixe.png View - montant fixe (4.04 KB) Victor Claudet, 07 Apr 2017 03:31 PM

annulation.png View - données d'annulation du panier (7.21 KB) Victor Claudet, 07 Apr 2017 05:56 PM

inscription-simple-paiement.wcs - formulaire exemple (1.7 KB) Victor Claudet, 07 Apr 2017 06:40 PM

exemple-paiement-en-ligne.wcs - workflow exemple (4.27 KB) Victor Claudet, 07 Apr 2017 06:40 PM

Also available in: PDF HTML TXT