Introduction
This section describes the Payfaci JavaScript library for payment gateway.
Payfaci API is easy to implement in your business software. Our API is well formatted Javascript integration, returns JSON responses.
The JavaScript library designed to simplify the integration of payment popups into web applications. With it, developers can easily create customizable payment popups that can be triggered by user actions such as button clicks.
Supported Currencies
This section describes the currencies supported by Payfaci
Payfaci allows to make transaction with below currencies. Any new currency may update in future.
| Currency Name | Currency Symbol | Currency Code |
|---|---|---|
| United States Dollar | $ | USD |
| USDT | ₮ | USDT |
| British pound sterling | £ | GBP |
| Naira | ₦ | NGN |
| EUROS | € | EUR |
| Canadian Dollar | ca$ | CAD |
| Indian Rupee | ₹ | INR |
Get The Api Key
This section describes how you can get your api key.
Please reach out to an administrator on Payfaci to obtain an API key. If you don't have any ? Click Here
Initiate Payment
This section describes the process of initating the payment.
To initiate the payment follow the example code and be careful with the perameters.
Request to the end point with the following parameters below.
| Param Name | Param Type | Description |
|---|---|---|
| api_key | string (50) | Required Your API key |
| string (50) | Required Paying Customer's email. | |
| currency code | string (4) | Required Currency Code, Must be in Upper Case. e.g. USD,EUR. check the table above for supported currencies |
| amount | decimal | Required Payment amount. |
| callback_url | string (255) | Required Callback URL to send status of transaction |
Integration with JavaScript
To integrate your payment gateway with a custom JavaScript application, follow these steps:
- Add the following script tag to the head section of your HTML document.
- Map the payment popup to a button by adding an event listener to the button click event.
Here is an example of how to add the script and map it to a button:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User's Website</title>
<style></style>
<script src="https://payfaci.com/assets/external/payfaci.js"></script>
</head>
<body>
<div></div>
<button
id="openPaymentPopup"
onclick="openPaymentPopup('client_id','client_secret','test@io.com', 'USD', 100, 'https://payfaci.com/callback_url')"
>
Pay with Payfaci
</button>
</body>
</html>
{
"status": 200,
"paymentStatus": "success"
}
Integration with WooCommerce
To integrate your custom JavaScript-based payment gateway with WooCommerce, follow these steps:
Download the plugin here Download Payfaci Plugin
- Install and activate the WooCommerce plugin on your WordPress site.
- Click on Plugin, then Select Add New, Select Upload Plugin Button, Click on CHoose file to select the downloaded payfaci plugin.
- Once install click Activate to activate plugin
- Navigate to WooCommerce settings and click on the "Payments" tab.
- Click on Finish set up, Select the checkbox to enable Payfaci payment gateway, copy your Client ID and Client Secret or Click Here to get one
- Navigate to Pages on Wordpress Dashbaord
- Click on add new page and copy this shortcode
[woocommerce_checkout] - Click on woocommerce Setting, Navigate to Advance Tab and click
- Click on dropdown menu and select the new checkout page
- Scroll down and click on Save changes
Changing Checkout Page
Confirm the cart total is same as the input order total in the input box then click on Pay with payfaci
Integration with Shopify
To integrate your payment gateway with Shopify, follow these steps:
- Log in to your Shopify admin panel and navigate to the "Online Store" section.
- Click on "Themes" and then click on the Three dots beside the customize button then select "Edit code."
In the searchbar type in Theme.liquid then add the script below to the head tag then save
<script src="https://payfaci.com/assets/external/shopify.js"></script>After, search for the main-cart-items.liquid and add the script below just under the checkout button
<button
type="button" name="Payfaci" class="btn button-buy btn-lg btn-block"
onclick="openPaymentPopup('CLIENTID', 'CLIENTSECRET', '{{cart.currency.iso_code}}', {{cart.total_price | divided_by: 100.0}}, 'cartDataJson')"
>
Pay with Payfaci
</button> In this button, replace 'CLIENTID', 'CLIENTSECRET', with your actual api-key the save
Then you can start receiving payments globally and the money will reflect in your Payfaci balance.
In some events, you may need to resize the button. To do so, follow this step:
Click on assets
Base.css, then add this at the bottom
.btn.button-buy {
font-size: 1.25rem;
padding: 1rem 2rem;
width: 100%;
max-width: 400px;
background-color: #9BE06B;
}
Integration with WooCommerce built-in subscription
To integrate your custom JavaScript-based monthly payment gateway with WooCommerce, follow these steps:
Download the plugin here Download Woocomerce Payfaci Subscription Plugin
- Install and activate the WooCommerce plugin on your WordPress site.
- Click on Plugin, then Select Add New, Select Upload Plugin Button, Click on CHoose file to select the downloaded payfaci plugin.
- Once install click Activate to activate plugin
- Navigate to WooCommerce settings and click on the "Payments" tab.
- Click on Finish set up, Select the checkbox to enable Payfaci payment gateway, copy your Client ID and Client Secret or Click Here to get one
- Navigate to Pages on Wordpress Dashbaord
- Click on add new page and copy this shortcode
[woocommerce_checkout] - Click on woocommerce Setting, Navigate to Advance Tab and click
- Click on dropdown menu and select the new checkout page
- Scroll down and click on Save changes
Changing Checkout Page
Confirm the cart total is same as the input order total in the input box then click on Pay with payfaci
Integrate Subscription Payment with Wordpress
To receive subscription payment with wordpress plugin, follow these steps:
Download the plugin here Download Payfaci Subscription Plugin
- Install and activate the Wordpress plugin on your WordPress site.
- Click on Plugin, then Select Add New, Select Upload Plugin Button, Click on Choose file to select the downloaded Payfaci Subscription plugin.
- Once install click Activate to activate plugin
- Navigate to Payfaci settings from the wordpress admin side menu.
- Provide your Client ID, Client Secret, Charge Currency, Interval etc. Not sure how get your Client ID and Client Secret, Click Here to get one
- Navigate to Pages on Wordpress Dashbaord
- Click on add new page and copy this shortcode
[payfaci-pay-button] - Paste the shortcode above on the page and publish
- The shortcode will display payment form will the user will use to pay for subscription.
- You can use this shortcode on any wordpress content type
Setting Up Payment Page
Then you can start receiving payments globally and the money will reflect in your Payfaci balance.