🈺TagJS

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.

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

🌟 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

2. Installez les packages npm nécessaires :

npm install

🖥️ Utilisation

1. Compilez les scripts :

npm run build

2. 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.

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

http-server -p 3000

4. 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.