FastCMP

Mise en place

Pour afficher un bouton de paiement sur votre site internet

inclure dans le head de votre application le script ci-dessous !function(){var t={666:function(t,e,n){var o=n(423),s=n(565),i=new o,r="legacy"===s()?"https://pay.atomios.com/dist/atomios.legacy.js":"https://pay.atomios.com/dist/atomios.js",a=document.createElement("script");a.src=r,document.getElementsByTagName("head")[0].appendChild(a),t.exports={events:i,ready:!1}},423:function(t){function e(){this.events={}}e.prototype.emit=function(t,e){if(this.events[t])for(var n=0;n<this.events[t].length;n+=1)this.events[t][n](e)},e.prototype.on=function(t,e){this.events[t]=this.events[t]||[],this.events[t][this.events[t].length]=e},t.exports=e},565:function(t){t.exports=function(){return"noModule"in document.createElement("script")?"modern":"legacy"}}},e={};var n=function o(n){var s=e[n];if(s!==undefined)return s.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,o),i.exports}(666);window.Atomios=n}();
ajouter un (ou des) élément(s) HTML (div) identifiables par leur classe atomios-pay. Cet élément recevra le bouton de paiement
(optionnel) paramétrer le comportement d'Atomios en créant une variable globale window.ATOMIOS_CONFIG

Élément bouton de paiement

Les éléments qui recevront les boutons de paiement sont des éléments HTML

vide
identifiable par leur classe atomios-pay
contenant l'attribut data-product avec pour valeur l'uuid du produit Atomios
contenant éventuellement des attributs data permettant de configurer le rendu du bouton

Attributs de configuration du bouton

Rappel: ces attributs sont à préfixer par data-

Attribut	Description	Défaut
`label`	Alimente le label bouton	Payer
`help`	Alimente l'infobulle bouton	Cliquez pour accéder à la page de paiement
`classes-button`	Ajoute les classes CSS au bouton	Aucune
`classes-show-login-cta`	Ajoute les classes CSS au lien permettant d'afficher le formulaire de récupération d'identifiant	Aucune

Exemple

<div
    class="atomios-pay"
    data-product="fde73556-24ae-4140-8a14-054fc7d08d81"
    data-label="S'abonner à MyCompany"
    data-help="Vous abonner vous permettra d’accéder aux fonctionnalités premium"
    data-classes-button="btn btn-primary"
    data-classes-show-login-cta="link-secondary"
></div>

Cet élément est à disposer sur votre site. Le bouton sera inclus en tant qu'enfant de celui-ci.

Dans le cas où le produit a déjà été souscrit par l'internaute, l'élément restera vide.

Variable de configuration

Il est possible de modifier le comportement d'Atomios en créant un objet global window.ATOMIOS_CONFIG. Ci-dessous sont présentées les valeurs par défaut de chaque élément de cet objet.


window.ATOMIOS_CONFIG = {
    locale: 'fr', // langue du navigateur par défaut
    currency: 'EUR' // devise à utiliser si celle-ci n'est pas explicitement définie dans dans les appels au SDK (redirectToCheckoutSession)
    baseDocument: document, // document racine (utile si atomios est inclus dans un iframe)
    checkStatusOnInit: true, // Lors du chargement de la page, recherche si l'internaute est abonné au produit
    showPaymentButton: true, // Affiche le bouton de paiement si l'internaute n'est pas abonné (utile uniquement si checkStatusOnInit)
    showLoginFormCta: true, // afficher un lien permettant à l'internaute de retrouver son abonnement (utile uniquement si checkStatusOnInit)
    sdkVersion: '1.0', // version du sdk à utiliser
    sdkCore: false, // n'utiliser que les fonctionnalités core du SDK Atomios
}

Fenêtre de login

La fenêtre de login permet à l'internaute de récupérer son identifiant client sous la forme d'un cookie. Pour ce faire l'internaute doit saisir son email dans un formulaire.

Ce formulaire peut s'afficher en cliquant sur le lien «Déjà payé ?» sous le bouton «Payer». Ce lien peut être masqué grâce à la variable de configuration showLoginFormCta. Dans ce cas le formulaire de login peut être affiché manuellement via le SDK d'Atomios :

window.Atomios.showLoginForm()

Évènements

Atomios déclenche des évènements pour vous permettre d'exécuter du code métier à certains moments du workflow. Ces évènements sont émis grâce à l'objet events contenu dans l'objet global window.Atomios.

Exemple d'inscription à un évènement

Code exemple pour s'inscrire à un évènement :


window.Atomios.events.on('customer:subscribed', function(data) {
    if (data.product == 'fde73556-24ae-4140-8a14-054fc7d08d81') {
        // votre code concernant le produit fde73556-24ae-4140-8a14-054fc7d08d81
    }
});

Liste des évènements

Nom	Déclenchement	Données
`script:before-init`	Avant le début du script d'initialisation
`script:after-init`	Après le début du script d'initialisation
`customer:subscribed`	Le client a une souscription valide au produit	`product` : uuid du produit
`customer:no-subscription`	Le client n'a pas de souscription valide au produit	`product` : uuid du produit
`ui:payment-button:created`	Le bouton de paiement est créé (avant son montage)	`product` : uuid du produit `button` : élément html créé
`ui:payment-button:mounted`	Le bouton de paiement est monté	`product` : uuid du produit
`ui:login-form:shown`	Affichage du formulaire de login

SDK

Le script inclut dans le head de votre page crée un objet global window.Atomios. Cet objet vous donne accès au SDK d'Atomios

Nom	Description	Core
`events`	Objet permettant de souscrire aux évènements émis par Atomios (cf § Évènements).	✓
`customerPaywallStatus(productUuid)`	Revoie une promesse contentant un object détaillant l'état de l'abonnement au produit pour le client. `subscription` : booléen indiquant si le client a un abonnement pour ce produit `subscriptionStartedAt` : date à laquelle l'abonnement a commencé `subscriptionEndedAt` : date à laquelle l'abonnement s'est terminé `managementUrl` : URL permettant d'accéder à la console d'administration de l'abonnement (cf ci-dessous) `periodStartedAt` : début de la période courante d'abonnement (celle pour laquelle le client a effectué son dernier paiement) `periodEndedAt` : fin de la période courante d'abonnement (celle jusqu'à laquelle le dernier paiement court)	✓
`customerHasSubscription(productUuid)`	Revoie une promesse contentant un booléen indiquant si le client a un abonnement pour ce produit (version simplifiée de la fonction précédente)	✓
`showPaymentButtonIfNoSubscription(atomiosNode, showLoginCta)`	Fonction permettant tester si l'internaute est abonné au produit identifié dans le nœud. Affiche le bouton de paiement le cas échéant et éventuellement le lien de login. Écouter les évènements `customer:*` pour déterminer le résultat.
`showLoginForm()`	Fonction permettant d'afficher le formulaire de récupération d'identifiant (cf § Fenêtre de login).	✓
`managementUrl(productUuid)`	Fonction retournant l'URL de la page de gestion d'abonnement, permettant à l'internaute de modifier son moyen de paiement ou de se désinscrire.
`redirectToCheckoutSession(productUuid, currency)`	Redirection du navigateur vers la page d'abonnement.	✓

Réécriture URL

La partie serveur d'Atomios va communiquer avec la partie inclue dans le navigateur de l'internaute via des query parameters de l'URL. C'est pourquoi le site utilisant Atomios doit veiller à ne pas supprimer les query parameters suivants :

atomios-pay-customer-login-token