Si vous rencontrez des problèmes d'affichage du widget sur votre site personnalisé, vous pouvez vérifier les points suivants.
Assurez-vous d'avoir correctement inséré les scripts de la bibliothèque Scalapay dans la balise <head> de la page HTML du produit ou du panier. Le script devrait être structuré ainsi :
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>.
Ajoutez la balise HTML Scalapay dans le modèle de page du produit, du panier d'achat et de la page de paiement en suivant nos directives:
Product Page Script
<!doctype html>
<html lang="en">
<head>
<title>Scalapay Suite Widget</title>
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
type='product'
min='5'
max='1500'
amount-selectors='["#price-container"]'
currency-position='before'
currency-display='symbol'
locale='en'
environment='integration'
merchant-token='8KDS3SPEL' >
</scalapay-widget>
</body>
</html>
Cart Page Script
<!doctype html>
<html lang="en">
<head>
<title>Scalapay Suite Widget</title>
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
type='cart'
min='5'
max='1500'
amount-selectors='["#price-container"]'
currency-position='before'
currency-display='symbol'
locale='en'
environment='integration'
merchant-token='8KDS3SPEL' >
</scalapay-widget>
</body>
</html>
Check Out Page Script
<!doctype html>
<html lang="en">
<head>
<title>Scalapay Suite Widget</title>
<script type="module" src="https://cdn.scalapay.com/widget/scalapay-widget-loader.js?version=V5"></script>
</head>
<body>
<div id="price-container">€ 100.00</div>
<scalapay-widget
type='checkout'
min='5'
max='1500'
amount-selectors='["#price-container"]'
currency-position='before'
currency-display='symbol'
locale='en'
environment='integration'
merchant-token='8KDS3SPEL' >
</scalapay-widget>
</body>
</html>
Vérifiez que vous avez correctement défini les montants minimum et maximum dans le body de la configuration du widget.
Pendant le processus de test, le champ de l'environnement doit être réglé sur "intégration" et le champ du Merchant Token doit être réglé sur "8KDS3SPEL".
En production, l'environnement peut être laissé vide et le Merchant Token doit être celui qui se trouve dans la section Développeur de votre portail de commerçant.
Vérifiez que le champ `amount-selectors` pointe vers le bon sélecteur de prix sur la page produit ou panier. N'oubliez pas d'insérer le sélecteur dans le format correct `[" , "]`.
Comment identifier le bon sélecteur de prix ?
Faites un clic avec le bouton droit sur la page et cliquez sur "Inspecter".
Inspectez la page pour trouver l'endroit où vous souhaitez activer un élément.
3. Une fois l'élément trouvé, recherchez le sélecteur dans le code HTML. Copiez le sélecteur et collez-le dans le champ `amount-selectors`.
Le code pourrait ressembler à ceci :
`div.summary.entry-summary > div > form > table > tbody > tr:nth-child(2) > td.value > div > div > div > div.woocommerce-variation-price > span > span > bdi.`