Inline Checkout

Overview

Inline Checkout is our iframe checkout option which displays a secure payment form as an overlay on your checkout page. It is designed to function when the buyer’s billing/shipping address has been collected and the cart total has been finalized. This makes it ideal for use with shopping cart applications or your own custom checkout process.

Note: This feature is available to all 2Checkout merchants by default - there are no additional fees to use Inline Checkout.

Integration

To place a sale using Inline Checkout, your checkout form must utilize our Hosted Checkout parameter set. This parameter set allows you to dynamically pass in recurring, non-recurring, shipping, tax, and coupon line items.

Your form must also pass in the buyer’s name, email, and full billing address.The buyer’s shipping address is also required if the sale is tangible, or if a shipping lineitem is passed in.

Required parameters for intangible sales

Required parameters for tangible sales

Example Checkout Form - Intangible Product

<form action='https://www.2checkout.com/checkout/purchase' method='post'>
<input type='hidden' name='sid' value='1303908' />
<input type='hidden' name='mode' value='2CO' />
<input type='hidden' name='li_0_type' value='product' />
<input type='hidden' name='li_0_name' value='invoice123' />
<input type='hidden' name='li_0_price' value='25.99' />
<input type='hidden' name='card_holder_name' value='Checkout Shopper' />
<input type='hidden' name='street_address' value='123 Test Address' />
<input type='hidden' name='street_address2' value='Suite 200' />
<input type='hidden' name='city' value='Columbus' />
<input type='hidden' name='state' value='OH' />
<input type='hidden' name='zip' value='43228' />
<input type='hidden' name='country' value='USA' />
<input type='hidden' name='email' value='example@2co.com' />
<input type='hidden' name='phone' value='614-921-2450' />
<input name='submit' type='submit' value='Checkout' />
</form>

Since our example form above is passing all of the required information for an intangible sale, integrating with Inline Checkout is as easy as including our small JavaScript library at the bottom of the page where your checkout form is located:

<script src="https://www.2checkout.com/static/checkout/javascript/direct.min.js"></script>

The Inline Checkout JavaScript library will add an iframe to the DOM and hook into any existing form that uses our checkout routine. When the buyer submits the form, our Inline Checkout page will overlay your current checkout page.

Example Checkout Form - Tangible Product

<form action='https://www.2checkout.com/checkout/purchase' method='post'>
<input type='hidden' name='sid' value='1303908' />
<input type='hidden' name='mode' value='2CO' />
<input type='hidden' name='li_0_type' value='product' />
<input type='hidden' name='li_0_name' value='invoice123' />
<input type='hidden' name='li_0_price' value='25.99' />
<input type='hidden' name='li_0_tangible' value='Y' />
<input type='hidden' name='li_1_type' value='shipping' />
<input type='hidden' name='li_1_name' value='Express Shipping' />
<input type='hidden' name='li_1_price' value='13.99' />
<input type='hidden' name='card_holder_name' value='Checkout Shopper' />
<input type='hidden' name='street_address' value='123 Test Address' />
<input type='hidden' name='street_address2' value='Suite 200' />
<input type='hidden' name='city' value='Columbus' />
<input type='hidden' name='state' value='OH' />
<input type='hidden' name='zip' value='43228' />
<input type='hidden' name='country' value='USA' />
<input type='hidden' name='ship_name' value='Checkout Shopper' />
<input type='hidden' name='ship_street_address' value='123 Test Address' />
<input type='hidden' name='ship_street_address2' value='Suite 200' />
<input type='hidden' name='ship_city' value='Columbus' />
<input type='hidden' name='ship_state' value='OH' />
<input type='hidden' name='ship_zip' value='43228' />
<input type='hidden' name='ship_country' value='USA' />
<input type='hidden' name='email' value='example@2co.com' />
<input type='hidden' name='phone' value='614-921-2450' />
<input name='submit' type='submit' value='Checkout' />
</form>

Since our example form above is passing all of the required information for a tangible sale, integrating with Inline Checkout is as easy as including our small JavaScript library at the bottom of the page where your checkout form is located:

<script src="https://www.2checkout.com/static/checkout/javascript/direct.min.js"></script>

The buyer can easily complete the checkout process or if they need to return to the cart, they can simply click the close button (X) to dismiss the overlay and complete the checkout when they are ready.

Return Process

Inline Checkout uses the same return processes as standard checkout. If you have an existing integration with standard checkout, you do not need to modify your return setting.

Event Callbacks

You may specify a callback to be invoked on certain events that happen in the checkout process:

Events:

• checkout_loaded - Invoked when the inline form is visible to the buyer.
• checkout_closed - Invoked when the inline form is closed by the buyer.

The event_type will be passed to the callback that is subscribed.

Example:

  var myCallback = function(data) {
        console.log(JSON.stringify(data));
        // Example callback data
        // {"event_type":"checkout_loaded"}
        // {"event_type":"checkout_closed"}
    };
     (function() {
         inline_2Checkout.subscribe('checkout_loaded', myCallback);
         inline_2Checkout.subscribe('checkout_closed', myCallback);
     }());

Errors/Debugging

Please Note: Inline Checkout focuses solely on securely and efficiently collecting the buyer’s payment information. The buyer’s name, email and billing address must be passed in from your payment form. If a required parameter is missing, we will break out of the iframe and redirect the buyer to standard checkout to fill in the missing data.

Are you being directed to the standard checkout routine while implementing the Inline Checkout feature? Please refer to the following suggestions that may resolve the issue:

• Clear your browser’s cache and cookies, close all open instances of your browser, then recommence testing.
• Review your page to ensure that the mandatory JavaScript code has been properly implemented.
• Ensure that you are using the Hosted Checkout parameter set to pass in sale details.

Check to make sure all required billing information is being passed in for intangible sales.

Check to make sure all required billing and shipping information is being passed in for tangible sales: