Aller au contenu principal

SDK de widget statique Sezzle

Ce SDK est un moyen d'installer le widget Sezzle sur le site Web d'un commerçant qui ne communique pas avec le serveur de Sezzle. Tout le code du widget, la configuration personnalisée, les images et les feuilles de style sont stockés localement dans le thème du magasin. Cette approche signifie une vitesse de chargement légèrement plus rapide et un plus grand contrôle du commerçant sur le widget - l'équipe Sezzle ne peut pas apporter de modifications au widget, pour le meilleur ou pour le pire.

Implémentation du NPM

Utilisation de npm : npm install @sezzle/sezzle-static-widget

Dans votre page produit, ajoutez l'extrait de code suivant à l'endroit où vous souhaitez que le widget s'affiche, en mettant à jour le chemin d'accès à node_modules pour votre structure de fichiers :

<script type="text/javascript" src="../node_modules/@sezzle/sezzle-static-widget/dist/bundle.js"></script>
<script>
const renderSezzle = new AwesomeSezzle({
amount: `${yourPriceVariableHere}`,
});
renderSezzle.init();
</script>

Utilisez les options de configuration ci-dessous pour personnaliser l'apparence du widget comme vous le souhaitez.

Implémentation HTML

  • Remarque : la mise en œuvre varie considérablement selon la plateforme, le thème, etc. Vous trouverez ci-dessous un aperçu général du processus. Les extraits de code ci-dessous sont des exemples et devront peut-être être modifiés pour s'adapter à votre site. Pour les marchands Shopify, veuillez passer à la section suivante.

Créez un nouveau fichier Javascript dans le code de votre site, le cas échéant.
Copiez+collez ce code minifié dans le fichier nouvellement créé.
Importez le nouveau fichier dans la ou les pages où le widget Sezzle sera ajouté.

 <script src="../scripts/sezzle-static-widget.js"></script>

Créez un élément d'espace réservé où le widget Sezzle doit être affiché sur la ou les pages, généralement sous l'élément conteneur de prix :

  <div id="sezzle-widget"></div>

Ajoutez le script suivant sous l'élément d'espace réservé, en mettant à jour la valeur price pour refléter votre variable de prix qui restitue le prix actuel du produit ou le total du panier, le cas échéant.

 <script>
var renderSezzle = new AwesomeSezzle({
amount: `${yourPriceVariableHere}`
})
renderSezzle.init();
</script>

Prévisualisez vos modifications pour confirmer que le widget s'affiche correctement dans chacun des scénarios suivants

  • Prix régulier
  • Prix de vente
  • Sélection de variantes
  • Bureau
    -Mobile

Utilisez les options de configuration ci-dessous pour personnaliser l'apparence du widget comme vous le souhaitez.

Implémentation de Shopify

Connectez-vous à l'administrateur de votre boutique Shopify
Cliquez sur Boutique en ligne > Thèmes
À côté du thème que vous souhaitez modifier, cliquez sur Actions, puis sélectionnez Modifier le code

Sous le dossier Actifs, cliquez sur « Ajouter un nouvel actif »
Dans l'onglet Créer un fichier vierge, nommez le fichier sezzle-static-widget et sélectionnez .js comme type de fichier, puis cliquez sur Ajouter un élément
Copiez le code du fichier de référentiel ci-dessous et collez-le dans ce nouveau fichier, puis cliquez sur Enregistrer

  • https://github.com/sezzle/static-widgets/blob/production/dist/bundle.js

Ajoutez les lignes de code suivantes partout où le widget doit s'afficher sur la page du produit dans templates/product.liquid ou sections/product-template.liquid, selon le cas :

<!-- Sezzle Static Widget -->
<div id="sezzle-widget"></div>
{{ 'sezzle-static-widget.js' | asset_url | script_tag }}
<script>
var renderSezzle = new AwesomeSezzle({
amount: '{{ product.selected_or_first_available_variant.price | money }}'
})
renderSezzle.init();
document.onchange = function(){
var newPrice = '{{product.selected_or_first_available_variant.price | money}}';
renderSezzle.alterPrice(newPrice);
}
</script>
<!-- End Sezzle Static Widget -->

