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: :
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.
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.
Add Multiple Payment Buttons on One Page
To allow collections of different amounts, you can integrate multiple payment buttons on the same page.
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.
Embedded Integration: Payment Without Redirection
For an optimized user experience, you can integrate the collection form directly on your site without redirecting the user.
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
Checkout.js also allows integration with a form tag to send specific data after payment.
Checkout.js offers options to initialize the collection component with multiple configurations:
public_key
Attribut HTML: data-public-key
Type: string
Description: The FedaPay public key
environment
Attribut HTML: data-environment
Type: string
Description: FedaPay environment. Possible values are live and sandbox.
trigger
Attribut HTML: data-trigger
Type: string
Description: The type of event that triggers the opening of the payment dialog box. Default value is click.
locale
Attribut HTML: data-locale
Type: string
Description: Payment interface language. The default value is fr.
transaction.id
Attribut HTML: data-transaction-id
Type: integer
Description: If you have already created the transaction, you can specify the collection id.
transaction.amount
Attribut HTML: data-transaction-amount
Type: integer
Description: Transaction amount. Default value is 100.
transaction.description
Attribut HTML: data-transaction-description
Type: string
Description: Transaction description.
transaction.custom_metadata
Attribut HTML: data-transaction-custom_metadata
Type: object
Description: Transaction metadata object.
Exemple JS:
Exemple HTML
customer.email
Attribut HTML: data-customer-email
Type: string
Description: Customer email
customer.firstname
Attribut HTML: data-customer-firstname
Type: string
Description: Customer’s first name
customer.lastname
Attribut HTML: data-customer-lastname
Type: string
Description: Customer name
customer.phone_number.number
Attribut HTML: data-customer-phone_number-number
Type: string
Description: The customer’s telephone number
customer.phone_number.country
Attribut HTML: data-customer-phone_number-country
Type: string
Description: Customer’s telephone country
customer.currency.iso
Attribut HTML: data-currency-iso
Type: string
Description: The currency iso code. Default value is XOF.
customer.currency.code
Attribut HTML: data-currency-code
Type: string
Description: Currency code
button.text
button.class
form_selector
Attribut HTML: data-form_selector
Type: string
Description: override the form base selector. If this is specified, it will be used to find the form to be submitted after payment.
submit_form_on_failed
Attribut HTML: data-submit_form_on_failed
Type: boolean
Description: Indicates whether the form (when the payment button or embedded element has a direct parent that is a form) should be submitted or not when the payment fails.
onComplete
Type:
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.
When your merchant site connects to the FedaPay Checkout solution for the first time, domain authorization is required. This step ensures that your customers are properly redirected to your secure payment page, and not to the FedaPay account creation interface.
Without prior authorization of your domain:
Log in to your FedaPay account
Click on your profile photo (top right)
Select the Applications menu
In the section Domain name to authorize:
Once this step is completed, your domain is approved for use with Checkout JS.
In some cases, you may want to remove access for an authorized domain – for example:
To do this:
Still go to the Applications tab
Enter the relevant domain name in the field Revoke access to the following domain
Click the Revoke access button
Note : Once the revocation is done, payments from this domain will be blocked.