Checkout
The Checkout integration allows you to embed the Commercial Payment Experience into your own website.
What is the Commercial Payment Experience?
The Commercial Payment Experience is the pop-up form that your customer accesses to make a payment.
With Checkout, your payers never leave your website:
-
With the click of a button on your website the Commercial Payment Experience form opens for the payer.
-
In the form, the payer can choose their preferred payment method and complete the payment.
-
After the payment is completed and the form is closed, the payer either is returned to the original page or is redirected to a page you specified.
You can use Checkout for the following payment types:
Confirm Your Booking
Review your trip details below and complete payment securely.
How to embed the Commercial Payment Experience via Checkout
This simplified html example shows you how to implement the Commercial Payment Experience in your website:
Script
Add the script that opens the Commercial Payment Experience to your page.
The script source is
https://checkout.flywire.com/flywire-payment.js
Button
Add a button (or other element or event) to trigger the Commercial Payment Experience form.
Event Handler
Add an event handler that defines what happens after the button is clicked.
Configuration
Set your portal specific payment configuration options. See List of Configuration Parameters for all parameters.
Render
Render the Commercial Payment Experience form with the specified configuration.
<!DOCTYPE html>
<html>
<head>
<!-- Include the flywire.js script -->
<script src="https://checkout.flywire.com/flywire-payment.js"></script>
</head>
<body>
<!-- Add a button element -->
<button onclick="pay()">
Make Payment
</button>
<script>
// Add an event handler
function pay() {
var config = {
// See sample configuration options
};
var modal = window.FlywirePayment.initiate(config);
modal.render();
}
</script>
</body>
</html>
