Checkout

The Checkout implementation allows you to embed the Checkout Experience into your own website.

The Checkout Experience is the pop-up form that your customer accesses to make a payment. No matter how you ask your customer to pay - for example by sending them a link or by embedding the form on your website - they will always end up at the Checkout Experience to make their payment.

With Checkout, your payers never leave your website:

  1. With the click of a button on your website the Checkout Experience form opens for the payer.

  2. In the form, the payer can choose their preferred payment method and complete the payment.

  3. 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:
Grand Horizons Travel Website
Luxury Trip Package

Experience the ultimate luxury getaway with our exclusive travel package. Enjoy a 7-day stay at a five-star resort, gourmet dining, private tours, and much more.

Price: 5.000,00 €

Pay with the button below.

How to embed the Checkout Experience via Checkout

This simplified html example shows you how to implement the Checkout Experience in your website:

Script

Add the script that opens the Checkout 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 Checkout 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 Checkout 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>