Introduction

Our Outil de constructions de modèles allows you to customise your payment pages for our Hosted Checkout Page and Hosted Tokenization Page solutions.  By creating your own templates, you can adapt the look and feel of the secure payment pages according to your brand and requirements. 

• Our Hosted Tokenization Page offers the highest degree of customisation. Take a look at these features. 
• Encourage your customers to complete their order after being redirected to the Hosted Checkout Page. 

Aperçu/éditeur de modèle

Le Outil de constructions de modèles se compose de deux sections principales : l'aperçu en production et l'éditeur. Ces sections vous permettent de visualiser et de modifier vos modèles personnalisés. 

Aperçu en production 

L'aperçu en production offre un rendu en temps réel de diverses pages de paiement basé sur le code HTML de l'éditeur. Il propose les options suivantes pour simuler différents scénarios/réglages : 

• Page de paiement : affiche les différentes étapes du flux de paiement.
  • PaymentMethodList : La page affichant toutes les méthodes de paiement disponibles
  • PaymentMethodForm : le formulaire affiché au consommateur après la sélection d'une méthode de paiement. Veuillez noter que certaines méthodes de paiement (par exemple, Paypal) n'ont pas de formulaires car elles redirigent directement le consommateur vers une plateforme de paiement externe
  • Pages de statut : les pages de résultat de paiement et de redirection. En fonction du scénario individuel / méthode de paiement, un flux de transaction complet peut inclure plusieurs étapes. Le flux d'une transaction PayPal sera comme suit :

En revanche, une transaction Visa incluant une authentification forte 3-D Secure (SCA) couvrirait plus d'étapes : 

• Taille de l'écran : simule différents types d'appareils
• Devise : change la devise des pages de paiement
• Langue : change la langue utilisée dans les pages de paiement

Vous pouvez incorporer diverses pages de paiement dans un seul modèle en utilisant des balises spécifiques.

payment-paymentmethod-selection
payment-paymentmethod-form
payment-status-page

Ces balises sont rendues en fonction du flux de paiement :

payment-paymentmethod-selection

Liste des méthodes de paiement :

payment-paymentmethod-selection
payment-paymentmethod-form

Formulaire de méthode de paiement :

payment-paymentmethod-form
payment-status-page

Page d'état et de redirection :

payment-status-page

Notre système sélectionne automatiquement les balises appropriées en fonction de l'étape actuelle dans le flux de transaction. Pour mettre à jour l'aperçu en production selon vos sélections ou modifications dans l'éditeur, il vous suffit de cliquer sur le bouton "ACTUALISER".

Éditeur

L'éditeur est l'endroit où vous définissez le code source HTML pour votre modèle personnalisé. Il affiche le code source du modèle actuellement visible dans l'aperçu en production. Vous pouvez soit modifier le modèle par défaut fourni, soit le remplacer entièrement par votre code HTML. 
Le côté gauche de l'éditeur contient une liste de balises disponibles qui vous aident à personnaliser le modèle. Double-cliquez simplement sur une balise pour l'ajouter automatiquement au code source à la position actuelle du curseur.

Format de modèle

Les modèles que vous créez avec le Constructeur de Modèles sont des documents HTML. Ils contiennent des entités spéciales appelées "balises" pour les paramètres dynamiques. Nous distinguons entre balises simples et complexes.

Balises simples

Ces balises n'ont pas de contenu et sont utilisées pour insérer des valeurs dynamiques, telles que des références de paiement ou des titres de page.
La syntaxe la plus basique est :

<payment-tag />

L'ajout d'attributs HTML est autorisé :

<payment-tag attribute />

ou

<payment-tag attribute="value" />

Cependant, l'ajout d'attributs commençant par payment n'est pas autorisé.

Balises complexes

