Inline Checkout

The Paddle checkout can also be embedded into your web store page rather than being presented as an overlay. The inline option is usually selected when sellers want to build a more complex checkout flow that collects additional data points, while using Paddle to seamlesssly handle the payment.

To implement the inline checkout, you will need to specify a div element within your form where the Paddle iframe should be rendered. You also need to pass the parameter method: 'inline' to Paddle.js.

Displaying product information

The content rendered in the inline checkout is a minimal version of the overlay checkout so that you have the flexibility to display sale information in the way that you want. For this reason, you will need to show the following information elsewhere in your page:

  • Product name or subscription plan name
  • Product price or subscription plan price and billing period
  • Quantity information

Collecting and passing in the below details is also recommended. This ensures that the only checkout stage rendered is the payment information stage:

  • Email Address
  • Country Code (ISO 2 Letter Code)
  • ZIP/Postal Code

Required parameters

The following parameters are required to ensure the checkout is displayed correctly:

  • frameTarget: (String) the class name of the div element where the checkout should be rendered
  • frameStyle: (CSS String) styles to apply to the checkout div, for example width. Note that frame height should not be set here, but in the next parameter.
  • frameInitialHeight: (int) height in pixels of the div on load

Example


<html>
	<head>
		<title>My Checkout</title>
		<meta charset="utf-8" />
		<script src="https://cdn.paddle.com/paddle/paddle.js"></script>
	</head>
    <body>
	    <div class="checkout-container"></div>
		<script type="text/javascript">
			Paddle.Setup({
				vendor: 12345          // Replace with your Vendor ID.
			});
			Paddle.Checkout.open({
				method: 'inline',
				product: 543210,       // Replace with your Product or Plan ID
				allowQuantity: false,
				disableLogout: true,
				frameTarget: 'checkout-container', // The className of your checkout <div>
				frameInitialHeight: 375,
				frameStyle: 'width:300px; border: none; background: transparent;'
			});
		</script>
	</body>
</html>

Loading behaviour

The inline checkout can be loaded in response to an event, or triggered on page load. There may be a slight delay before it is rendered after the main page contents have loaded.

The loadCallback parameter can optionally be specified to trigger a function when the checkout is opened. This can be used, for example, to display a spinner or loading bar while the checkout is initialising, and then hide it when the checkout is ready.

Updating in-page information

Checkout prices may update in response to events such as adding a coupon or removing sales tax by submitting a VAT registration number. When implementing the inline checkout, it is recommended to update your in-page pricing in response to these changes.

The following example shows how in-page elements displaying the net price, sales tax amount, total price and subscription billing periods could be refreshed at each stage in the checkout, including changing the checkout currency.


Paddle.Setup({
  vendor: 15839,
  eventCallback: function(eventData) {
    updatePrices(eventData);
  }
});

function updatePrices(data) {
  var currencyLabels = document.querySelectorAll(".currency");
  var subtotal = data.eventData.checkout.prices.customer.total - data.eventData.checkout.prices.customer.total_tax;

  for(var i = 0; i < currencyLabels.length; i++) {
    currencyLabels[i].innerHTML = data.eventData.checkout.prices.customer.currency + " ";
  }

  document.getElementById("subtotal").innerHTML = subtotal.toFixed(2);
  document.getElementById("tax").innerHTML = data.eventData.checkout.prices.customer.total_tax;
  document.getElementById("total").innerHTML = data.eventData.checkout.prices.customer.total;

  if (data.eventData.checkout.recurring_prices) {
    var recurringCurrency = data.eventData.checkout.recurring_prices.customer.currency;
    var recurringTotal = data.eventData.checkout.recurring_prices.customer.total;
    var intervalType = data.eventData.checkout.recurring_prices.interval.type;
    var intervalCount = data.eventData.checkout.recurring_prices.interval.length;

    if(intervalCount > 1) {
      var recurringString = '<div class="is-line-label">Then</div><div class="is-line-value">'+recurringCurrency+" "+recurringTotal+" / "+intervalCount+" "+intervalType+"s</div>";
    }
    else {
      var recurringString = '<div class="is-line-label">Then</div><div class="is-line-value">'+recurringCurrency+" "+recurringTotal+" / "+intervalType+"</div>";
    }

    document.getElementById("recurringPrice").innerHTML = recurringString;
  }
}

See an example of this in action.

Implementing inline checkout for a subscription plan? Get in touch with us for guidance on best practice.