NAV Navbar

Guide d'installation Shopify

Introduction

La mise en place d'Alma sur Shopify devrait vous prendre moins de 30 minutes et avoir un impact immédiat sur vos ventes. Pour proposer le paiement en plusieurs fois à vos clients sur votre boutique Shopify, il vous suffit d'installer une ou plusieurs méthodes de paiement Alma, en fonction de nombre d'échéances désiré.
Vous pouvez proposer des paiements en 2, 3 et/ou 4 fois.

Création de compte Alma

Avant de continuer, il est impératif que vous disposiez d'un compte Alma.

Pour créer votre compte, rendez-vous sur la page d'inscription et remplissez les champs demandés.

Prenez ensuite le temps de configurer votre compte (logo, adresse, IBAN, informations de contact, ...) sur votre tableau de bord.

Instructions d'installation Shopify

  1. Installer les méthodes de paiement désirées

    Rendez-vous dans les paramètres de votre boutique, et dans la section "Fournisseurs de services de paiement" cliquez sur "Choisir un moyen de paiement alternatif". Dans la liste qui apparaît, vous trouverez trois options pour Alma, pour activer le paiement en 2, 3 ou 4 fois.

    Nous vous conseillons d'en privilégier une ou deux seulement plutôt que laisser vos clients indécis devant un choix trop large.

  2. Cliquez sur l'un des choix Alma.

    Vous devez alors renseigner les informations de connexion à l'API d'Alma.

    Mode de test

    Si votre boutique peut être mise en maintenance / n'est pas encore ouverte au public, vous pouvez commencer par utiliser le mode de test afin de vérifier le bon fonctionnement d'Alma sur votre boutique :

    ID Marchand : À récupérer sur https://dashboard.getalma.eu/api
    Clef d'API de test : À récupérer sur https://dashboard.getalma.eu/api

    Attention : Votre méthode de paiement, une fois activée, est immédiatement visible de vos clients. Si vous activez le mode de test d'Alma sur votre boutique de production, vos clients seront en mesure de passer commande sans être réellement débités du montant de leur achat.
    Notez que Shopify affiche clairement les commandes qui ont été passées avec une méthode de paiement en mode test.

    En production

    Pour une boutique en production / ouverte au public, veillez à désactiver le mode de test et à renseigner votre clef d'API Live :

  3. Une fois que vous avez terminé la configuration ci-dessus et avez cliqué sur "Activer Alma - Paiement en X fois avec Alma", vos clients peuvent alors payer leurs achats en plusieurs fois !

Informez vos clients

Fiches produit & panier

Dans le thème de votre boutique, vous pouvez ajouter le code ci-dessous aux fiches produit et à cart.liquid par exemple :

<!-- ALMA Paiement en 2 fois -->
<div>
    <img src="{{ 'alma_logo.svg' | asset_url }}" style="height: 24px; vertical-align: middle; margin-right: 5px"/>
    Payez en 2 fois à partir de 100€
</div>
<!---->

Pour que le logo s'affiche correctement, télécharger ce fichier (clic droit > enregistrer sous) et ajoutez-le aux assets de votre thème, en prenant soin de le nommer alma_logo.svg.

Vous pouvez évidemment ajuster le texte et les conditions d'affichage dans le code ci-dessus en utilisant le langage liquid documenté par Shopify.

Opérations marketing

Plus de 500 marchands utilisent le paiement en plusieurs fois comme un outil marketing avec succès. Plus les visiteurs verront Alma en amont de votre tunnel d'achat, plus votre taux de conversion sera élevé !

N'hésitez donc pas à :

  • Mentionner la disponibilité d'Alma sur votre page d'accueil
  • Ajouter une bannière informant de la disponibilité du paiement en plusieurs fois, ou un fin bandeau en haut de page.
  • Envoyer une newsletter à vos clients/prospects pour les informer de cette nouvelle méthode de paiement
  • Relancer les paniers abandonnés en leur proposant de régler en plusieurs fois

Clients Shopify Plus : personnalisation de l'affichage d'Alma

Ne fonctionne que pour les clients Shopify Plus, les clients Shopify "standard" n'ayant pas accès à l'app Script Editor.

