# 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