Embarquer le parcours d'achat sur son site

Ce tutoriel est adressé aux développeurs web et intégrateurs, il vous permet d'intégrer le parcours d'achat directement sur votre site internet.

Pour intégrer le composant d’abonnement/paiement :

<section id="ID_SECTION"></section>

<script src="https://standalone.api.sportigo.fr/component-standalone.js"></script>
<script>
    const data = {
        // Afficher une offre dès le chargement 
        initOfferPayment: {
            id: ID_OFFER_SPORTIGO,
            cancelable: false
        },

        // Affichage inline
        inline: true,

        // Afficher les offres enfants
        children: true, 

        // Filtrer sur les offres
        onlyOffers : [ID_OFFER_SPORTIGO],

        // Redirection en fin d'achat (optionnelle)
        redirectUrl: 'https://www.sportigo.io/thank-you',

        // Personnalisation police / css
        theme: {
            dark: false,
            googleFont: {
                name: 'Audiowide',
                family: 'serif'
            },
            cssFile: 'http://monsite.fr/style.css',
        }
    };

    initComponent('BuyFromList', 'ID_SECTION', 'API_KEY', data);
</script>

I - Étapes d’intégration

Positionnez la balise <section id="ID_SECTION"></section> à l’endroit de la page où vous souhaitez que le tunnel d’abonnement/paiement s’affiche.
Incluez le script externe component-standalone.js avant la fermeture de la balise </body>.
Appelez la fonction initComponent(type, elementId, uuid, data) avec les paramètres appropriés :
- type : Le type de composant, par exemple BuyFromList.
- elementId : L’ID de l’élément HTML où sera rendu le composant.
- uuid : Votre clé API Sportigo.
- data : Un objet de configuration contenant les options détaillées ci-dessous.

II -Détail des paramètres

L’objet data permet de contrôler l’affichage et le comportement du composant.

1. `initOfferPayment` (Optionnel)

Cet objet permet de spécifier directement une formule (offre) à mettre en avant. Sans ce paramètre, le composant affichera la liste complète de toutes les formules disponibles et publiques.

Propriétés :

id (Number) : L’ID d’une formule spécifique, trouvable dans le back-office sur la page des formules.
cancelable (Boolean) : Indique si l’utilisateur peut revenir à la liste complète des formules.
- false : L’utilisateur reste bloqué sur la formule indiquée par id.
- true : L’utilisateur peut annuler la sélection et revenir à la liste complète.

Exemple :

initOfferPayment: {
    id: ID_OFFER_SPORTIGO,
    cancelable: false
}

Si initOfferPayment n’est pas renseigné, toutes les formules seront affichées par défaut.

2. Redirect URL (Optionnel)

Permet de rediriger le client vers une page de success après le paiement.

redirectUrl: 'https://www.sportigo.io/thank-you'

3. `theme` (Optionnel)

Cet objet permet de personnaliser l’apparence visuelle du composant.