Le passage en caisse est le moment du processus d'achat où les consommateurs finalisent leurs achats et paient une entreprise pour certains produits ou services.

homme payant

Image de marque du Checkout

Ce guide vous montre comment vous pouvez styliser votre fenêtre de paiement.

Avec l'éditeur de style pour Billwerk+ Pay Checkout, vous pouvez modifier la fenêtre de paiement en changeant les couleurs, le texte et bien d'autres choses encore. Si vous combinez cela avec le téléchargement de votre logo dans la fenêtre de paiement, vous pouvez obtenir une fenêtre de paiement qui correspond mieux à votre marque.

Fenêtre de paiement sans style supplémentaire

Le marquage de votre fenêtre de paiement est facultatif. Si vous n'avez pas le temps ou les capacités de travailler sur ce point maintenant, vous pouvez le laisser tel quel par défaut et penser au style plus tard.

Dans ce cas, votre fenêtre de paiement ressemblera à ceci :

Fenêtre de paiement_Branding_1.png Fenêtre de paiement_Branding_2.jpeg

Interface de paiement

Billwerk+ Pay vous propose deux interfaces utilisateur qu'il convient de distinguer :

L'interface que nous étudions dans cet article se trouve sous Configurations > Checkout management > Checkout.
L'aide à la caisse se trouve sous Developers > Checkout Helper. Ceci fait l'objet d'un autre article.

Une fois que vous avez cliqué sur Configuration par défaut, vous pouvez modifier les différentes sections de la page d'édition de la caisse. Examinons ces sections en détail.

Identité

Dans cette section, vous pouvez définir le nom de votre configuration de contrôle et définir une poignée .

Cela vous aide à identifier votre configuration au cas où vous utiliseriez plusieurs configurations différentes pour les checkouts.

Locale

Ici, vous pouvez définir la langue de votre caisse en utilisant la liste déroulante que nous vous proposons.

Dans le champ Amount formatting, vous pouvez décider de l'affichage des devises.

Moyens de paiement

Dans cette section, vous pouvez choisir de fournir au client tous les modes de paiement ou de ne lui en présenter qu'une sélection.

FR_Payment_methods_Select_all_Billwerk__Admin_-_Checkout_Edit.png

Après ce choix de méthode de paiement, vous pouvez décider si vous souhaitez ou non co-marquer la carte DankOrt. Vous avez le choix entre :

Aucune préférence
Dankort
Visa

En savoir plus sur Dankort et si vous laissez le choix à votre client.

En bas de la boîte, vous pouvez décider si vous souhaitez afficher les informations de la carte de test ou non au client.

Dans la boîte Payment Method Order ci-dessous, vous pouvez décider de classer les modes de paiement sélectionnés dans un certain ordre.

Conception

Enfin, nous en arrivons à la partie stylistique de votre caisse.

Une fois que vous avez téléchargé votre logo, vous pouvez voir l'aperçu juste à côté du téléchargement.

Cliquez sur Set up custom style pour ouvrir l'éditeur Checkout Style.

Nous aborderons la question de cette interface dans le prochain article.

Configuration du consentement

En tant que commerçant, vous avez la possibilité de séparer les différentes conditions et politiques associées à l'achat de vos produits au moment du paiement.

Vous pouvez informer vos clients des différentes politiques telles que les politiques d'annulation, de retour et d'expédition, etc. au moment du paiement.

Cliquez sur le bouton "Add Consent Text " pour inclure la politique.

screenshot-staging-admin_billwerk_plus-2025_01_20-17_46_15.png

Vous pouvez configurer le texte exact de la manière dont vous souhaitez qu'il apparaisse sur la page hébergée. Si vous le souhaitez, vous pouvez également modifier le nom d'affichage de la politique et le rendre visible différemment de la façon dont la politique a été enregistrée dans l'application. Par exemple, si votre police s'appelle "Demo Policy" et a pour identifiant "demo-policy" et que vous souhaitez l'appeler "New Policy", il vous suffit de configurer la police de la manière suivante : {{demo-policy: New Policy}} dans la zone de texte du consentement.

screenshot-staging-admin_billwerk_plus-2025_01_20-17_49_02.png

Vous pouvez également configurer l'affichage du texte de consentement et du nom de la politique dans différentes langues en cliquant sur le bouton Traduire en haut à droite.

