Scalapay propose une application native pour Shopify.
Vous trouverez toutes les instructions pour télécharger et installer Scalapay au lien suivant : https://developers.scalapay.com/docs/shopify-plugin
L’installation de Scalapay sur un site Shopify se compose de deux étapes obligatoires :
Vous devrez installer deux applications différentes (une pour le checkout et une pour le widget sur la page produit et la page panier), toutes les deux disponibles sur le Shopify Store. Cela vous permettra de bénéficier de l’ensemble de l’expérience de paiement Scalapay.
❤ Installation et activation de l’application de paiement pour avoir Scalapay au checkout
Vous devez installer l’application en allant dans les Paramètres du menu de gauche de votre interface Shopify.
Allez dans Payments → Additional payment methods → Add payment method. Recherchez Scalapay, cliquez dessus et installez l’application.
Si nécessaire, voici le lien direct :
📘 PRODUIT À ACTIVER
Seulement le produit/les produits convenus selon les termes contractuels peuvent être activés.
Pour toute information ou clarification concernant les produits à activer, vous pouvez consulter les termes de votre contrat, contacter votre interlocuteur commercial Scalapay ou votre Integration Manager.
Lorsque vous cliquez sur « Install », une page Scalapay s’ouvrira et vous devrez entrer votre API key.
Cette API key doit être activée par un Scalapay Integration Manager et elle est disponible uniquement sur votre Scalapay Merchant Portal, dans la section Développeur.
Si vous n’êtes pas encore un Scalapay Merchant, veuillez vous inscrire sur notre site officiel Scalapay.
📘 SCALAPAY AU CHECKOUT
En raison des configurations de Shopify, Scalapay apparaîtra comme disponible au checkout pour tout montant et toute adresse.
Si un client tente de passer une commande avec un montant supérieur au montant autorisé ou depuis un pays non éligible, un message d’erreur s’affichera et l’achat ne sera pas finalisé.
Il n’est pas possible de personnaliser ce message d’erreur.
Shopify ne permet aucune modification des configurations du checkout.
Shopify - Scalapay widget
❤ Installer l'application pour le widget sur la page produit et la page panier
Téléchargez ici l'application Scalapay pour installer le widget sur la page produit et la page panier : Scalapay widget for Shopify.
Allez dans la section "Apps" de votre interface Shopify, cliquez dessus et tapez "Scalapay" dans la barre de recherche en haut de la page. Sélectionnez le résultat "Scalapay On-Site Messaging" dans la fenêtre pop-up qui apparaîtra.
📘 COMPATIBILITÉ DU THÈME SHOPIFY
Si votre thème Shopify est compatible avec l'application Scalapay On-Site Messaging, vous pouvez cliquer sur les deux premiers boutons pour installer automatiquement le widget sur la page produit et la page panier.
Si votre thème Shopify n’est pas compatible, un message vous en informera. Dans ce cas, cliquez sur le bouton "Use Embed App" et consultez notre guide pour découvrir comment installer le widget sur la page produit et la page panier.
❤ Configurer l'application pour le widget sur la page produit
Le widget Scalapay doit apparaître sur la page produit de tous les articles de votre site eCommerce.
Le texte et le pop-up sont définis par Scalapay, mais certains champs permettent de configurer le widget.
Voici les étapes pour installer le widget Scalapay :
Cliquez sur "Add to Product page".
L’interface de la page produit apparaîtra.
Dans la colonne de gauche, vous trouverez toutes les sections de la page produit, y compris une appelée "Scalapay on-page message" : il s’agit du widget qui apparaîtra sur la page produit et qui contient ses paramètres.
Si la section "Scalapay on-page message" n’apparaît pas ou si vous souhaitez en ajouter une nouvelle, cliquez sur "Add block", puis sur "Apps", et vous la trouverez dans la liste.
Faites glisser le bloc du widget sous la section "Price" (le prix du produit).
En cliquant sur "Scalapay on-page message", un nouveau menu apparaîtra, vous permettant de modifier les paramètres du widget.
ENTRER VOTRE MERCHANT TOKEN
Vous devrez saisir votre Merchant Token dans la section Merchant Token afin d'afficher correctement vos produits Scalapay dans le widget.
Vous trouverez votre Merchant Token dans votre Scalapay Merchant Portal, dans la section "Developer".
Parameter | Options | Description |
Merchant Token | Le Merchant Token doit être ajouté afin d’afficher les produits corrects de Scalapay. | Il est disponible dans le Scalapay Merchant Portal, dans la section "Développeur". |
DOM selectors for price |
| Ajoutez tous vos sélecteurs de prix (normal price, special price etc.) séparés par une virgule ([". current-price-value",". price-selector-2"]). |
DOM selectors for granular positioning |
| Ajoutez le sélecteur CSS pour modifier la position du widget Scalapay (copiez-collez le code). |
Countries where widget is enabled | Valeur par défaut (full list of allowed countries): AT, BE, FI, FR, DE, IT, NL, PT, ES, YT, RE, GF, GP, MQ | La liste des codes des pays où le widget sera affiché. |
Hide below this price amount | Par défaut : 5 € | Montant minimum pour afficher le widget. Par défaut : 5 €. Veuillez l’adapter selon les conditions de votre contrat. |
Hide above this price amount | Par défaut : 2000 € | Montant maximum pour afficher le widget. Veuillez l’adapter selon les conditions de votre contrat. |
CSS Style to add to the on-page message |
| Personnalisez le widget via CSS (e.g. font size, margin, position). |
Si vous utilisez différents templates de page produit dans votre backend, vous devez vous assurer d’ajouter le widget de Scalapay sur chacun d’eux : dans ce cas, utilisez l’Embed Scalapay App for Shopify.
❤ Configurer l'application pour le widget sur la page panier
Après avoir installé le widget sur la page produit, retournez dans l’application Scalapay et cliquez sur "Add to Cart page".
Pour configurer le widget sur la page panier, vous devrez ajouter un produit au panier dans votre backend.
Comme pour la page produit, dans la colonne de gauche, vous trouverez toutes les sections de la page panier, y compris une appelée "Scalapay on-page message" : il s’agit du widget qui apparaîtra sur la page panier et qui contient ses paramètres.
Si la section "Scalapay on-page message" n’apparaît pas ou si vous souhaitez en ajouter une nouvelle, cliquez sur Add block, puis sur Apps, et vous la trouverez dans la liste.
Faites glisser le bloc du widget sous la section Checkout button.
En cliquant sur "Scalapay on-page message", un nouveau menu apparaîtra, vous permettant de modifier les paramètres du widget.
ENTREZ VOTRE MERCHANT TOKEN
Vous devrez saisir votre Merchant Token dans la section Merchant Token afin d'afficher correctement vos produits Scalapay dans le widget.
Vous trouverez votre Merchant Token dans votre Scalapay Merchant Portal, dans la section "Developer".
Embed Scalapay App for Shopify
❤ Installer l’application
Il est recommandé d’utiliser l’Embed Scalapay App pour Shopify dans les cas suivants :
lorsque le plugin Scalapay n’est pas compatible avec le thème utilisé par le merchant sur Shopify
lorsque sur le site du merchant la page classique du panier n’est pas visible et qu’il est nécessaire d’ajouter le widget Scalapay dans le mini panier
lorsqu’il y a plusieurs templates différents pour les pages produit
Veuillez suivre les étapes ci-dessous pour installer correctement le widget Scalapay via l’Embed App.
Dans le backend Shopify, dans le menu à gauche, cliquez sur Apps, tapez Scalapay dans la barre de recherche en haut de la page, puis sélectionnez Scalapay On-Site Messaging.
2. Cliquez sur Use Embed App.
3. Activez le Scalapay Widget dans le menu à gauche et cliquez sur le texte pour modifier les configurations du widget.
❤ Configurer l’application
ENTREZ VOTRE MERCHANT TOKEN
Vous devrez saisir votre Merchant Token dans la section Merchant Token afin d’afficher correctement vos produits Scalapay dans le widget.
Vous trouverez votre Merchant Token dans votre Scalapay Merchant Portal, dans la section "Developer".
Vous recevrez vos identifiants de connexion pour le Merchant Portal par email de la part de votre Integration Manager de Scalapay.
2. Après avoir ajouté votre Merchant Token, les paramètres du widget doivent être configurés pour s’assurer qu’il est bien installé et visible en frontend.
3. Pour afficher le widget sous le prix de l’article sur la page produit, faites un clic droit sur le prix puis sélectionnez Inspect afin de trouver la position correcte et les sélecteurs de prix.
Inscrivez ensuite ces informations dans le box Widgets Configuration située sur la partie gauche.
Comme expliqué ci-dessous le box Widget Configurations, il est nécessaire de suivre des règles précises et un ordre spécifique.
Chaque élément est séparé par
|(c’est un caractère pipe, pas un "i" majuscule);Le premier élément correspond au type de widget(
productorcart);Ensuite, vient la position du widget;
Enfin, les sélecteurs de prix sont indiqués à la fin.
Exemples
Pour afficher le widget sur la page produit, sous l’élément avec la classe .price et le prix du produit est indiqué par un élément avec une classe .price-product-amount :
product|.price|.price-product-amount
Pour afficher le widget sur la page produit, sous l’élément avec la classe .price at lorsque le prix du produit peut être réduit (donc il y a deux prix pour le même produit), veuillez indiquer d’abord l’élément du prix réduit (.price-product-amount-discounted) puis l’élément du prix plein (.price-product-amount-full):
product|.price|.price-product-amount-discounted|.price-product-amount-full
Pour afficher le widget sur la page panier, sous l’élément avec l’id #totals et lorsque le montant du panier est indiqué par un élément avec la classe .total-amount:
cart|#totals|.total-amount
4. Pour ajouter le widget sur la page panier, il est nécessaire d’ajouter un produit dans le panier (dans ce cas, c’est un mini panier), sélectionner le prix, faire un clic droit, sélectionner Inspecter pour chercher la position correcte et les sélecteurs de prix, puis écrire les informations dans la boîte Widgets Configuration sur la gauche.
Après avoir écrit cart|, indiquez les paramètres de position (e.g. .cart-subtotal) puis les sélecteurs de prix (e.g. |#mini-cart-subtotal-val).
Par exemple: cart|.cart-subtotal|#mini-cart-subtotal-val