PayFlexi

# 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: '[email protected]',
                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
email (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

← API Overview →