# 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
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

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
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
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