Le code fourni a été généré avec l'outil Shopify Script Creator ; vous pouvez l'utiliser vous-mêmes pour créer des scénarios plus complexes si besoin.

Instructions

  1. Installez l'app Script Editor sur votre boutique
  2. Dans l'app ("Apps" dans la colonne de gauche puis "Script Editor"), cliquez sur le bouton "Create Script"
  3. Sélectionnez "Payment gateways" et "Blank template", puis cliquez sur "Create script"
  4. Entrez un titre tel que "Affichage Alma"
  5. Dans "Ruby Source Code", supprimez tout le code existant puis copiez/collez le code du fichier ci-dessous
  6. En utilisant la colonne "Cart Input" et le bouton "Run script" dans le panneau "Output", vous pouvez vérifier l'effet du script dans différents cas de figure.

La vidéo ci-dessous montre le process complet, tests compris :

Note : Shopify ne permet d'avoir qu'un seul script de paiement actif à la fois. Si vous aviez déjà un script de paiement actif et comptez le conserver, vous devez ajouter/fusionner le code fourni avec le vôtre.

Code à copier

##### Contrôle de l'affichage d'Alma ####
class Campaign;def initialize(condition, *qualifiers);@condition = (condition.to_s + '?').to_sym;@qualifiers = PostCartAmountQualifier ? [] : [] rescue qualifiers.compact;@line_item_selector = qualifiers.last unless @line_item_selector;qualifiers.compact.each do |qualifier|;is_multi_select = qualifier.instance_variable_get(:@conditions).is_a?(Array);if is_multi_select;qualifier.instance_variable_get(:@conditions).each do |nested_q|;@post_amount_qualifier = nested_q if nested_q.is_a?(PostCartAmountQualifier);@qualifiers << qualifier;end;else;@post_amount_qualifier = qualifier if qualifier.is_a?(PostCartAmountQualifier);@qualifiers << qualifier;end;end if @qualifiers.empty?;end;def qualifies?(cart);return true if @qualifiers.empty?;@unmodified_line_items = cart.line_items.map do |item|;new_item = item.dup;new_item.instance_variables.each do |var|;val = item.instance_variable_get(var);new_item.instance_variable_set(var, val.dup) if val.respond_to?(:dup);end;new_item;end if @post_amount_qualifier;@qualifiers.send(@condition) do |qualifier|;is_selector = false;if qualifier.is_a?(Selector) || qualifier.instance_variable_get(:@conditions).any? { |q| q.is_a?(Selector) };is_selector = true;end rescue nil;if is_selector;raise "Missing line item match type" if @li_match_type.nil?;cart.line_items.send(@li_match_type) { |item| qualifier.match?(item) };else;qualifier.match?(cart, @line_item_selector);end;end;end;def run_with_hooks(cart);before_run(cart) if respond_to?(:before_run);run(cart);after_run(cart);end;def after_run(cart);@discount.apply_final_discount if @discount && @discount.respond_to?(:apply_final_discount);revert_changes(cart) unless @post_amount_qualifier.nil? || @post_amount_qualifier.match?(cart);end;def revert_changes(cart);cart.instance_variable_set(:@line_items, @unmodified_line_items);end;end;class ConditionallyRemoveGateway < Campaign;def initialize(condition, customer_qualifier, cart_qualifier, li_match_type, line_item_qualifier, gateway_selector);super(condition, customer_qualifier, cart_qualifier, line_item_qualifier);@li_match_type = (li_match_type.to_s + '?').to_sym;@gateway_selector = gateway_selector;end;def run(gateways, cart);return unless @gateway_selector;gateways.delete_if { |gateway| @gateway_selector.match?(gateway) } if qualifies?(cart);end;end;class OrSelector;def initialize(*conditions);@conditions = conditions.compact;end;def match?(item, selector = nil);@conditions.any? do |condition|;if selector;condition.match?(item, selector);else;condition.match?(item);end;end;end;end;class Qualifier;def partial_match(match_type, item_info, possible_matches);match_type = (match_type.to_s + '?').to_sym;if item_info.kind_of?(Array);possible_matches.any? do |possibility|;item_info.any? do |search|;search.send(match_type, possibility);end;end;else;possible_matches.any? do |possibility|;item_info.send(match_type, possibility);end;end;end;def compare_amounts(compare, comparison_type, compare_to);case comparison_type;when :greater_than;return compare > compare_to;when :greater_than_or_equal;return compare >= compare_to;when :less_than;return compare < compare_to;when :less_than_or_equal;return compare <= compare_to;when :equal_to;return compare == compare_to;else;raise "Invalid comparison type";end;end;end;class CartAmountQualifier < Qualifier;def initialize(behaviour, comparison_type, amount);@behaviour = behaviour;@comparison_type = comparison_type;@amount = Money.new(cents: amount * 100);end;def match?(cart, selector = nil);total = cart.subtotal_price;if @behaviour == :item || @behaviour == :diff_item;total = cart.line_items.reduce(Money.zero) do |total, item|;total + (selector&.match?(item) ? item.line_price : Money.zero);end;end;case @behaviour;when :cart, :item;compare_amounts(total, @comparison_type, @amount);when :diff_cart;compare_amounts(cart.subtotal_price_was - @amount, @comparison_type, total);when :diff_item;original_line_total = cart.line_items.reduce(Money.zero) do |total, item|;total + (selector&.match?(item) ? item.original_line_price : Money.zero);end;compare_amounts(original_line_total - @amount, @comparison_type, total);end;end;end;class CountryCodeQualifier < Qualifier;def initialize(match_type, country_codes);@invert = match_type == :not_one;@country_codes = country_codes.map(&:upcase);end;def match?(cart, selector = nil);shipping_address = cart.shipping_address;return false if shipping_address&.country_code.nil?;@invert ^ @country_codes.include?(shipping_address.country_code.upcase);end;end;class Selector;def partial_match(match_type, item_info, possible_matches);match_type = (match_type.to_s + '?').to_sym;if item_info.kind_of?(Array);possible_matches.any? do |possibility|;item_info.any? do |search|;search.send(match_type, possibility);end;end;else;possible_matches.any? do |possibility|;item_info.send(match_type, possibility);end;end;end;end;class GatewayNameSelector < Selector;def initialize(match_type, match_condition, names);@match_condition = match_condition;@invert = match_type == :does_not;@names = names.map(&:downcase);end;def match?(gateway);name = gateway.name.downcase;case @match_condition;when :match;return @invert ^ @names.include?(name);else;return @invert ^ partial_match(@match_condition, name, @names);end;end;end;class GiftCardSelector < Selector;def initialize(match_type);@invert = match_type == :not;end;def match?(line_item);@invert ^ line_item.variant.product.gift_card?;end;end;

