Low Code JS
Fractal JS in depth
Welcome to the Widgets API documentation. This API allows you to integrate and interact with various payment widgets seamlessly. You can embed buttons for payments, request payments, and display transaction tables.
Widget Usage
Pay Link
Pay Button
HTML implementation
<a href="javascript:void(0);" onclick="getPaymentPage(8)" class="btn btn-primary">Pay</a>
React/Vue js implementation
import { GetPaymentPage } from 'fractalpay';
Description: This widget generates a button that, when clicked, opens a payment page for the amount 8.00
.
Parameters:
amount
(number): The amount of the widget to open the payment page for.
Example:
<a href="javascript:void(0);" onclick="getPaymentPage(8.00)" class="btn btn-primary">Pay</a>
<GetPaymentPage fractalpayClientKey={fractalpayClientKey} amount={8.55} />
Request Link
Request Payment Button
HTML implementation
<a href="javascript:void(0);" onclick="sendRequestPayment(8.00, '9695969889')" class="btn btn-primary">Request payment</a>
React/Vue js implementation
import { RequestPaymentonClick } from 'fractalpay';
Description: This widget generates a button that, when clicked, sends a payment request to the specified phone number for the amount of 8.00
.
Parameters:
amount
(number): The value of the widget to send the payment request for.recipient_phone
(string): The phone number of the recipient.
Example:
<a href="javascript:void(0);" onclick="sendRequestPayment(8.00, '9695969889')" class="btn btn-primary">Request payment</a>
React/Vue js
<RequestPaymentonClick fractalpayClientKey={fractalpayClientKey} amount={invoice.amount} phone_number={phoneNumbers[invoice.id] || ""}/>
Transactions Table
Transactions Table
HTML implementation
<table id="fractal_complete_transactions" class="table"></table>
React/Vue js implementation
import { CompletedTransactions } from 'fractalpay';
Description: This widget generates a table to display complete transactions.
Parameters:
id
(string): The ID of the table element. In this case, it isfractal_complete_transactions
.
Example:
<table id="fractal_complete_transactions" class="table"></table>
React/Vue.js
<CompletedTransactions fractalpayClientKey={fractalpayClientKey}/>
Installing JS & NPM Package
To use these widgets, include the following script tag in your HTML:
<script src="https://testapi.fractalpay.com/js/dynamic-launch.js?fractalpay_merchant_public_key={{merchant_public_key}}"></script>
Replace {{merchant_public_key}}
with your actual merchant public key.
To use these widgets in a react/Vue.js app, install the following npm package:
npm i fractal-pay-now
To use the components in a react/Vue.js app, use the below line to import the proper npm function:
import { --flag-- } from 'fractalpay';
Error Handling and FAQs
Error Handling
Error Codes:
- 400 Bad Request: The request was invalid or cannot be otherwise served.
- 401 Unauthorized: Authentication is required and has failed or has not yet been provided.
- 404 Not Found: The requested resource could not be found.
- 500 Internal Server Error: An error occurred on the server.
FAQs and Troubleshooting
-
Q: What should I do if I receive a 401 Unauthorized error? A: Ensure that your API key is correct and included in the request header.
-
Q: How do I update the settings of a widget? A: Use the PUT /widgets/ endpoint with the new settings in the request body.