Here’s everything you need to know about setting flexible ways for your customers to pay for their next adventure.
Before you begin…
If you haven’t already got one, you’ll need a Fly Now Pay Later merchant account. Get in touch with our sales team and they’ll set you up.
Once you’ve got your details, you’ll be able to log into our Merchant Portal.
Processing an application
To the customer, you can present Fly Now Pay Later as a flexible payment option and an alternative way to split the cost of their booking. However, this is still technically a loan and is subject to credit checks.
We run these credit checks automatically through a form that is dynamically injected into your site once the user clicks “Checkout with Fly Now Pay Later”.
If the application is successful, you’ll need to request a Virtual Debit Card using a Server Side call to our virtual card API endpoint.
We’ll show you how to set up that button and request a Virtual Debit Card further down this page.
What can customers use Fly Now Pay Later for?
Your customers can use Fly Now Pay Later to book anything related to their holiday or trip, as long as they can get an e-ticket.
That usually means they can book packages, flights and hotels, but not things like rail journeys.
Setting up your integration
Getting set up is super simple.
-
Step 1: Login into the Merchant Portal using the details you got from our sales team.
-
Step 2: Once you’re in, click the “add new” button to set up a new integration.
-
Step 3: Tell us the domain that you’ll be setting Fly Now Pay Later up on.
-
Step 4: Hit the “Done” button.
-
Step 5: You’ll see the integration screen and the integration key that you’ll need to integrate the library of Fly Now Pay Later features into your site.
This is where the magic happens.
Before you start, make sure you have the correct integration key for your implementation. (See Setting up your integration for more information.)
Include our Library
You must include Fly Now Pay Later service through a script tag targeting our API endpoint. Here are the supported URL parameters you can provide within the URL:
https://widget.us.flynowpaylater.com/cdn/integration.min.js
When integrating testing environment, the application will integrate in developer mode.
Within this screen you can confirm all of the variables sent to us, as well as use triggers that our application can execute.
-
callback=myCallback
The name of your callback function.
-
key=**********
The integration key representing your integration from the portal.
-
currency=usd (optional)
The currency in which integration will be loaded in.
-
locale=en (optional)
The integration interface language.
-
jurisdiction=us (optional)
The country code of the jurisdiction where this application is taking place.
-
mode=demo (optional)
Only available in testing mode – Loads the Fly Now Pay Later demo application process.
-
reference=ABC1234 (optional)
This is your system reference.
Your Callback
You must create a callback function that will be executed at the point of Fly Now Pay Later service being loaded. Once loaded, the service will call the governed callback and provide you with the Fly Now Pay Later model. Which then can be used to setup your itinerary and customer information.
<script type="text/javascript"> window.fnplCallback = FNPL => { // ... FNPL variable represents the FNPL model. }; </script>
Fly Now Pay Later Model
The model will be provided to you at the initiation of the Fly Now Pay Later service. Once provided you may start using it. Please note to keep the model in private scope and not set it to a public scope to avoid advanced users from accessing it through the browser console.
- Itinerary methods
-
itinerary.type.setFlightType(): void DEPRECATED
Sets the itinerary type to “Flight Booking”.
-
itinerary.clearFlights(): void
Clears all flights from the itinerary.
-
itinerary.addFlight(FlightObject): void
Registers a flight against the itinerary.
-
itinerary.clearHotels(): void
Clears all hotels from the itinerary.
-
itinerary.addHotel(HotelObject): void
Registers a hotel against the itinerary.
-
itinerary.clearRentals(): void
Clears all rental items from the itinerary.
-
itinerary.addRental(RentalItem): void
Registers a rental item against the itinerary.
-
itinerary.person.name.set(string): void
The full name of the primary passenger on your booking.
-
itinerary.person.name.get(): string | NULL
Returns the primary passengers full name.
-
itinerary.person.name.clear(): void
Clears the primary passengers full name.
-
itinerary.person.dob.set(int day, int month, int year): void
Sets the primary passengers date of birth.
-
itinerary.person.dob.get(): Date | NULL
Returns the primary passengers date of birth.
-
itinerary.person.dob.clear(): void
Clears the primary passengers date of birth.
- Checkout methods
-
checkout.amount.set(float): void
Sets the full checkout amount you wish to receive.
-
checkout.amount.get(): float | NULL
Returns the full checkout amount you wish to receive.
-
checkout.currency.get(): string
Returns the currency code for this checkout.
-
checkout.locale.get(): string
Returns the locale code for this checkout.
-
checkout.jurisdiction.get(): string
Returns the jurisdiction country code for this checkout.
- Applicant methods
-
applicant.fullName.set(string): void
Sets the applicants full name.
-
applicant.fullName.get(): string | NULL
Returns the applicants full name.
-
applicant.fullName.clear(): void
Clears the applicants full name.
-
applicant.dateOfBirth.set(int day, int month, int year): void
Sets the applicants date of birth.
-
applicant.dateOfBirth.get(): Date | NULL
Returns the applicants date of birth.
-
applicant.dateOfBirth.clear(): void
Clears the applicants date of birth.
-
applicant.residentialType.set(integer): void
Sets the applicants residential type using ResidentialType.
-
applicant.residentialType.get(): integer | NULL
Returns the applicants residential type.
-
applicant.residentialType.clear(): void
Clears the applicants residential type.
-
applicant.employmentType.set(integer): void
Sets the applicants residential type using EmploymentType.
-
applicant.employmentType.get(): integer | NULL
Returns the applicants residential type.
-
applicant.employmentType.clear(): void
Clears the applicants residential type.
-
applicant.phone.country.set(string country code): void
Sets the applicants mobile phone country code.
-
applicant.phone.country.get(): string | NULL
Returns the applicants mobile phone country code.
-
applicant.phone.country.clear(): void
Clears the applicants mobile phone country code.
-
applicant.phone.number.set(string): void
Sets the applicants mobile phone number without country code.
-
applicant.phone.number.get(): string | NULL
Returns the applicants mobile phone number without country code.
-
applicant.phone.number.clear(): void
Clears the applicants mobile phone number.
-
applicant.email.set(string): void
Sets the applicants e-mail address.
-
applicant.email.get(): string | NULL
Returns the applicants e-mail address.
-
applicant.email.clear(): void
Clears the applicants e-mail address.
-
applicant.salary.currency.set(string currency code): void
Sets the applicants salary currency.
-
applicant.salary.currency.get(): string | NULL
Returns the applicants salary currency.
-
applicant.salary.currency.clear(): void
Clears the applicants salary currency.
-
applicant.salary.annualAmount.set(integer): void
Sets the applicants salary annual amount.
-
applicant.salary.annualAmount.get(): integer | NULL
Sets the applicants salary annual amount.
-
applicant.salary.annualAmount.clear(): void
Sets the applicants salary annual amount.
-
applicant.gender.set(integer GenderType): void
Sets the applicant gender using GenderType.
-
applicant.gender.get(): integer | NULL
Return the applicants gender.
-
applicant.gender.clear(): void
Clears the applicants gender.
-
applicant.address.floor.set(string): void
Sets the applicants primary address’s floor.
-
Sets the applicants primary address's floor.
Sets the applicants primary address’s floor.
-
applicant.address.floor.clear(): void
Clears the applicants primary address’s floor.
-
applicant.address.apartment.set(string): void
Sets the applicants primary address’s apartment.
-
applicant.address.apartment.get(): string | NULL
Sets the applicants primary address’s apartment.
-
applicant.address.apartment.clear(): void
Clears the applicants primary address’s apartment.
-
applicant.address.house.set(string): void
Sets the applicants primary address’s house.
-
applicant.address.house.get(): string | NULL
Sets the applicants primary address’s house.
-
applicant.address.house.clear(): void
Clears the applicants primary address’s house.
-
applicant.address.street.set(string): void
Sets the applicants primary address’s street.
-
applicant.address.street.get(): string | NULL
Sets the applicants primary address’s street.
-
applicant.address.street.clear(): void
Clears the applicants primary address’s street.
-
applicant.address.city.set(string): void
Sets the applicants primary address’s city.
-
applicant.address.city.get(): string | NULL
Sets the applicants primary address’s city.
-
applicant.address.city.clear(): void
Clears the applicants primary address’s city.
-
applicant.address.county.set(string): void
Sets the applicants primary address’s county.
-
applicant.address.county.get(): string | NULL
Sets the applicants primary address’s county.
-
applicant.address.county.clear(): void
Clears the applicants primary address’s county.
-
applicant.address.postcode.set(string): void
Sets the applicants primary address’s postcode.
-
applicant.address.postcode.get(): string | NULL
Sets the applicants primary address’s postcode.
-
applicant.address.postcode.clear(): void
Clears the applicants primary address’s postcode.
-
applicant.address.country.set(string country code): void
Sets the applicants primary address’s country.
-
applicant.address.country.get(): string | NULL
Sets the applicants primary address’s country.
-
applicant.address.country.clear(): void
Clears the applicants primary address’s country.
- Generic methods
-
build(your-element-id): void
Once called, we will create an
iframe
element within the specified dom element. This is the location where all of our application visual processes will take place. -
setCallback.complete(function): void
In the event of successful customer application, customer wll authorise their funds and Fly Now Pay Later library will execute the success callback. Here you must assign your success callback function that will be executed at the point of successful customer fund authorisation. When executed, function must contain one argument
token
. The token provided can then be used to process the authorisation at the Fly Now Pay Later Backend API. If your integration has payment proxy assigned to it, at the point of token submission to Fly Now Pay Later, we will send the funds to your payment processor, in any other case, we will return the full card information that you may then process using your own payment processing tools. -
save(): void
Commits the information provided by you and submits to our system. If at any point you need to make amendments, change the relevant itinerary field and execute the .save() method to confirm the changes.
FlightObject
This is an object that contains information for a one way flight information.
-
flightNumber string
Contains the flight number, for example
SVO8122
. -
passengers array
Contains an array of one or many PersonObject objects.
-
from.date.day integer
Contains departure date’s day figure
-
from.date.month integer
Contains departure date’s month figure
-
from.date.year integer
Contains departure date’s year figure
-
from.airport string
Contains departure airport IATA code, for example
LGW
. -
from.country string
Contains departure country code, for example
US
. -
to.date.day integer
Contains arrival date’s day figure
-
to.date.month integer
Contains arrival date’s month figure
-
to.date.year integer
Contains arrival date’s year figure
-
to.airport string
Contains arrival airport IATA code, for example
LGW
. -
to.country string
Contains arrival country code, for example
US
.
HotelObject
This is an object that contains information for a single hotel booking.
-
checking.in.day integer
Contains check-in day figure
-
checking.in.month integer
Contains check-in month figure
-
checking.in.year integer
Contains check-in year figure
-
checking.out.day integer
Contains check-out day figure
-
checking.out.month integer
Contains check-out month figure
-
checking.out.year integer
Contains check-out year figure
-
persons array
Contains an array of one or many PersonObject objects.
-
name string
Name of the hotel.
-
rooms integer
Room count booked.
-
country string
Contains country code where hotel is located, for example
US
.
RentalObject
This is an object that contains information for a single rental item.
-
period.start.day integer
Contains period start day figure
-
period.start.month integer
Contains period start month figure
-
period.start.year integer
Contains period start year figure
-
period.end.day integer
Contains period end day figure
-
period.end.month integer
Contains period end month figure
-
period.end.year integer
Contains period end year figure
-
persons array
Contains an array of one or many PersonObject objects.
-
name string
Name of the hotel.
-
country string
Contains country code where hotel is located, for example
US
.
PersonObject
This is an object that contains base level information about a person.
-
name string
Contains the full name of the passenger.
-
dob.day integer
Contains the date of birth day figure for the passenger.
-
dob.month integer
Contains the date of birth month figure for the passenger.
-
dob.year integer
Contains the date of birth year figure for the passenger.
GenderType
List of supported types.
-
101 Female
-
102 Male
EmploymentType
List of supported types.
-
100 Other
-
101 Full Time Employment
-
102 Part Time Employment
-
103 Self Employed
-
104 Not Employed
-
105 Student
-
106 Homemaker
-
107 Retired
ResidentialType
List of supported types.
-
100 Other tenant
-
101 Owner
-
102 Tenant Unfurnished
-
103 Council Tenant
-
104 House Share
-
105 Living With Parents
-
106 Tenant Furnished
Integration example
Here’s an example of the full client side integration. You must provide as much as information you can to ensure the customer goes through our process as fast as possible to complete your checkout.
<div id="your-element-id"></div> <script type="text/javascript"> window.fnplCallback = FNPL => { FNPL.build('your-element-id'); // Set the information about the applicant (Might be same as the primary passenger) FNPL.applicant.fullName.set('John Stuart-Tomas Doe'); FNPL.applicant.dateOfBirth.set(16, 3, 1990); FNPL.applicant.residentialType.set(101); FNPL.applicant.employmentType.set(101); FNPL.applicant.phone.country.set('US'); FNPL.applicant.phone.number.set('7777000066'); FNPL.applicant.email.set('customer@email-addre.ss'); FNPL.applicant.salary.currency.set('USD'); FNPL.applicant.salary.annualAmount.set(30000); FNPL.applicant.address.floor.set('4'); FNPL.applicant.address.apartment.set('12b'); FNPL.applicant.address.street.set('Market street'); FNPL.applicant.address.city.set('Hyde'); FNPL.applicant.address.county.set('Greater Manchester'); FNPL.applicant.address.postcode.set('SK14 1HG'); FNPL.applicant.address.country.set('US'); // Set the information about the primary passenger on your booking FNPL.itinerary.person.name.set('John Stuart-Tomas Doe'); FNPL.itinerary.person.dob.set(16, 3, 1990); // Set the information about your flight itinerary // FNPL.itinerary.type.setFlightType(); // DEPRECATED // You may register all of the connected, returning, or individual flights on the ticket, there is no limit. // Set the first flight on the ticket, with all of its passengers on this flight. FNPL.itinerary.addFlight({ flightNumber: 'FL123', passengers: [ { name: 'John Stuart-Tomas Doe', dob: {day:16, month: 3, year: 1990} }, { name: 'Anna Doe', dob: {day:2, month: 5, year: 1985} } ], from: { date: {day:10, month:1, year: 2021}, country: 'us', airport: 'lgw', }, to: { date: {day:10, month:1, year: 2021}, country: 'us', airport: 'lut', } }); // Set the followup or return flights on the ticket FNPL.itinerary.addFlight({ flightNumber: 'FL345', passengers: [ { name: 'John Stuart-Tomas Doe', dob: {day:16, month: 3, year: 1990} } ], from: { date: {day:10, month:1, year: 2021}, country: 'us', airport: 'lgw', }, to: { date: {day:11, month:1, year: 2021}, country: 'lv', airport: 'rix', } }); FNPL.itinerary.addHotel({ name: 'Tree House', rooms: 2, country: 'US', checking: { in: {day:11, month:1, year: 2021}, out: {day:16, month:1, year: 2021} }, persons: [ { name: 'John Stuart-Tomas Doe', dob: {day:16, month: 3, year: 1990} }, { name: 'Anna Doe', dob: {day:2, month: 5, year: 1985} } ] }); FNPL.itinerary.addRental({ name: 'BMW e70, year 2007, x-drive 3.0d', country: 'US', period: { start: {day:11, month:1, year: 2021}, end: {day:16, month:1, year: 2021} }, persons: [ { name: 'John Stuart-Tomas Doe', dob: {day:16, month: 3, year: 1990} }, { name: 'Anna Doe', dob: {day:2, month: 5, year: 1985} } ] }); // Set the checkout information FNPL.checkout.amount.set(799.98); // Set the callback function we will call once a successful authorisation has commenced. FNPL.setCallback.complete(dispersalToken => { Alert('Your dispersal token is: ' + dispersalToken); }); // Trigger the save function, to send the changes to our service. FNPL.save(); }; </script>
Server side
As we described in the Client Side documentation, if the process of an application or login is successful, i.e. a Fly Now Pay Later customer has authorised a payment to you then you have received a dispersal token. You will then need to process a server side request to the Fly Now Pay Later Backend API to receive a payment card details.
If your integration is setup to use payment proxy, we will execute the payment towards your payment proxy and return the information received by them.
Marketing Assets
Overview
Give shoppers the option to pay over time with Fly Now Pay Later. Including Fly Now Pay Later logos, banners, and buttons early and throughout the shopping experience helps motivate shoppers to complete their purchases.
Compliance requirements
Please do not modify any assets without consent from Fly Now Pay Later.
Do not mask or alter Fly Now Pay Later’s brand by ‘white-labeling’ or by changing Fly Now Pay Later materials with different content, color, or design.
Logos
Download ZIP FileName | Example | Download |
F logo blue |
|
PNG / JPEG / SVG / EPS / PDF |
F logo white |
|
PNG / JPEG / SVG / EPS / PDF |
FNPL logo black |
|
PNG / JPEG / SVG / EPS / PDF |
FNPL logo white |
|
PNG / JPEG / SVG / EPS / PDF |
FNPL logo blue |
|
PNG / JPEG / SVG / EPS / PDF |
FNPL logo plain |
|
PNG / JPEG / SVG / EPS / PDF |
Banners
Download ZIP FileName | Example | Download |
160x600 |
![]() |
Low Res:
PNG
High Res:
PNG
|
240x400 |
![]() |
Low Res:
PNG
High Res:
PNG
|
300x250 |
![]() |
Low Res:
PNG
High Res:
PNG
|
300x600 |
![]() |
Low Res:
PNG
High Res:
PNG
|
336x280 |
![]() |
Low Res:
PNG
High Res:
PNG
|
468x60 |
![]() |
Low Res:
PNG
High Res:
PNG
|
550x480 |
![]() |
Low Res:
PNG
High Res:
PNG
|
728x90 |
![]() |
Low Res:
PNG
High Res:
PNG
|
728x210 |
![]() |
Low Res:
PNG
High Res:
PNG
|
728x300 |
![]() |
Low Res:
PNG
High Res:
PNG
|