KohortPay Documentation
WebsiteDashboard
  • Introduction
    • 🚀Comment ça marche ?
    • 🤝La solution KohortPay
      • L'expérience de parrainage
  • Produit KohortPay
    • 🚀Commencer avec KohortPay
      • Authentification
      • Paramètres compte utilisateur
      • Paramètres organisation
      • Paramètres facturation
    • 🔥Paramétrer KohortPay
      • 🔢Paramétrer les règles de vos groupes de parrainage et les cashbacks
      • 🩷Personnaliser KohortPay à l'image de marque
    • 📧Personnaliser les e-mails transactionnels
    • 💵Gestion de l'emission des cashbacks
  • PLATEFORMES E-COMMERCE
    • 🎁Prestashop
      • Guide d'installation Prestashop
    • 🖋️WooCommerce
      • Guide d'installation WooCommerce
    • Shopify
      • Guide d'installation Shopify
  • INTÉGRATION CUSTOM
    • ⚙️API
    • 🪝Webhooks
    • ✳️Module SDK
    • 🈺TagJS
  • 🎛️SUPPORT
    • Support client
    • Confidentialité des données
    • Pages d'erreur
Powered by GitBook
On this page
  • 🌟 Pour commencer
  • 📦 Installation
  • 🖥️ Utilisation
  • 🛠️ Development
  • 📄 Sample Integration
  1. INTÉGRATION CUSTOM

TagJS

PreviousModule SDKNextSupport client

Last updated 1 year ago

Ce dépôt Github héberge des scripts unifiés développés par Kohortpay, permettant une intégration transparente de nos solutions dans diverses plateformes. Les scripts sont regroupés et optimisés à l'aide de Webpack, garantissant la modularité et des performances optimales.

🌟 Pour commencer

Pour démarrer le développement ou l'utilisation de ces scripts, clonez ce dépôt sur votre machine locale et suivez les instructions d'installation ci-dessous.

git clone [email protected]:kohortpay/kohortpay-scripts.git

cd kohortpay-scripts

📦 Installation

  1. Après avoir cloné le dépôt, accédez au répertoire du projet :

cd kohortpay-scripts

  1. Installez les packages npm nécessaires :

npm install

🖥️ Utilisation

  1. Compilez les scripts :

npm run build
  1. Pour utiliser les scripts dans votre projet, référez-vous à la documentation individuelle des scripts fournie dans les répertoires de script respectifs. Le script généré peut être trouvé à dist/checkout-button.js.

  2. Pour exécuter le script localement, utilisez :

http-server -p 3000
  1. Intégration

Pour intégrer le bouton de paiement à votre site web, incluez le script depuis base Url/checkout-button.js dans votre HTML.

<script async src="baseUrl/checkout-button.js"></script>

Options disponibles pour le bouton. Détaillons davantage l'attribut de configuration.

Config Attribute

The attribute is a JSON string that provides configuration details for the checkout process. Here's a breakdown of the properties you can include:

La config attribute est une chaîne JSON qui fournit des détails de configuration pour le processus de paiement. Voici un aperçu des propriétés que vous pouvez inclure :

  • lineItems: un tableau d'objets, chacun représentant un produit ou un service acheté par l'utilisateur.

    • name: (Requis) Le nom du produit ou du service.

    • price: (Requis) Le prix du produit ou du service dans l'unité de devise la plus petite (par exemple, centimes pour USD).

    • quantity: (Requis) La quantité du produit ou du service acheté.

    • description: Une brève description du produit ou du service.

    • image_url: Une URL pointant vers une image du produit ou du service.

  • customerName: Le nom du client effectuant l'achat.

  • cancelUrl: Une URL vers laquelle rediriger l'utilisateur s'il annule le processus de paiement.

  • successUrl: Une URL vers laquelle rediriger l'utilisateur à la fin réussie du processus de paiement.

Exemple :

{
  "lineItems": [
    {
      "name": "Product 1",
      "price": 100,
      "quantity": 1,
      "description": "This is a sample product.",
      "image_url": "https://example.com/image1.jpg"
    },
    {
      "name": "Product 2",
      "price": 200,
      "quantity": 2,
      "description": "This is another sample product.",
      "image_url": "https://example.com/image2.jpg"
    }
  ],
  "customerName": "John Doe",
  "cancelUrl": "https://example.com/cancel",
  "successUrl": "https://example.com/success"
}

Style Attributes

Here are the available attributes you can use to customize the checkout button:

  • publishable-key: Votre clé de publication unique.

  • background-color: Personnalisez la couleur de fond du bouton.

  • button-color: Personnalisez la couleur du texte du bouton.

  • font: Définissez le style de bordure du bouton.

  • border-style: Définissez le rayon de la bordure pour des coins arrondis.

  • border-radius: Définissez la police du texte du bouton.

  • config: Transmettez des options de configuration telles que lineItems, customerName, cancelUrl, successUrl, etc.

Exemple :

<kohortpay-checkout-button
  id="kohortpay-button"
  publishable-key="your-publish-key"
  background-color="#ec395e"
  button-color="#FFFFFF"
  font="georgia, serif"
  border-style="1px solid #ec395e"
  border-radius="4px"
  config='{"lineItems": [{"name": "Product 1", "price": 100, "quantity": 1, "description": "Sample product"}]}'
>
  Checkout
</kohortpay-checkout-button>

🛠️ Development

Structure du Projet

kohortpay-scripts
│
├── src
│   ├── checkout-button.ts
│   └── another-script.ts
├── dist
│   └── checkout-button.js
├── .gitignore
├── package.json
├── tsconfig.json (for TypeScript)
└── webpack.config.js

Construction des scripts

Développez vos scripts dans le répertoire src. Utilisez la commande suivante pour les regrouper dans le répertoire dist à l'aide de Webpack :

npm run build

📄 Sample Integration

Pour une intégration HTML de démonstration, référez-vous au fichier src/index.html. Cela fournit un exemple clair de comment intégrer le bouton de paiement Kohortpay sur votre site web.

🈺
https://github.com/kohortpay/kohortpay-scriptsgithub.com