Caisse

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.

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 :

Interface de paiement

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

1. L'interface que nous étudions dans cet article se trouve sous Configurations > Checkout management >  Checkout.
   

2. 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.

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.

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.

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.

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

• Style général

• Stylisation avancée du checkout

• Style avancé de l'abonnement

• Actions

• Éditeur JSON

Accès à l'éditeur

Pour ouvrir cette interface

1. Cliquez sur Configuration > Checkout management > Checkout.

2. 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.

3. Sur la page de modification de la caisse, faites défiler la page jusqu'à la case Design.
   

4. Cliquez sur Set up custom style.

5. 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:

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.

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.

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 .