CAMPAIGNS = [
  ConditionallyRemoveGateway.new(
    :all,
    nil,
    OrSelector.new(
      CartAmountQualifier.new(
        :cart,
        :less_than,
        100 # Montant minimum
      ),
      CartAmountQualifier.new(
        :cart,
        :greater_than,
        2000 # Montant maximum
      ),
      CountryCodeQualifier.new(
        :not_one,
        ["FR"] # Pays de livraison autorisés
      )
    ),
    :any,
    nil,
    GatewayNameSelector.new(
      :does,
      :include,
      ["Alma"]
    )
  ),
  # Désactive Alma si le panier contient une carte cadeau
  ConditionallyRemoveGateway.new(
    :any,
    nil,
    nil,
    :any,
    GiftCardSelector.new(
      :is
    ),
    GatewayNameSelector.new(
      :does,
      :include,
      ["Alma"]
    )
  )
].freeze

CAMPAIGNS.each do |campaign|
  campaign.run(Input.payment_gateways, Input.cart)
end

Output.payment_gateways = Input.payment_gateways
################################################

Personnalisation

Le code fourni applique les règles suivantes :

  • Si le montant du panier est inférieur à 100€ ;
  • Ou si le montant du panier est supérieur à 2000€ ;
  • Ou si le code du pays de livraison n'est pas FR ;
  • Ou si le panier contient une carte cadeau (obligation contractuelle) ;
  • Alors, cacher les moyens de paiement qui contiennent le mot "Alma"