screenshot-staging-admin_billwerk_plus-2025_01_20-17_47_23.png

screenshot-staging-admin_billwerk_plus-2025_01_20-17_51_56.png

Pour en savoir plus sur la façon de créer et de modifier les différentes politiques. Veuillez consulter ce lien.

Editeur de style du Checkout

Cet éditeur vous permet d'adapter le style de la fenêtre de paiement (également pour la partie d'abonnement) à votre design d'entreprise.

Vous pouvez trouver les chapitres suivants :

Accès à l'éditeur

Pour ouvrir cette interface

Cliquez sur Configuration > Checkout management > Checkout.
Sur la page de paiement, cliquez sur l'une de vos configurations dans la liste. Si vous démarrez, vous pouvez cliquer sur Configuration par défaut.
Sur la page de modification de la caisse, faites défiler la page jusqu'à la case Design.
Cliquez sur Set up custom style.
La page Checkout Style s'ouvre.

Excellent ! Puisque vous êtes déjà là, faisons un petit tour de l'interface.

Style général

Dans cette interface, vous pouvez personnaliser l’affichage de vos sessions de frais, récurrentes et d’abonnement dans votre fenêtre de paiement.

Attention
Veuillez noter que vous pouvez modifier le mode de paiement pour Session payante/récurrente ou pour Session d'abonnement.
Dans la partie de l'interface Previews, vous pouvez passer d'un onglet à l'autre.
Pensez également à tester les deux dispositifs Mobile et Desktop:

La présentation générale s'applique à cette partie de la commande pour la session payante/récurrente:

et est également valable pour cette partie de la session d'abonnement :

Nous avons énuméré toutes les possibilités qui s'offrent à vous dans la section General styling:

Général	Choisissez la couleur de : > Contexte. > le bouton Désactivé. > le bouton Enabled. Note Vous ne verrez que les boutons, si vous changez la couleur. Soit vous saisissez directement le code hexadécimal de la couleur Ou vous cliquez dans le champ et entrez le code RGB ou cliquez sur les couleurs et appuyez sur Enter.
Frontière	> Focalisé: Cliquez sur les champs de l'aperçu (par exemple, le numéro de la carte) pour voir l'effet. > Invalide: Cet effet apparaîtra si le client tape des données non valides dans les champs. > Standard: Il s'agit de l'aspect normal des bordures, sans qu'il soit nécessaire de cliquer dessus ou de signaler les informations invalides ou valides. > Valable: Choisissez la couleur qui indique que le client a rempli les champs correctement. Note Vous n'avez pas à spécifier de largeur, si vous êtes bien avec la largeur par défaut.
Police	> Couleur: Veillez à la lisibilité du texte et tenez compte des clients daltoniens. > Famille de polices: Vous pouvez choisir entre 12 polices populaires. > Taille de la police: Taille de la lettre sur le bureau (en pixels). > Taille de la police mobile: Taille des caractères sur les mobiles (en pixels). Nous vous conseillons de tester le résultat sur votre appareil. > (Mobile)Poids de la police: L'effet dépend de la police choisie.
Bordure d'entrée	Explication voir border.
Texte de remplacement de l'entrée	Vous pouvez faire un essai avec le caractère générique de la date d'expiration MM/YYY. Explication voir Font.
Texte standard d'entrée	Pour les tests, tapez du texte dans les champs (par exemple le numéro de carte) pour voir l'effet. Explication voir Font.
Étiquettes	Style des noms de champs, par exemple Numéro de carte. Explication voir Font.
Bouton de paiement	Stylez le texte "Payer XXX EUR " du bouton principal de la commande. Pour modifier la couleur d'arrière-plan du bouton, veuillez utiliser la section General dont nous avons parlé en haut de ce tableau. Explication voir Font.

Stylisation avancée du checkout

Contrairement à l'option de style général que nous venons de voir, l'option de style avancé permet de modifier le mode de paiement et le mode d'abonnement. Pour passer d'une option à l'autre, cliquez sur l'onglet Session payante/récurrente ou sur l'onglet Session d'abonnement dans la partie Aperçu de l'écran.

Pour une explication du menu, consultez Fonts dans le chapitre General Styling.

