# Save To Buy (Pay Small, Small) Inline Flow
This JavaScript SDK allows you to offer the PayFlexi Save To Buy
payment mode on any web page and have your customers paying you in a matter of minutes following the guide below.
TIP
It helps to have your PayFlexi merchant API credentials and keys handy before completing the rest of this guide.
# Using the Save To Buy JavaScript SDK
To get started, pull in the target-savings-payflexi.js
script unto your web page and access an instance of the PayFlexiSavings
object as follows:
WARNING
Only use your public merchant API keys when using any of our Inline JavaScript Flow
, never use a secret API key.
<head>
<script src="https://payflexi.co/js/v1/target-savings-payflexi.js"></script>
</head>
<form >
<button type="button" onclick="paySmallSmallWithPayFlexi()">Pay Small Small</button>
</form>
<script>
function paySmallSmallWithPayFlexi() {
try {
let payflexi = PayFlexiSavings.checkout({
key: 'pf_test_pk_J1EJ9dAqtPOMwsluamG9Jyn7qUJXNSqday5nlkQW',
amount: 120000,
name: 'Adebisi Kalu',
email: 'adebisi@payflexi.test',
meta: {
title: 'Invoice #590',
description: 'Payment for Invoice #590'
},
onExit: function() {
console.log('exited');
},
onSuccess: function(response) {
console.log(response);
},
onDecline: function(response) {
console.log(response);
}
});
payflexi.renderCheckout();
} catch (error) {
console.log(error.message);
}
}
</script>
# What's Going On?
Prepare your own payment form and attach a click handler to an element on your page, usually the pay button, and initiate payment by calling the checkout
method on the PayFlexiSavings
JavaScript object passing a config object as the only parameter as shown above; on the instance of PayFlexiSavings
returned to you, call the renderCheckout
method to display the PayFlexi Inline Payment Pop-up.
TIP
Use one of our predefined test users when you are in test mode, do not use your real customer data.
# Configuration Options
'*' indicates required parameters.
Option | Description |
---|---|
key* | (string) Your pubic merchant API key obtained from your PayFlexi merchant settings page. Use test key for test mode and live key for live mode |
amount* | (integer/float) The total amount (in Naira) you want buyer to pay small small over a period of time as set your settings page |
email* | (string) Your customer's email |
name* | (string) Your customer's name or some identifier |
reference | (string) An optional reference or some identifier for this order. We would assign your transaction an automatic reference if this is not passed |
meta | (object) Use this to pass through any optional custom data you want associated with this order or transaction |
onSuccess* | (function) Javascript callback that should be called if the payment is successful |
onDecline | (function) An optional Javascript callback that should be called if the payment is unsuccessful |
onExit | (function) An optional Javascript callback that should be called if the payment is cancelled by customer closing the payment pop-up |