Personnaliser le widget Payments

 

 

Le widget est l’interface graphique présentée à l'utilisateur. Il récapitule les détails du paiement (colonne de gauche) et permet à l'utilisateur de procéder au paiement (colonne de droite).

 

Personnaliser le widget

Pour personnaliser le widget les paramètres de personnalisation doivent être renseignés dans l’URL de paiement GET /authorize/{order_id}.

Exemple : 

/v1/authorize/{order_id}?client_id={client_id}&background_color=8dd2f0

 

Le widget est directement paramétrable dans la requête API "GET /authorize" ou en utilisant notre outils graphique “url-builder” disponible dans le Quickstart

Une fois le paramétrage configuré, il peut être utilisé pour tous les paiements.

 

Trouver le paramétrage grâce à notre outil en ligne “url-builder”

 

L’outil Url-Builder est disponible dans le Quickstart, étape “Initiate the widget” bouton “Customize”.

 

 

Chaque changement effectué met à jour les paramètres de l’URL de paiement situé en bas à droite de l’écran.

Vous avez la possibilité de tester différents paramétrages, et les changements sont directement visibles. La navigation entre les écrans est possible dans l'outil. La personnalisation est également consultable directement avec le lien de paiement via l’URL paramétrée (en bas à droite).

 

Paramètres et exemples

 

La liste complète des paramètres et leurs descriptions sont disponibles dans notre documentation en ligne. Veuillez trouver ci-dessous des exemples de paramètres possibles avec l’outil url-builder.




Ask for Alias (ask_for_alias)

A utiliser en association avec le paramètre “user_reference”.

Propose d’enregistrer le compte de paiement de l’utilisateur pour une utilisation ultérieure.

 

Ask for IBAN (ask_for_iban)

Propose à l’utilisateur de “Sélectionner une banque” ou “Saisir un IBAN”.

Par défaut ask_for_iban=false. Donc l’utilisateur arrive directement sur la liste de banques.

 

Si ask_for_iban=true , l’utilisateur arrivera sur cet écran :



Display QR code (display_qr_code)

Le QR code permet à l’utilisateur de continuer le parcours sur son mobile. 

Si qr_code=false, la page n’est pas présentée et l’utilisateur est directement redirigé vers sa banque.

Par défaut, le QR code est visible :

 

Title (title)

Vous pouvez saisir le titre que vous souhaitez, il apparaîtra en haut de la colonne de gauche.

 

Lang (locale)

Par défaut locale=fr.

Exemple, locale=it :

 

Cancel URL (cancel_url)

Par défaut l’URL d’annulation est non visible. Si on décide de le rendre visible, la mention “Annuler le paiement” apparaîtra en bas à gauche. Saisissez l’URL vers laquelle vous souhaitez rediriger l’utilisateur qui abandonne à ce stade le parcours d’achat. 

Exemple,  cancel_url=https%3A%2F%2Fwww.linxo.com

 

Font (font)

Vous pouvez adapter les polices d’écritures à votre charte graphique. 

Exemple 24px Courier New : font=24px%20Courier%20New

 

Elements font (Buttons font : elements_font_color)

Exemple, elements_font_color=red

 

Buttons radius (button_radius)

Par défaut, button_radius=5

Exemple, button_radius=20

 

Item radius (item_border_radius)

Visible lorsque les bords sont colorés (item_border_color).

 

Display header (display_header)

Par défaut, display_header=true :


 

Exemple, display_header=false :

Pas d'entête,  les flèches retour sont absentes.




Button size (button_size)

Par défaut,  button_size=SMALL :

 

Exemple, button_size=LARGE : 

 

Button alignment (button_alignment)

Par défaut, button_alignment=LEFT_BOTTOM :

 

Exemple, button_alignment=RIGHT_TOP :

 

Favorite providers

Par défaut, les banques les plus utilisées sont affichées : 

 

Modifiez les banques favorites en fournissant la liste des BIC souhaités.

Exemple, favorite_providers=BOUSFRPPXXX,SOGEFRPPXXX :

 

Display border (display_border)

Par défaut les bordures sont visibles : 

Exemple, display_border=false : 



Light mode (light)

Par défaut, le light mode n’est pas activé, et donc le récapitulatif du paiement est visible :

 

Exemple, light=false : 

 

Background color (Color of main background : background_color)

Exemple, background_color=c46e6e :

 

Font color (Main font color : font_color)

Font secondary color (Secondary font color : font_secondary_color)

 

Elements color (Buttons background color : elements_color)

Par défaut, elements_color=#ffae00 :

Exemple, elements_color=ff00f7:

 

Font elements color (Text color on buttons : elements_font_color)

Par défaut, elements_font_color=#fff (blanc) :

Exemple, elements_font_color=ff00f7

 

Item border color (item_border_color)

Par défaut, les bords sont non visibles.

Exemple, item_border_color=red : 

 

Item arrow color (item_arrow_color)

Exemple, item_arrow_color=orange : 

(Les flèches sont de taille inférieure lorsque item_arrow_color est utilisé.)



Button arrow color (button_arrow_color)

Il s’agit de la flèche sur le bouton. 

Par défaut, flèche non visible : 


Exemple, button_arrow_color=green : 


 

CGU header  (terms_header)

CGU body (terms_body)

Personnalisation non disponible avec l’agrément Oxlin.




CGU footer (terms_footer)

Déprécié. 

 

Instant payment header (instant_payment_header)

Instant payment text (instant_payment_text)

Personnalisation non disponible avec l’agrément Oxlin.

Instant payment footer (instant_payment_footer)

Déprécié

 

Single payment text (single_payment_text)

Personnalisation non disponible avec l’agrément Oxlin.

 

Providers header

Déprécié

 

Providers search hint (provider_search_hint)

Personnalisation non disponible avec l’agrément Oxlin.



Have more questions? Submit a request

0 Comments

Article is closed for comments.