Voir ci-dessous pour adapter ce code à vos besoins :

Changer le minimum autorisé

Modifier la ligne 11 du code : changer la valeur 100 par le minimum à utiliser, en Euros.

Note : Si vous choisissez un montant minimum inférieur au montant minimum configuré par Alma sur votre compte, vos clients pourront voir et sélectionner le moyen de paiement Alma sur votre boutique, mais leur paiement sera refusé. Si vous voulez étendre votre plage de montants autorisés, contactez-nous.

Changer le maximum autorisé

Modifier la ligne 16 du code : changer la valeur 2000 par le maximum à utiliser, en Euros.

Note : Si vous choisissez un montant maximum supérieur au montant maximum configuré par Alma sur votre compte, vos clients pourront voir et sélectionner le moyen de paiement Alma sur votre boutique, mais leur paiement sera refusé. Si vous voulez étendre votre plage de montants autorisés, contactez nous.

Ajouter des pays de livraison autorisés

Modifier la ligne 20 du code : ajouter, entre les crochets, les codes des pays autorisés en majuscules, entre guillemets et séparés par des virgules.

Par exemple, pour ajouter la Belgique, la ligne 20 devient :

        ["FR", "BE"]

Ne pas restreindre les pays de livraison

Supprimer les lignes 18 à 21, i.e. supprimer cette portion du code :

      CountryCodeQualifier.new(
        :not_one,
        ["FR"] # Pays de livraison autorisés
      )

Appliquer des seuils différents pour le paiement en 3 ou 4 fois

Si vous avez installé plusieurs gateways Alma, vous pouvez utiliser des "Campagnes" différentes pour contrôler l'affichage de chacune en fonction de règles différentes.

Le code ci-dessous remplace les lignes 3 à 47 du code original, afin de :

  • N'afficher le paiement en 3 fois que entre 100€ et 2000€ pour des paniers livrés en France (première "campagne")
  • N'afficher le paiement en 4 fois que entre 400€ et 2000€ pour des paniers livrés en France (deuxième "campagne")
  • Ne pas afficher Alma si le panier contient une carte cadeau (troisième "campagne", obligatoire)

Référez-vous aux paragraphes précédents pour modifier ces seuils et/ou modifier les restrictions de pays.

CAMPAIGNS = [
  ##########################################################################################################
  ### En modifiant les valeurs ci-dessous, vous changez les conditions d'affichage du paiement en 3 fois ###
  ##########################################################################################################
  ConditionallyRemoveGateway.new(
    :all,
    nil,
    OrSelector.new(
      CartAmountQualifier.new(
        :cart,
        :less_than,
        100  # Montant minimum
      ),
      CartAmountQualifier.new(
        :cart,
        :greater_than,
        2000 # Montant maximum
      ),
      CountryCodeQualifier.new(
        :not_one,
        ["FR"] # Pays de livraison autorisés
      )
    ),
    :any,
    nil,
    GatewayNameSelector.new(
      :does,
      :include,
      ["Paiement en 3 fois avec Alma"]
    )
  ),

 ##########################################################################################################
 ### En modifiant les valeurs ci-dessous, vous changez les conditions d'affichage du paiement en 4 fois ###
 ##########################################################################################################
 ConditionallyRemoveGateway.new(
    :all,
    nil,
    OrSelector.new(
      CartAmountQualifier.new(
        :cart,
        :less_than,
        400 # Montant minimum
      ),
      CartAmountQualifier.new(
        :cart,
        :greater_than,
        2000 # Montant maximum
      ),
      CountryCodeQualifier.new(
        :not_one,
        ["FR"] # Pays de livraison autorisés
      )
    ),
    :any,
    nil,
    GatewayNameSelector.new(
      :does,
      :include,
      ["Paiement en 4 fois avec Alma"]
    )
  ),
  # Désactive Alma si le panier contient une carte cadeau
  ConditionallyRemoveGateway.new(
    :any,
    nil,
    nil,
    :any,
    GiftCardSelector.new(
      :is
    ),
    GatewayNameSelector.new(
      :does,
      :include,
      ["Alma"]
    )
  )
].freeze