Les balises complexes rendent leur contenu lorsqu'elles disposent des données nécessaires. Dans l'exemple ci-dessus, si aucun élément de la ligne (panier d'achat) n'est envoyé dans votre requête CreatePayment/CreateHostedCheckout, payment-lineitems ne rendra rien. 

Les balises complexes ont du contenu. La syntaxe est

<payment-tag> HTML code here </payment-tag>

Les attributs HTML sont autorisés.

Ceci est un exemple de modèle contenant des balises complexes "payment-lineitems" et "payment-lineitems-list" :

<html>
   <body>
      <payment-lineitems>
         <table border="1">
            <tr>
               <th><payment-item-name-text /></th>
               <th><payment-number-items-text /></th>
               <th><payment-item-price-text /></th>
            </tr>
            <payment-lineitems-list>
             <tr>
                <td><payment-item-productname /></td>
                <td><payment-item-quantity /></td>
                <td><payment-item-totalamount /> <payment-currency /></td>
             </tr>
             </payment-lineitems-list>
          </table>
       </payment-lineitems>
    </body>
 </html>

Certaines balises complexes, comme payment-lineitems-list, sont rendues plusieurs fois pour chaque élément envoyé dans votre requête.

Pages de paiement

Pour tester votre modèle dans différents scénarios, l'option "Page de paiement" dans le générateur de modèles contient trois types de pages :

• Liste de méthodes de paiement : la liste des méthodes de paiement disponibles pour le consommateur.
• Formulaire de méthode de paiement : le formulaire affiché au consommateur après la sélection d'une méthode de paiement. Certaines méthodes de paiement n'ont pas de formulaire car elles redirigent directement le consommateur vers une plateforme de paiement externe.
• Pages de statut : les pages de résultat de paiement mais aussi les pages de redirection.

Vous pouvez inclure ces pages dans un seul modèle en utilisant les balises suivantes : payment-paymentmethod-selection, payment-paymentmethod-form et payment-status-page. Ces balises sont rendues en fonction du flux de paiement :

<payment-paymentmethod-selection>

Liste des méthodes de paiement :

</payment-paymentmethod-selection>
<payment-paymentmethod-form>

Formulaire de méthode de paiement :

</payment-paymentmethod-form>
<payment-status-page>

Page d'état et de redirection :

</payment-status-page>

Liste des balises disponibles

La liste suivante donne un aperçu de toutes les balises disponibles et de leur hiérarchie d'utilisation :

• global : balises qui peuvent être utilisées partout.
• root : balises qui peuvent être utilisées en dehors de toute autre balise.
• les autres balises ne sont disponibles que sous des balises parentes spécifiques, comme indiqué dans la liste.

Nom	Description	Type / Disponible sous
payment-about-link	Un lien d'information pour informer les consommateurs sur le commerçant	Simple global
payment-beneficiary	Le nom commercial défini sur votre compte commerçant	Simple global
payment-beneficiary-text	Le texte 'Bénéficiaire'	Simple global
payment-currency	Devise du paiement	Simple global
payment-item-name-text	Texte 'Nom de l'article'	Simple global
payment-item-price-text	Texte 'Prix de l'article'	Simple global
payment-lang	Code de langue à deux lettres du paiement (ex : EN)	Simple global
payment-legal-info-link	Un lien vers la page des informations légales du commerçant	Simple global
payment-mandatory-fields-text	Le texte expliquant les champs obligatoires	Simple global
payment-number-items-text	Texte 'Nombre d'articles'	Simple global
payment-orderid	Référence du commerçant pour la commande	Simple global
payment-orderid-text	Texte 'Référence de la commande'	Simple global
payment-order-overview-text	Texte 'Aperçu de la commande'	Simple global
payment-payid	Référence de la plateforme de paiement pour le paiement	Simple global
payment-paymentmethod-form-text	Texte 'Formulaire de méthode de paiement'	Simple global
payment-paymentmethod-selection-text	Texte 'Sélection de la méthode de paiement'	Simple global
payment-pay-with-text	Texte 'Payer avec'	Simple global
payment-privacy-policy-link	Un lien vers la page de la politique de confidentialité. OBLIGATOIRE.	Simple global
payment-processed-img	Image 'traité par'	Simple global
payment-security-link	Un lien vers la page de sécurité	Simple global
payment-select-pm-text	Texte pour 'Sélectionner le mode de paiement'	Simple global
payment-total-amount	Montant total du paiement	Simple global
payment-total-amount-text	Texte 'Montant total'	Simple global
payment-tp-resource-file	Rendre le fichier de ressource avec la vérification de l'intégrité des sous-ressources activée	Simple global
payment-vatid-number	Le numéro de TVA défini sur votre compte marchand	Simple global
payment-vatid-number-text	Texte 'Numéro de TVA'	Simple global
payment-cancel-button	Le bouton d'annulation que les consommateurs peuvent utiliser pour terminer prématurément le paiement	Simple racine
payment-lineitems	Balise complexe activée lorsque la requête contient des articles	Complexe racine, payment-paymentmethod-form, payment-paymentmethod-selection, payment-status-page
payment-lineitems-list	Balise complexe activée pour chaque article dans les articles	Complexe payment-lineitems
payment-item-description	Description de cet article	Simple payment-lineitems-list
payment-item-discountamount	Montant de la remise pour cet article	Simple payment-lineitems-list
payment-item-productcode	Code produit de cet article	Simple payment-lineitems-list
payment-item-productname	Nom du produit de cet article	Simple payment-lineitems-list
payment-item-productprice	Montant du prix de cet article	Simple payment-lineitems-list
payment-item-producttype	Type de cet article	Simple payment-lineitems-list
payment-item-quantity	Quantité de cet article	Simple payment-lineitems-list
payment-item-taxamount	Montant de la taxe de cet article	Simple payment-lineitems-list
payment-item-totalamount	Montant total de cet article : quantité * (prix + taxe - remise)	Simple payment-lineitems-list
payment-item-unit	Unité de mesure de cet article	Simple payment-lineitems-list
payment-paymentmethod-form	Balise complexe activée lorsque le consommateur doit remplir le formulaire de paiement	Complexe racine
payment-change-paymentmethod-link	Si la marque n'est pas demandée, le lien ramène le client au formulaire de sélection du mode de paiement	Simple payment-paymentmethod-form
payment-pm-acquirer	Nom de l'acquéreur du mode de paiement	Simple payment-paymentmethod-form, payment-alias-section, payment-input-list, payment-input-info, payment-lineitems, payment-lineitems-list, payment-pm-list
payment-pm-brand	Nom de la marque du mode de paiement	Simple payment-paymentmethod-form, payment-alias-section, payment-input-list, payment-input-info, payment-lineitems, payment-lineitems-list, payment-pm-list
payment-pm-image	Html 'img' du mode de paiement	Simple payment-paymentmethod-form, payment-alias-section, payment-input-list, payment-input-info, payment-lineitems, payment-lineitems-list, payment-pm-list
payment-pm-image-url	URL vers l'image du mode de paiement	Simple payment-paymentmethod-form, payment-alias-section, payment-input-list, payment-input-info, payment-lineitems, payment-lineitems-list, payment-pm-list
payment-pm-inputid	'id' à utiliser pour l'élément html input	Simple payment-paymentmethod-form, payment-alias-section, payment-input-list, payment-input-info, payment-lineitems, payment-lineitems-list, payment-pm-list
payment-pm-inputname	'name' à utiliser pour l'élément html input	Simple payment-paymentmethod-form, payment-alias-section, payment-input-list, payment-input-info, payment-lineitems, payment-lineitems-list, payment-pm-list
payment-pm-paymentmethod	Nom du mode de paiement	Simple payment-paymentmethod-form, payment-alias-section, payment-input-list, payment-input-info, payment-lineitems, payment-lineitems-list, payment-pm-list
payment-submit-button	Bouton pour soumettre le formulaire du mode de paiement	Simple payment-paymentmethod-form
payment-alias-section	Balise complexe activée lorsqu'une création de token (alias) est demandée et que le mode de paiement sélectionné la supporte	Complexe payment-paymentmethod-form
payment-alias-input-label	Étiquette pour la case à cocher de création de token (alias)	Simple payment-alias-section
payment-alias-label-input	Case à cocher pour la création de token (alias)	Simple payment-alias-section
payment-alias-merchant-usage	Texte expliquant au consommateur pourquoi la création d'un token (alias) est demandée	Simple payment-alias-section
payment-input-list	Balise complexe activée pour chaque entrée que le consommateur doit remplir	Complexe payment-paymentmethod-form
payment-cobadging	Rend le lien/boîte de sélection de co-badge dans le cas où le numéro de carte est détecté comme co-brandé	Simple payment-input-list
payment-input-error	'span' HTML qui contiendra toute erreur de validation pour ce champ	Simple
payment-input-id	'id' de l'élément 'input-input'	Simple payment-input-list
payment-input-input	'input' ou 'select' HTML pour le champ que le consommateur doit remplir	Simple
payment-input-label	'label' HTML pour le champ	Simple payment-input-list
payment-paymentmethod-selection	Balise complexe activée lorsque le consommateur doit sélectionner un mode de paiement	Complexe racine
payment-pmgroup-list	Balise complexe activée pour chaque groupe de méthodes de paiement	Complexe payment-paymentmethod-selection
payment-pm-group	Nom du groupe du mode de paiement	Simple payment-pmgroup-list, payment-pm-list
payment-pm-list	Balise complexe activée pour chaque méthode de paiement	Complexe payment-pmgroup-list, payment-paymentmethod-selection
payment-pm-image-button	'input' HTML de type image qui permet au consommateur de sélectionner un mode de paiement	Simple payment-pm-list
payment-status-page	Balise complexe activée lorsque le consommateur a soumis un paiement ou est redirigé vers une plateforme externe	Complexe racine
payment-redirect-button	'input' HTML de type soumettre qui permet au consommateur d'être redirigé	Simple payment-status-page
payment-status-error	Décrit l'erreur survenue lors du traitement du paiement	Simple payment-status-page
payment-status-text	Description de l'action actuelle pour le consommateur	Simple payment-status-page
payment-status-title	Titre de l'action actuelle (ex : redirection, statut ...)	Simple payment-status-page

Valider le formulaire

Notre solution et le modèle de page de paiement par défaut prennent en charge la validation des formulaires côté client et côté serveur par défaut. Par conséquent :

• Les scripts de validation côté client sont toujours injectés dans les pages de paiement lorsqu'un formulaire est présent.
• La validation côté serveur ne peut pas être désactivée (pour garantir la sécurité)

Lorsque la validation côté client est appliquée à un champ, des classes CSS seront ajoutées au html en fonction du résultat de la validation. Si le champ est valide, les classes suivantes seront appliquées :

• Sur l'entrée : payment-input-valid
• Sur le span d'erreur : payment-validation-valid

Si le champ est invalide, les classes suivantes seront appliquées :

• Sur l'entrée : payment-input-error
• Sur le span d'erreur : payment-validation-error

Téléchargement de modèle

Vous pouvez utiliser <payment-tp-resource-file name=""/> pour référencer les ressources téléchargées depuis votre modèle (par exemple, des images). Par exemple :  <img alt="Logo" class="banner-logo" src="payment-tp-resource-file" name="logo.png" />.