Checkout

Forfaits prenant en charge cette fonctionnalité : Payment Gateway Starter Growth Scale

Le checkout est l'étape du processus d'achat au cours de laquelle les consommateurs finalisent leurs achats et paient une entreprise pour certains produits ou services.

Personnalisation du checkout

Ce guide vous montre comment personnaliser l'apparence de votre fenêtre de paiement.

Avec l'éditeur de style du checkout de Frisbii Pay Checkout, vous pouvez personnaliser la fenêtre de paiement en modifiant les couleurs, les textes et bien plus encore. En téléchargeant également votre logo dans la fenêtre de paiement, vous obtenez une fenêtre de paiement qui reflète mieux votre marque.

Fenêtre de paiement sans personnalisation

La personnalisation de votre fenêtre de paiement est facultative. Si vous n'avez pas le temps ou les ressources nécessaires pour vous en occuper maintenant, vous pouvez conserver l'apparence par défaut et y revenir plus tard.

Dans ce cas, votre fenêtre de paiement se présente comme suit :

Interface du checkout

Frisbii Pay met à votre disposition deux interfaces qu'il convient de distinguer :

1. L'interface présentée dans cet article se trouve sous Configurations > Gestion du checkout > Checkout.
   

2. L'assistant de checkout se trouve sous Intégration et outils > Assistant de checkout. Il fait l'objet d'un autre article.

Après avoir cliqué sur Configuration par défaut, vous pouvez modifier les différentes sections de la page de modification du checkout. Examinons ces sections en détail.

Identité

Dans cette section, vous pouvez définir le Nom de votre configuration de checkout ainsi qu'un Handle.

Cela vous permet d'identifier votre configuration si vous utilisez plusieurs configurations de checkout différentes.

Langue et région

Ici, vous pouvez définir la langue de votre checkout à l'aide de la liste déroulante.

Dans le champ Formatage des montants, vous pouvez définir l'affichage des devises.

Modes de paiement

Dans cette section, vous pouvez choisir de proposer tous les moyens de paiement à vos clients ou seulement une sélection.

Vous pouvez ensuite décider si vous souhaitez utiliser le co-badging de la carte Dankort. Vous avez le choix entre :

• Aucune préférence

• Dankort

• Visa

En savoir plus sur Dankort et sur ce qui se passe si vous laissez le choix à votre client.

En bas de l'encadré, vous pouvez décider d'afficher ou non les informations de carte de test à vos clients.

Dans l'encadré Ordre des moyens de paiement ci-dessous, vous pouvez définir l'ordre dans lequel les moyens de paiement sélectionnés s'affichent.

Design

Nous en arrivons enfin à la personnalisation de votre checkout.

Une fois votre logo téléchargé, un aperçu s'affiche juste à côté.

Cliquez sur Modifier le style personnalisé pour ouvrir l'éditeur de style du checkout. Vous en trouverez une description détaillée dans le chapitre Éditeur de style du checkout.

Configuration de l'abonnement

Si vous activez cette option, les détails de l'abonnement sont dépliés par défaut dans le checkout.

Configuration du consentement

En tant que marchand, vous pouvez présenter séparément, au moment du checkout, les différentes conditions générales et politiques associées à l'achat de vos produits.

Vous pouvez ainsi informer vos clients de différentes politiques, par exemple vos politiques d'annulation, de retour ou de livraison, au moment du checkout.

Cliquez sur le bouton Ajouter un texte de consentement pour inclure la politique.

Vous pouvez configurer le texte exact tel qu'il doit apparaître sur la page hébergée. Si vous le souhaitez, vous pouvez également modifier le nom d'affichage de la politique pour qu'il diffère du nom sous lequel la politique a été enregistrée dans l'application. Par exemple, si votre politique s'appelle « Demo Policy », que son handle est « demo-policy » et que vous souhaitez l'afficher sous le nom « New Policy », saisissez simplement {{demo-policy: New Policy}} dans le champ du texte de consentement.

Vous pouvez également définir 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 création et la modification des politiques, consultez l'article Politiques et documents.

Éditeur de style du checkout

Cet éditeur vous permet d'adapter le style de la fenêtre de checkout (y compris pour la partie abonnement) à votre identité visuelle.

Ce chapitre comprend les sections suivantes :

• Accéder à l'éditeur

• Style général

• Style avancé du checkout

• Style avancé de l'abonnement

• Actions

• Éditeur JSON

Accéder à l'éditeur

Pour ouvrir cette interface :

1. Cliquez sur Configurations > Gestion du checkout > Checkout.

2. Sur la page Checkout, cliquez sur l'une de vos configurations dans la liste. Si vous débutez, cliquez sur Configuration par défaut.

3. Sur la page de modification du checkout, faites défiler jusqu'à l'encadré Design.
   

4. Cliquez sur Modifier le style personnalisé.

5. La page Style du checkout s'ouvre.
   

Faisons maintenant un petit tour de l'interface.

Style général

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

Notez que vous personnalisez soit le checkout d'une Session de paiement/paiement récurrent, soit celui d'une Session d'abonnement.

Dans la partie Aperçus de l'interface, vous pouvez basculer entre les deux onglets.

Pensez également à tester l'affichage sur les deux types d'appareils : Mobile et Ordinateur.

Le Style général s'applique à cette partie du checkout pour la Session de paiement/paiement récurrent :

et s'applique également à cette partie de la Session d'abonnement :

Voici toutes les options disponibles dans la section Style général :

Style avancé du checkout

Contrairement au style général que nous venons de voir, les options de style avancé diffèrent entre le checkout et l'abonnement. Pour basculer entre les deux, cliquez sur l'onglet Session de paiement/paiement récurrent ou sur l'onglet Session d'abonnement dans la partie Aperçu de l'écran.

Pour l'explication du menu, consultez Police dans le chapitre Style général.

Style avancé de l'abonnement

Contrairement au style général, les options de style avancé diffèrent entre le checkout et l'abonnement. Pour basculer entre les deux, cliquez sur l'onglet Session de paiement/paiement récurrent ou sur l'onglet Session d'abonnement dans la partie Aperçu de l'écran.

Pour l'explication du menu, consultez Police dans le chapitre Style général.

Actions

Quatre boutons se trouvent en haut à droite de l'écran :

• Enregistrer : enregistre votre configuration et la rend disponible pour les autres utilisateurs.

• Réinitialiser : supprime toutes les modifications apportées à la configuration du style et vous ramène à l'interface du checkout.

• Actions : ouvre l'éditeur JSON.

• Aide : vous redirige vers ce centre d'aide ou vers la documentation développeur.

Éditeur JSON

Cette interface vous permet d'insérer du JSON brut afin d'éviter la configuration manuelle :

Vous pouvez par exemple saisir l'extrait de code suivant et y modifier directement tous les paramètres souhaités :

{

	"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 clés manuellement à l'aide de l'éditeur.