Easily Integrate a Payment Form with Checkout.js

Why Use Checkout.js for Online Payments ?

Checkout.js is a tool designed to make it easy to integrate a secure and fast payment form on your website. Whether you are a developer or not, this tool will allow you to collect payments directly on your site with ease. Learn how to use and customize Checkout.js to provide a smooth payment experience for your users.

Before you start, watch this video that explains how to integrate Checkout.js: :

Methods of Integrating Checkout.js

Checkout.js offers several integration options to suit different needs. You can add a simple payment button, multiple collection buttons, or even embed the payment form directly on your site to avoid redirects.

Add a Simple Payment Button to Your Page

Start by adding a simple button on your page to trigger the collection. This button will allow the user to access a payment form where they can finalize the transaction.

<!--
Replace VOTRE_CLE_API_PUBLIQUE with the public key of your sandbox or live account.
-->

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <title>Intégrer Feda Checkout à mon site</title>
   <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
 </head>
 <body>
   <button id="pay-btn">Payer 100 FCFA</button>
   <script type="text/javascript">
     FedaPay.init("#pay-btn", { public_key: "VOTRE_CLE_API_PUBLIQUE" });
   </script>
 </body>
</html>

Click here to test

Customize the Payment Form

You can customize the collection details (amount, description, customer names, and email address) to adapt the payment form to your platform.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button id="pay-btn">Payer 1000 FCFA</button>
  <script type="text/javascript">
      FedaPay.init('#pay-btn', {
        public_key: 'VOTRE_CLE_API_PUBLIQUE',
        transaction: {
          amount: 1000,
          description: 'Acheter mon produit'
        },
        customer: {
          email: 'johndoe@gmail.com',
          lastname: 'Doe',
          firstname: 'John',
        }
      });
  </script>
</body>
</html>

Click here to test

Add Multiple Payment Buttons on One Page

To allow collections of different amounts, you can integrate multiple payment buttons on the same page.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button class="pay-btn"
  data-transaction-amount="1000"
  data-transaction-description="Acheter mon produit"
  data-customer-email="johndoe@gmail.com"
  data-customer-lastname="Doe">Payer 1000 FCFA</button>

  <button class="pay-btn"
  data-transaction-amount="2000"
  data-transaction-description="Acheter mon produit"
  data-customer-email="janetay@gmail.com"
  data-customer-lastname="Tay">Payer 2000 FCFA</button>
  <script type="text/javascript">
      FedaPay.init('.pay-btn', { public_key: 'VOTRE_CLE_API_PUBLIQUE' });
  </script>
</body>
</html>

Click here to test

Trigger the Collection with an Event

If you want to trigger the collection through a specific event, use JavaScript to activate the payment form on request.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button id="pay-btn"
  data-transaction-amount="1000"
  data-transaction-description="Acheter mon produit"
  data-customer-email="johndoe@gmail.com"
  data-customer-lastname="Doe"
  >Payer 1000 FCFA</button>

  <script type="text/javascript">
    let widget =  FedaPay.init({
      public_key: 'VOTRE_CLE_API_PUBLIQUE'
    });
    let btn = document.getElementById('pay-btn');
    btn.addEventListener('click', () => {
      widget.open();
    });
  </script>
</body>
</html>

Click here to test

Embedded Integration: Payment Without Redirection

For an optimized user experience, you can integrate the collection form directly on your site without redirecting the user.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Intégrer Feda Checkout à mon site</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <div id="embed" style="width: 500px; height: 420px"></div>

  <script type="text/javascript">
      FedaPay.init({
        public_key: 'VOTRE_CLE_API_PUBLIQUE',
        transaction: {
          amount: 1000,
          description: 'Acheter mon produit'
        },
        customer: {
          email: 'johndoe@gmail.com',
          lastname: 'Doe',
        },
        container: '#embed'
     });
  </script>
</body>
</html>

Click here to test

Customization of the Interface and Advanced Options

Checkout.js allows you to customize the visual elements of your form to match your platform’s identity. You can define the background color, the payment button text, or add a logo.

Modify the appearance and add extra details:

Public key : data-public-key
Collection amount : data-transaction-amount
Collection description : data-transaction-description
Currency : data-currency-iso
Button text : data-button-text
Button CSS class : data-button-class
Widget image and description : data-widget-image, data-widget-description

Method with a form tag for advanced integration

Checkout.js also allows integration with a form tag to send specific data after payment.

<!--
Replace VOTRE_CLE_API_PUBLIQUE by the public key of your sandbox or live account.
-->
<form action="index.php" method="POST">
 <input type="hidden" name="field" value="test">
 <script
   src="https://cdn.fedapay.com/checkout.js?v=1.1.7"
   data-public-key="VOTRE_CLE_API_PUBLIQUE"
   data-button-text="Payer 1000"
   data-button-class="button-class"
   data-transaction-amount="1000"
   data-transaction-description="Description de la transaction"
   data-currency-iso="XOF">
 </script>
</form>

Click here to test

Connect Your FedaPay Account

Once the code is integrated, make sure to connect your FedaPay account to authorize the creation of clients and collections. This step is crucial to secure your integration.

Go to Preferences here :

Your FedaPay Account Preferences

FedaPay Class Method and Configuration Attributes

Checkout.js offers options to initialize the collection component with multiple configurations:

Attribut HTML: data-transaction-custom_metadata
Type: object

Description: Transaction metadata object.

Exemple JS:

  {
    transaction:{
      custom_metadata:{
        foo: 'bar'
      }
    }
  }

Exemple HTML

<button data-transaction-custom_metadata-foo="bar"></>

Type:

  function{ reason: number, transaction: object }

Description: The return function when the dialog box is closed. This function takes two arguments. The first is the reason for closing the dialog box. It can be equal to FedaPay.CHECKOUT_COMPLETED (when the payment is complete) or FedaPay.DIALOG_DISMISSED (when the dialog box is closed by the user). The second argument is the transaction object created during payment.

Documentation de Fedapay

​Why Use Checkout.js for Online Payments ?

​Methods of Integrating Checkout.js

​Customization of the Interface and Advanced Options

​Method with a form tag for advanced integration

​FedaPay Class Method and Configuration Attributes

Why Use Checkout.js for Online Payments ?

Methods of Integrating Checkout.js

Customization of the Interface and Advanced Options

Method with a form tag for advanced integration

FedaPay Class Method and Configuration Attributes