Caisse générale	Changez la couleur du bouton Continuer que vous trouverez, lorsque vous cliquez sur MobilePay ou ViaBillon dans l'écran de prévisualisation.
Nom de la ligne de commande	Faites défiler jusqu'en haut et cliquez sur View Details pour voir les modifications de ces trois éléments de configuration.
Quantité de la ligne de commande
Montant de la ligne de commande
Titre du mode de paiement	Modifiez le style des mots Card, MobilePay et ViaBill sur la page de paiement.
Description du paiement	Pour voir le changement, faites défiler la section Preview en haut, pour voir les mots Total et View Details dans la même bannière que votre logo.
Montant du paiement	Pour voir le changement, faites défiler la section Preview en haut, pour voir le Payment Amount dans la même bannière que votre logo.

Style avancé de l'abonnement

Contrairement à l'option de style général que nous venons de voir, l'option de style avancé permet de modifier les options de paiement et d'abonnement. Pour passer d'une option à l'autre, cliquez sur l'onglet Session payante/récurrente ou sur l'onglet Session d'abonnement dans la partie Aperçu de l'écran.

Pour une explication du menu, consultez Fonts dans le chapitre General Styling.

Abonnement général	Box shadow: met un effet d'ombre derrière la boîte Pricing.
Nom de l'entreprise	Modifier le style du nom de l'entreprise qui est affiché sur la même bannière que votre logo.
Adresse de l'entreprise	Changez le style de l'adresse qui se trouve sous le nom de la société.
Titre de l'élément de tarification	Modifiez le style du titre "Abonnement par mois" dans la boîte Pricing.
Ligne de l'élément de tarification	Modifiez le style de la ligne de la puce sous le titre dans la boîte Fixation des prix. p.ex. EUR10.00 (incl. tva) - Plan mensuel Démo
Titre	Changez le style du titre "Entrez vos informations de paiement".
Sous-titre	Modifier le style du sous-titre "Informations sur la carte".
Conditions	Modifier le style de la ligne "J'ai lu et accepté les conditions d'abonnement".

Actions

Vous avez quatre boutons en haut à droite de votre écran:

Enregistrer: Vous pouvez cliquer sur ce bouton pour enregistrer votre configuration et la mettre à la disposition d'autres utilisateurs.
Réinitialiser : Supprime toutes les modifications apportées à la configuration du style et vous ramène à l'interface de la caisse.
Actions: Ouvre l'éditeur JSON.
Aide: Vous guide vers ce centre d'aide ou la documentation du développeur.

Éditeur JSON

Cette interface vous permet d'insérer Plain JSON afin d'éviter une configuration manuelle :

Vous pouvez par exemple entrer ce code snippet et modifier tous les paramètres que vous aimeriez directement à cet endroit:

{

	"enabledButtonColor" : "#F89939",
	"disabledButtonColor" : "#F89939",
	"backgroundColor" : "#f8f8f8",
	"defaultConfig" : {
		"border" : {
			"standard" : {
				"width" : "1px", "color" : "#C1CDC6"
			}

			,
			"focused" : {
				"width" : "1px", "color" : "#C1CDC6"
			}

			,
			"valid" : {
				"width" : "1px", "color" : "#C1CDC6"
			}

			,
			"invalid" : {
				"width" : "2px"
			}
		}
	}

	,
	"paymentMethodTitle" : {
		"color" : "#F89939", "size" : "26px", "weight" : 600
	}

	,
	"paymentDescription" : {
		"color" : "#040707", "size" : "18px", "weight" : 400
	}

	,
	"paymentAmount" : {
		"color" : "#F89939", "size" : "24px", "weight" : 600
	}

	,
	"labels" : {
		"color" : "#F89939", "size" : "20px", "weight" : 400
	}

	,
	"inputs" : {
		"border" : {
			"standard" : {
				"width" : "1px", "color" : "#C1CDC6"
			}

			,
			"focused" : {
				"width" : "1px", "color" : "#C1CDC6"
			}

			,
			"valid" : {
				"width" : "1px", "color" : "#C1CDC6"
			}

			,
			"invalid" : {
				"width" : "2px"
			}
		}
	}
}

Vous pouvez également saisir les touches manuellement à l'aide de l'éditeur .

Gestion de la caisse