# Inline Flow
The JavaScript SDK allows you to offer one-off payments and flexible payment plans 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 JavaScript SDK
To get started, pull in the global-payflexi.js script unto your web page and access an instance of the PayFlexi 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/global-payflexi.js"></script>
</head>
<form >
<button type="button" onclick="payWithPayFlexi()">Pay with PayFlexi</button>
</form>
<script>
function payWithPayFlexi() {
try {
let payflexi = PayFlexi.checkout({
key: 'pf_test_pk_J1EJ9dAqtPOMwsluamG9Jyn7qUJXNSqday5nlkQW',
amount: 125,
currency: 'EUR',
name: 'Somebody',
email: 'someone@payflexi.test',
meta: {
title: 'Invoice #590',
description: 'Payment for Invoice #590'
},
endDate: { day: 2, month: 8, year: 2021 },
plansEnabled: true,
gateway: 'stripe',
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 PayFlexi JavaScript object passing a config object as the only parameter as shown above; on the instance of PayFlexi returned to you, call the renderCheckout method to display the PayFlexi Inline Payment Pop-up.
TIP
While in test mode or just fine-tuning your integrations, please only use a sandbox or test customer belonging to one of your business accounts on PayFlexi, do not use your real customer data. Learn more about testing.
# 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 highest denomination) you want to charge the buyer |
| currency* | (string) The currency in which to charge the amount above |
| (string) An optional customer's email | |
| name | (string) An optional 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 |
| gateway* | (string) The payment gateway through which you want payment processed. It can only be one of stripe and paystack at this time |
| endDate | (object) An optional future date by which you want payments to have been completed when plans are enabled |
| plansEnabled | (boolean) An optional flag to disable payment plans on the checkout. Default is true, only one-off payments are made available when set to false |
| 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 |
TIP
Enable your customers to buy now and make more affordable payments over time with PayFlexi Buy Now, Pay Later. Only available to merchants in Nigeria at this time.
# Using the JavaScript SDK — BNPL
To get started, pull in the bnpl-payflexi.js script unto your web page and access an instance of the PayFlexiBnpl 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/bnpl-payflexi.js"></script>
</head>
<form >
<button type="button" onclick="payWithPayFlexiBnpl()">Pay with PayFlexi BNPL</button>
</form>
<script>
function payWithPayFlexiBnpl() {
try {
let payflexi = PayFlexiBnpl.initiate({
key: 'pf_test_pk_J1EJ9dAqtPOMwsluamG9Jyn7qUJXNSqday5nlkQW',
amount: 125000,
currency: 'NGN',
name: 'Somebody',
email: 'someone@payflexi.test',
meta: {
title: 'Invoice #590',
description: 'Payment for Invoice #590'
},
title: 'Lightweight Jacket',
callback_url: 'https://domain.test/bnpl',
item_url: 'https://domain.test/jacket',
onExit: function() {
console.log('exited');
},
onPaymentSuccess: function(response) {
console.log(response);
},
onRequestDecline: function(response) {
console.log(response);
}
});
payflexi.renderCheckout();
} catch (error) {
console.log(error.message);
}
}
</script>
# What's Going On — BNPL?
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 initiate method on the PayFlexiBnpl JavaScript object passing a config object as the only parameter as shown above; on the instance of PayFlexiBnpl returned to you, call the renderCheckout method to display the PayFlexi BNPL Inline Payment Pop-up.
TIP
While in test mode or just fine-tuning your integrations, please only use a sandbox or test customer belonging to one of your business accounts on PayFlexi, do not use your real customer data. Learn more about testing.
# Configuration Options — BNPL
'*' 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 highest denomination) you want to charge the buyer |
| currency* | (string) The currency in which to charge the amount above |
| (string) An optional customer's email | |
| name | (string) An optional 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 |
| item_url | (string) An optional URL representing where the order item can be found on your store |
| title | (string) A very short caption describing the order |
| description | (string) An optional but more lengthy descriptive texts for the order — this could be used to save notes, etc on the order on your system. |
| callback_url | (string) An optional URL you want us to redirect your customer to after payment is completed |
| onPaymentSuccess* | (function) Javascript callback that should be called if the payment is successful |
| onRequestDecline | (function) An optional Javascript callback that should be called if the BNPL request could not be auto-approved on the checkout or is declined |
| 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 |