Pages de paiement personnalisées

Lorsque vous envoyez un lien de paiement à un client, la page sur laquelle il arrive peut ressembler à votre propre marque plutôt qu'à un écran de facturation générique. La personnalisation fonctionne de deux manières :

• La page de paiement hébergée : la page servie par Argonautas Suite pour chaque lien de paiement affiche votre logo et votre couleur de marque.
• Votre propre site web : si vous disposez de votre propre site, celui-ci peut récupérer les détails du paiement via une API et afficher sa propre page de paiement, avec le paiement géré par Argonautas Suite.

La page que voient vos clients est définie par entreprise, et non par lien. Les liens de paiement sont construits à partir de l'URL du site web de votre entreprise (Paramètres → Entreprise) lorsqu'elle est définie, et à partir de l'adresse Argonautas Suite lorsqu'elle ne l'est pas. Si vous définissez une URL du site web, votre site doit être capable d'afficher les liens de paiement (voir l'étape 3). Consultez le support Argonautas Suite avant de la définir ou de la modifier.

Étape 1 : Définir votre logo et vos couleurs de marque

Votre logo et vos couleurs proviennent de la section Image de marque de l'entreprise sous Paramètres → Entreprise. Elle comprend :

• Logo de l'entreprise : cliquez sur Télécharger le logo (« Recommandé : 400x100px, PNG ou SVG. Max 2 Mo. »).
• Icône de l'entreprise : cliquez sur Télécharger l'icône (« Recommandé : 200x200px, carré. Max 1 Mo. »).
• Couleurs de marque : Primaire, Secondaire, Accent et Accent profond, enregistrées avec la barre Enregistrer les modifications de l'onglet. « Ces couleurs apparaissent sur les factures, les e-mails de confirmation et les pages destinées aux clients. » Laissez une couleur vide, ou cliquez sur Réinitialiser par défaut, pour utiliser la valeur par défaut d'Argonautas Suite.

Sur la page de paiement hébergée :

• Le Logo de l'entreprise apparaît en haut de la page. Sans logo, le nom de votre entreprise est affiché à la place.
• La couleur Primaire est utilisée pour l'en-tête coloré, les montants, le bouton Payer maintenant et les liens.
• La ligne de contact (« Contactez-nous à … ») utilise votre E-mail de contact principal et votre Téléphone de l'entreprise depuis Paramètres → Entreprise.

Les autres couleurs et l'icône ne sont pas utilisées sur la page de paiement. Votre logo apparaît également dans l'en-tête des e-mails qu'Argonautas Suite envoie aux clients.

Étape 2 : Ajouter une feuille de style (facultatif)

Si votre logo et votre couleur de marque ne suffisent pas, par exemple parce que vous souhaitez des polices personnalisées ou des modifications de mise en page, la page de paiement peut charger un fichier CSS depuis votre propre site web.

Il n'existe aucun paramètre pour cela dans l'application Argonautas Suite. La configuration est effectuée par le support Argonautas Suite sur demande :

1. Publiez une feuille de style sur votre propre site web, par exemple https://votredomaine.com/payment-page.css.
2. Assurez-vous que l'URL du site web de votre entreprise est définie dans Paramètres → Entreprise. La feuille de style doit se trouver exactement sur le même domaine que votre URL du site web. Par exemple, une feuille de style sur www.votredomaine.com est rejetée si votre URL du site web est https://votredomaine.com. Cela empêche les pages d'être stylisées depuis un site que vous ne contrôlez pas.
3. Envoyez l'adresse complète de la feuille de style au support Argonautas Suite et demandez son ajout en tant que feuille de style de votre page de paiement.

Une fois en place, chaque page de paiement ajoute une classe branded au corps de la page et charge votre feuille de style. Placez body.branded devant vos règles pour qu'elles n'affectent que cette page :

body.branded {
  font-family: "Your Font", sans-serif;
}
body.branded .pay-btn {
  background: #yourcolor;
}

Le bouton Payer maintenant porte la classe pay-btn. Sans feuille de style, aucun CSS supplémentaire n'est chargé et la page utilise uniquement votre logo et votre couleur Primaire.

Étape 3 (avancé) : Afficher la page de paiement sur votre propre site

Si vous gérez votre propre site web, celui-ci peut afficher la page de paiement lui-même afin que le client ne quitte jamais votre domaine. Argonautas Suite fournit une API JSON à l'adresse /api/v1/payments/link/<token>/ :

• Un GET renvoie l'état du lien de paiement : ready, already_paid, cancelled, expired, no_payment_method ou invalid. Lorsque le lien est ready, la réponse contient également le récapitulatif de la réservation (code de confirmation, prénom du client, hébergement, dates), la devise, le montant dû, les éventuels frais de carte et le total. Chaque réponse inclut également le nom, l'e-mail et le numéro de téléphone de votre entreprise.
• Un POST lance le paiement pour ce lien. Il peut inclure une return_url pour renvoyer le client après le paiement.

Votre site récupère les données, affiche la page de paiement selon votre propre design et envoie le POST lorsque le client est prêt à payer. Pour des raisons de sécurité, une return_url doit se trouver sur le même domaine que votre URL du site web, sinon la requête est refusée.

Les liens de paiement pointent vers <votre URL du site web>/pay/<token>/, votre site doit donc servir ce chemin. Configurez cela avec vos développeurs web et le support Argonautas Suite.

Questions fréquentes

Où la page de paiement récupère-t-elle mon logo ? Depuis le Logo de l'entreprise dans la section Image de marque de l'entreprise sous Paramètres → Entreprise. Il n'existe pas de logo distinct pour les pages de paiement.

Puis-je modifier moi-même la feuille de style de la page de paiement ? Non. L'adresse de la feuille de style est définie par le support Argonautas Suite. Vous pouvez modifier le contenu de la feuille de style sur votre propre site web à tout moment, et la prochaine page de paiement qui s'ouvre utilisera la nouvelle version.

Puis-je avoir différentes feuilles de style pour différentes pages ? Non, il y a une seule feuille de style par entreprise, et elle n'est chargée que sur la page de paiement. Placez body.branded devant vos règles pour éviter qu'elles n'affectent tout autre élément utilisant le même fichier.

Pourquoi l'adresse de ma feuille de style a-t-elle été rejetée ? Elle doit se trouver exactement sur le même domaine que votre URL du site web. Hébergez la feuille de style sur ce domaine ou demandez au support de modifier l'adresse.

Que se passe-t-il si mon site web est indisponible ? La page de paiement se charge toujours avec votre logo et votre couleur de marque, et le client peut toujours payer. Seul votre style supplémentaire est absent. La feuille de style ne bloque jamais le paiement.

Pourquoi la page indique-t-elle « Paiement par carte indisponible » ? La page de paiement accepte les paiements par carte via PowerTranz, et l'hébergement ne dispose d'aucun connecteur PowerTranz. La page affiche votre e-mail de contact afin que le client puisse se renseigner sur d'autres options de paiement. Voir Connecteurs de paiement.

Ai-je besoin de l'API JSON pour personnaliser la page de paiement ? Non. La page hébergée couvre la plupart des besoins. L'API n'est nécessaire que si vous souhaitez que la page de paiement apparaisse sur votre propre site web.

Articles liés

• Guide des paramètres : Image de marque de l'entreprise : Télécharger votre logo et définir les couleurs de marque.
• Utilisateurs et permissions : Qui, dans votre équipe, peut modifier les paramètres.
• Configuration du portail propriétaire : Autres emplacements où votre image de marque apparaît.