Ajoutez les lignes de code suivantes partout où le widget doit s'afficher sur la page du panier dans templates/cart.liquid ou sections/cart-template.liquid, selon le cas :

<!-- Sezzle Static Widget -->
<div id="sezzle-widget"></div>
{{ 'sezzle-static-widget.js' | asset_url | script_tag }}
<script>
var renderSezzle = new AwesomeSezzle({
amount: '{{ cart.total_price | money }}',
alignment: 'right'
})
renderSezzle.init();
</script>
<!-- End Sezzle Static Widget -->

Personnalisation de la configuration

Une fois le rendu du widget, des configurations supplémentaires peuvent être ajoutées à AwesomeSezzle pour modifier l'apparence. Vous trouverez ci-dessous un exemple présentant toutes les options. Cependant, price est la seule valeur requise.

<script>
var renderSezzle = new AwesomeSezzle({
amount: '{{ product.selected_or_first_available_variant.price | money }}',
renderElement: 'new-sezzle-widget-container-id',
theme: 'light',
modalTheme:'color',
maxWidth: 400,
marginTop: 0,
marginBottom: 0,
marginLeft: 0,
marginRight: 0,
alignment: 'left',
alignmentSwitchMinWidth: 576,
alignmentSwitchType: 'center',
textColor: '#111',
fontFamily: 'Comfortaa, sans-serif',
fontSize: 12,
fontWeight: 400,
widgetType: 'product',
fixedHeight: 0,
logoSize: 1.0,
logoStyle: {},
language: 'en',
parseMode: 'default',
merchantLocale: 'North America'
})
renderSezzle.init();
</script>

amount (montant, obligatoire)

objetif: Le montant du prix cible, au format dollar. Type: chaîne Défaut: '' Détails supplémentaires: fournissez la variable de prix du produit sous forme de modèle littéral, Shopify.Liquid Exemple: '{{ product.selected_or_first_available_variant.price | money }}'

renderElement (élément de rendu, facultatif)

objetif: chemin depuis targetXPath vers l'élément de la page Web après lequel le widget Sezzle doit être rendu. Type: chaîne Défaut: sezzle-widget Détails supplémentaires: fournissez le nom d'ID ou un tableau de noms d'ID qui correspondent aux éléments d'espace réservé du widget.

theme (thème, facultatif)

objetif: Met à jour la couleur du logo pour la coordonner et la contraster avec les différentes couleurs d'arrière-plan des sites Web. Type: chaîne Options: dark (sombre), light (clair), black-flat (noir mat), white-flat (blanc mat), grayscale (niveaux de gris), white (blanc) Défaut: 'light' Détails supplémentaires: Si le thème n'est pas spécifié, le widget tentera de détecter la couleur d'arrière-plan et d'appliquer le logo contrasté approprié. Utilisez light ou black-flat pour les arrière-plans clairs et dark ou white-flat pour les arrière-plans sombres.

modalTheme (Thème modal, facultatif)

objetif: met à jour la couleur modale pour la coordonner avec les sites couleur ou monochromes. Type: chaîne Options: color (couleur), grayscale (niveaux de gris) Défaut: 'color'

maxWidth (largeur maximale, facultatif)

objetif: largeur maximale de l'élément widget en pixels. Type: numéro Défaut: 400 Détails supplémentaires: 200 pour un joli rendu du widget sur 2 lignes, 120 pour 3 lignes.

marginTop (marge en haut, facultatif)

objetif: quantité d'espace au-dessus du widget en pixels. Type: numéro Défaut: 0

marginBottom (marge du bas, facultatif)

objetif: quantité d'espace sous le widget en pixels. Type: numéro Défaut: 0

marginLeft (marge gauche, facultatif)

objetif: Quantité d'espace à gauche du widget en pixels. Type: numéro Défaut: 0

marginRight (marge droite, facultatif)

objetif: quantité d'espace droite du le widget en pixels. Type: numéro Défaut: 0

alignment (alignement, facultatif)

objetif: Alignement du widget par rapport à l'élément parent. Type: chaîne Options: left (gauche), center (centre), right (droite), auto Défaut: 'left'

