Feda Checkout is the easiest and fastest way to integrate a payment form into your site.

Integrate a payment form in your website with Feda Checkout

There are several ways to integrate the payment form.

Adding a button to your page

<!--
Replace YOUR_API_PUBLIC_KEY by the API 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>Integrate Feda Checkout to my website</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button id="pay-btn">Pay 100 FCFA</button>
  <script type="text/javascript">
      FedaPay.init('#pay-btn', { public_key: 'YOUR_API_PUBLIC_KEY' });
  </script>
</body>
</html>

Live preview

You have additional options such as the amount, description, the user's names and email address who wants to make a payment to customize your payment form.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Integrate Feda Checkout to my website</title>
  <script src="https://cdn.fedapay.com/checkout.js?v=1.1.7"></script>
</head>
<body>
  <button id="pay-btn">Pay 1000 FCFA</button>
  <script type="text/javascript">
      FedaPay.init('#pay-btn', {
      public_key: 'YOUR_API_PUBLIC_KEY',
      transaction: {
        amount: 1000,
        description: 'Buy my product'
      },
      customer: {
        email: '[email protected]',
        lastname: 'Doe',
        firstname: 'John',
      }
     });
  </script>
</body>
</html>

When the parameters for these options are entered, the user is immediately directed to choosing the payment method to settle the transaction.

Live preview

Adding several payment buttons to your page

You can also integrate with many payment buttons as you need.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Integrate Feda Checkout to my website</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="Buy my product"
  data-customer-email="[email protected]"
  data-customer-lastname="Doe">Pay 1000 FCFA</button>

  <button class="pay-btn"
  data-transaction-amount="2000"
  data-transaction-description="Buy my product"
  data-customer-email="[email protected]"
  data-customer-lastname="Tay">Pay 2000 FCFA</button>
  <script type="text/javascript">
      FedaPay.init('.pay-btn', { public_key: 'YOUR_API_PUBLIC_KEY' });
  </script>
</body>
</html>

Live preview

Integration with an event to trigger payment

You can trigger payment on your website with the Checkout form using a javascript event.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Integrate Feda Checkout to my website</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="Buy my product"
  data-customer-email="[email protected]"
  data-customer-lastname="Doe"
  >Pay 1000 FCFA</button>

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

Live preview

Embedded integration

You can integrate the payment form and make users pay without being redirected outside your website to settle the transaction.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  <title>Integrate Feda Checkout to my website</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: 'YOUR_API_PUBLIC_KEY',
        transaction: {
          amount: 1000,
          description: 'Buy my product'
        },
        customer: {
          email: '[email protected]',
          lastname: 'Doe',
        },
        container: '#embed'
     });
  </script>
</body>
</html>

Live preview
Pay 1000 FCFA

You can change the background color of your form by going to Preferences in your FedaPay account.


Integration using a form tag

Once the user finishes paying, you can submit this form and send the data it contains to a specific page.


<!--
Replace YOUR_API_PUBLIC_KEY by the API 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="YOUR_API_PUBLIC_KEY"
   data-button-text="Pay 1000"
   data-button-class="button-class"
   data-transaction-amount="1000"
   data-transaction-description="Transaction description"
   data-currency-iso="XOF">
 </script>
</form>
Live preview

This integration uses a script tag in your form to display a button that will trigger the payment process when the customer clicks on it. Do not forget to pass in parameter, the values for the data- attributes without which, your integration will not work.

So you have :
  • data-public-key : specify the API public key of your FedaPay account obtained at its creation
  • data-transaction-amount : define the amount of the payment to be made by the customer
  • data-transaction-description : give a brief description of the transaction purpose
  • data-currency-iso : specify the currency iso to use for the transaction

    Refer to the supported currencies by FedaPay for more information.

The remaining attributes are optional and only used to customize as you wish the layout of the payment form and button if you want them to bear the identity of your platform.
These are :
  • data-button-text : to modify the text displayed on your button
  • data-button-class : customize the button by specifying for this attribute a defined class of your choice such as a bootstrap class
  • data-widget-description : to make a short description of your platform
  • data-widget-image : define the logo to display on your form
  • data-widget-title : indicate your platform name

When using this code, make sure that the data contained in the form reach you server-side by indicating the correct parameter for the attribute action, which here, for illustrative purpose is action="index.php".


FedaPay class methods
static init(options: CheckoutOptions | HTMLElement | string, checkoutOptions?: CheckoutOptions): CheckoutElement | CheckoutElement[]

Initialize payment component.

Options : CheckoutOptions
Name HTML attribute Type Description
public_key data-public-key string FedaPay public key
environment data-environment string FedaPay environment. Possible values are live and sandbox.
trigger data-trigger string Html event that trigger the payment dialog. The defaut value is click.
locale data-locale string Payment interface language. The defaut value is fr.
transaction.id data-transaction-id integer If you have already created the transaction, you can set the id of the transaction.
transaction.amount data-transaction-amount integer The transaction amount. The default value is 100.
transaction.description data-transaction-description string The transaction description.
transaction.custom_metadata data-transaction-custom_metadata object Transaction metadata object. Example JS:

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

Example HTML

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

customer.email data-customer-email string Client's email
customer.firstname data-customer-firstname string Client's first name
customer.lastname data-customer-lastname string Client's last name
customer.phone_number.number data-customer-phone_number-number string Client's phone number
customer.phone_number.country data-customer-phone_number-country string Client's phone country
customer.currency.iso data-currency-iso string Curency iso. The default value is XOF
customer.currency.code data-currency-code string Currency code.
button.text data-button-text string The payment button text.
button.class data-button-class string The payment button css class.
form_selector data-form_selector string Override the selector selector of the form database. If this is correctly indicated, it will be used to find the form to submit after payment.
submit_form_on_failed data-submit_form_on_failed boolean Indicates whether the form (When the payment button or the on-board element has a direct parent which is a form) must be submitted or not when the payment fails.
onComplete - function({ reason: number, transaction: object }) The callback function when the payment dialog is closed. This function takes 2 arguments, the first is the close reason. It can be FedaPay.CHECKOUT_COMPLETED (when the checkout is complete) or FedaPay.DIALOG_DISMISSED (When the user dismisses the dialog). The second argument is the transaction object created for the checkout.
CheckoutElement class methods
open(): void

Open the dialog box.

On this page