Similar to the redirect, Blinqpay Inline SDK allows you to begin accepting payments by following the procedures explained below.
A - OBTAIN API KEYS
API keys are an integral part of our SDK integration, and they can be obtained from your dashboard. Be advised to use the provided test keys while integrating / testing, and then switch to live keys for your production environment.
B - INCLUDE REQUIRED SCRIPTS
Get the required integration scripts and load them into your app
<form>
<script src="https://plugins.blinqpay.io/bundle.js"></script>
<button type="button" onclick="useBlinqpay()"> Pay</button>
</form>
C - INITIALIZE THE CHECKOUT MODAL WITH A TRANSACTION
Please follow the code snippet below
function useBlinqpay() {
blinqpaySDK.init({
publicKey: YOUR_PUBLIC_KEY,
reference: "MST-" + Math.floor(Math.random() * 1000000000 + 4),
amount: 5000.00,
customerName: 'Test Client',
customerEmail: '[email protected]',
phoneNumber: '0800-Blinqpay',
currency: 'NGN',
callbackUrl: 'http://yourcallbackurl.com',
onClose: () => console.log('closed'),
onSuccess: (data) => console.log(data),
onFailure: (data) => console.log(data),
});
}
PAYLOAD DETAILS
| Key | Required | Description |
|---|---|---|
| publicKey | true | Keys gotten from your dashboard, and are dynamic based on Test or Live modes |
| reference | true | A unique alpha-numeric identifier for each transaction. An example is MST-8892A01 |
| amount | true | Transaction amount (Minimum 100 Naira) |
| customerName | true | Client's name |
| customerEmail | true | Client's email |
| phoneNumber | true | Client's phone number |
| currency | true | Transaction currency - we currently support Naira |
| callbackUrl | true | URL to redirect Clients to, upon successful / failed / cancelled transactions |
| onClose, OnSuccess, onFailure | true | Explained below |
If all is done as instructed, the SDK modal pops up on the screen, and clients can make payments using any of the supported options. Please keep in mind that the test key obtained from your dashboard is to be used for test purposes only. Remember to switch to a live key for production environments.
D - RECEIVING SUCCESSFUL TRANSACTION NOTIFICATIONS
When a transaction has been made successfully, a notification would be sent to the webhook URL provided in your dashboard, which includes relevant details for specific transactions. The notification would have the format highlighted on the webhook section
Communicating with the Checkout through the embedded script
When the Checkout is loaded onto a browser and in use, certain actions ( as functions ) are exposed within the script to allow interactions with the Checkout, based on statuses or events. These are Required, and explained in details below
| Key | Type | Details |
|---|---|---|
| onSuccess | Function | Actions for when a transaction is successful |
| onClose | Function | Actions for when the payment modal is closed |
| onFailure | Function | Actions for when a transaction fails |