alignmentSwitchMinWidth (largeur minimale du commutateur d'alignement, facultatif)

objetif: largeur d'écran en pixels en dessous de laquelle l'alignement passe à alignmentSwitchType au lieu de alignment. Type: numéro Défaut: 760 Détails supplémentaires: le point d'arrêt le plus courant est 768 (ordinateur de poche ou ordinateur de bureau). alignmentSwitchMinWidth n'est généralement nécessaire que lorsque alignment n'est pas automatique.

alignmentSwitchType (type de commutateur d'alignement, facultatif)

objetif: Alignement du widget par rapport à l'élément parent à appliquer lorsque la largeur de la fenêtre d'affichage est plus étroite que alignmentSwitchMinWidth. Type: chaîne Options: left (gauche), center (centre), right (droite), auto Défaut: 'auto'

textColor (couleur du texte, facultatif)

objetif: Couleur du texte du widget. Type: chaîne Défaut: '#111' Détails supplémentaires: Accepte toutes sortes de valeurs (hexadécimales, rgb(), hsl(), etc...)

fontFamily (famille de polices, facultatif)

objetif: Famille de polices du texte du widget. Type: chaîne Défaut: 'inherit' (hériter)

fontSize (taille de police, facultatif)

objetif: Taille de la police du texte du widget en pixels. Type: numéro Défaut: 12 Détails supplémentaires: Entrez uniquement des chiffres. N'entrez pas l'unité (par exemple px) !

fontWeight (police Poids, facultatif)

objetif: Audace du texte du widget. Type: numéro Défaut: 300 Détails supplémentaires: 100 est le plus léger, 900 est le plus audacieux.

widgetType (facultatif)

objetif: Spécifie la catégorie de page sur laquelle le widget est affiché. Type: chaîne Options: product-page (page produit), product-preview (aperçu du produit), cart (panier) Défaut: 'product-page'

fixedHeight (Hauteur fixe, facultatif)

objetif: définit la valeur CSS de la hauteur fixe Type: numéro Défaut: 0

logoSize (taille du logo, facultatif)

objetif: rapport auquel mettre à l'échelle le logo Sezzle. Type: numéro Défaut: 1.0 Détails supplémentaires: L'espace qu'occupe le logo entre le texte du widget et le lien/l'icône Plus d'informations est déterminé par la taille de la police. Lors d'une mise à l'échelle considérable du widget, il peut être nécessaire de remplacer le style pour ajuster les marges gauche et droite du logo à l'aide de logoStyle.

logoStyle (facultatif)

objetif: style personnalisé à appliquer au logo Sezzle dans le widget. Type: objet Défaut: Détails supplémentaires: L'objet acceptera n'importe quel style CSS au format JSON. Les clés doivent être entourées de '', données en casDeChameau au lieu de cas-de-kebab, et séparées de la clé suivante par une virgule au lieu d'un point-virgule.

language (langue, facultatif)

objetif: Langue dans laquelle le texte du widget doit être rendu. Type: chaîne Options: 'en' Défaut: document.querySelector('html').lang Détails supplémentaires: Actuellement, Sezzle widget ne prend en charge que en, fr, es et de. Si la langue spécifiée n'est pas prise en charge, la traduction sera par défaut l'anglais.

parseMode (mode d'analyse, facultatif)

objetif: Permet au prix échelonné du widget de calculer et de formater correctement les devises étrangères. Type: chaîne Options: 'default' (défaut), 'comma' (virgule) Défaut: 'default'

merchantLocale (paramètres régionaux du marchand, facultatif)

objetif: permet au widget d'afficher les détails corrects du programme, selon que le commerçant est inscrit via Sezzle North America ou Sezzle Europe. Type: chaîne Options: North America (Amérique du Nord), Europe Défaut: 'North America'

Veuillez discuter avec le point de contact Sezzle avant d'utiliser les options de configuration ci-dessous:

widgetTemplate (Modèle de widget, facultatif)

objetif: Contenu texte du widget. Modifie également la disposition du prix, du logo et de l'icône d'informations/en savoir plus dans le widget. Type: chaîne, ou objet Défaut: {en: 'or 4 interest-free payments of %%price%% with %%logo%% %%info%%', fr: 'ou 4 paiements de %%price%% sans intérêts avec %%logo%% %%info%%'} Détails supplémentaires: Les modèles disponibles incluent %%price%% (prix), %%logo%%, %%link%% (lien), %%info%%, %%question-mark%% (point d'interrogation), %%line-break%% (saut de ligne), %%afterpay-logo%%, %%afterpay-logo-grey%% (logo afterpay-gris), %%afterpay-info-icon%% (icône info afterpay), %%afterpay-link-icon%% (icône de lien afterpay), %%quadpay-logo%%, %%quadpay-logo-grey%% (logo quadpay-gris), %%quadpay-logo-white%% (logo quadpay-blanc), %%quadpay-info-icon%% (icône info quadpay), %%affirm-logo%%, %%affirm-logo-grey%% (affirm logo gris), %%affirm-logo-white%% (affirm logo blanc), %%affirm-info-icon%% (info icône affirm), %%klarna-logo%%, %%klarna-logo-grey%% (klarna logo gris), %%klarna-logo-white%% (klarna logo blanc), %%klarna-info-icon%% (icône info klarna).

ineligibleWidgetTemplate (Modèle de widget inéligible, optional)

objetif: Contenu textuel du widget lorsque le montant est inférieur au minimum ou supérieur au prix maximum. Des variables de remplacement sont disponibles, à l'exception de %%price%%, car elles indiquent lorsque le montant est en dehors de ces limites. Type: chaîne Défaut: '' Détails supplémentaires: Les modèles disponibles incluent %%logo%%, %%link%% (lien), %%info%%, %%question-mark%% (point d'interrogation), %%line-break%% (saut de ligne), %%afterpay-logo%%, %%afterpay-logo-grey%% (logo afterpay-gris), %%afterpay-info-icon%% (icône info afterpay), %%afterpay-link-icon%% (icône de lien afterpay), %%quadpay-logo%%, %%quadpay-logo-grey%% (logo quadpay-gris), %%quadpay-logo-white%% (logo quadpay-blanc), %%quadpay-info-icon%% (icône info quadpay), %%affirm-logo%%, %%affirm-logo-grey%% (affirm logo gris), %%affirm-logo-white%% (affirm logo blanc), %%affirm-info-icon%% (info icône affirm), %%klarna-logo%%, %%klarna-logo-grey%% (klarna logo gris), %%klarna-logo-white%% (klarna logo blanc), %%klarna-info-icon%% (icône info klarna).

numberOfPayments (nombre de paiements, facultatif)

objetif: numéro de versements par lesquels l'acheteur paiera le total, calcule le montant des versements dans le widget. Type: numéro Défaut: 4 Détails supplémentaires: Très peu de commerçants proposent autre chose qu'un modèle à 4 paiements. Cette sélection n'affecte pas l'apparence du modal.

minPrice (prix minimum, facultatif)

objetif: Prix minimum en centimes pour lequel Sezzle peut être sélectionné lors du paiement. Si le prix sur targetXPath est inférieur à ce numéro, le widget ne s'affichera pas. Type: numéro Défaut: 0 Détails supplémentaires: Cette configuration n'empêche pas un client de payer avec Sezzle en dessous de ce prix. Pour plus d'informations sur la définition d'une passerelle minimale, contactez votre représentant Merchant Success ou utilisez la section Contactez-nous du tableau de bord Sezzle Merchant.

maxPrice (prix maximum, facultatif)

objetif: Prix maximum en centimes pour lequel le widget doit être rendu. Si le prix sur targetXPath est supérieur à ce numéro, le widget ne s'affichera pas sur la page. Type: numéro Défaut: 250000

altLightboxHTML (visionneuse alternative HTML, facultatif)

objetif: remplace la conception modale par défaut par l'extrait de code fourni. Type: chaîne Défaut: ''

qpModalHTML (facultatif)

objetif: L'extrait de code du modal du concurrent, qui s'ouvrira lorsque l'on cliquera sur le logo du concurrent. Type: chaîne Défaut: ''

apModalHTML (facultatif)

objetif: L'extrait de code du modal du concurrent, qui s'ouvrira lorsque l'on cliquera sur le logo du concurrent. Type: chaîne Défaut: ''

objetif: L'URL de la page À propos du concurrent, qui s'ouvrira dans un nouvel onglet lorsque vous cliquerez sur le logo du concurrent. Type: chaîne Défaut: https://www.afterpay.com/purchase-payment-agreement

affirmModalHTML (facultatif)

objetif: L'extrait de code du modal du concurrent, qui s'ouvrira lorsque l'on cliquera sur le logo du concurrent. Type: chaîne Défaut: ''

klarnaModalHTML (facultatif)

objetif: L'extrait de code du modal du concurrent, qui s'ouvrira lorsque l'on cliquera sur le logo du concurrent. Type: chaîne Défaut: ''

Les éléments suivants sont réservés aux commerçants inscrits à notre programme de paiement à long terme. Veuillez en discuter avec le point de contact Sezzle avant d'utiliser les options de configuration ci-dessous :

minPriceLT (prix minimum à long terme, facultatif)

objetif: Prix minimum en centimes pour lequel l'achat est éligible au prêt à long terme. Au-dessus de ce montant, les mensualités avec intérêts seront répercutées dans le widget et le modal. En dessous de ce montant, le widget et le modal à 4 paiements seront rendus. Type: numéro Défaut: 0 Détails supplémentaires: L'option maxPrice doit être remplacée par 4000000 à long terme.

bestAPR (meilleur APR, facultatif)

objetif: taux TAEG standard selon lequel les intérêts doivent être calculés. Type: numéro Défaut: 9.99

widgetTemplateLT (modèle de widget à long terme, facultatif)

objetif: Contenu texte du widget. Modifie également la disposition du prix, du logo et de l'icône d'informations/en savoir plus dans le widget. Type: chaîne, ou objet Défaut: or monthly payments as low as %%price%% with %%logo%% %%info%% Détails supplémentaires: Les modèles disponibles incluent %%price%% (prix), %%logo%%, %%link%% (lien), %%info%%, %%question-mark%% (point d'interrogation), %%line-break%% (saut de ligne).

ltAltModalHTML (HTML modal alternatif à long terme, facultatif)

objetif: remplace la conception modale par défaut par l'extrait de code fourni. Type: chaîne

Functions

Les fonctions suivantes sont intégrées au widget statique et sont prêtes à être utilisées pour l'installation de votre widget. Ajoutez simplement l'extrait applicable au code de votre page Web, en mettant à jour l'écouteur d'événement et les variables si nécessaire.

alterPrice(nouveauPrix)

Modifie le prix sur le widget. Créez un écouteur d'événement après renderSezzle.init() qui appelle cette fonction où nouveauPrix est la nouvelle valeur de prix de la variante sélectionnée. Exemple:

document.onchange = function(){
var nouveauPrix = '${votrePrixVariableIci}';
renderSezzle.alterPrice(nouveauPrix);
}

renderModalByfunction()

Rendu le modal Sezzle par une fonction. Créez un écouteur d'événement qui appelle cette fonction si l'emplacement de l'événement est autre que l'icône d'information.

var cliquezElement = document.querySelector('#votreElementCliquableEstIci')
cliquezElement.addEventListener("click", function() { renderSezzle.renderModalByfunction() });

isMobileBrowser()

Renvoie vrai sur le navigateur mobile. Utilisez cet événement pour afficher ou masquer le widget dans différents emplacements de page en fonction du type d'appareil.

document.onreadystatechange = function(){
if(renderSezzle.isMobileBrowser()){
document.getElementById('sezzle-widget-mobile').style.display = "block";
document.getElementById('sezzle-widget').style.display = "none";
} else {
document.getElementById('sezzle-widget').style.display = "block";
document.getElementById('sezzle-widget-mobile').style.display = "none";
}
}

getElementToRender()

obtenir l'élément à restituer. Créez un écouteur d'événement qui appelle cette fonction si le widget doit apparaître lorsque l'événement se produit.

document.body.insertBefore(renderSezzle.getElementToRender(), document.getElementById('price').nextElementSibling);