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 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 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 is fractal_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.

Webhooks