Checkout.Js
Feda Checkout is the easiest and fastest way to integrate a payment form into your site.
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
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.
-
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 transactionRefer to the supported currencies by FedaPay for more information.
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"
.
Once the code is integrated, you will need to connect your FedaPay account to Feda Checkout so that the application can create the customers and transactions.
This step is necessary and secures your integration.
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:
|
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.