Direct Integration
TipTop-JS reference
Open TipTop Checkout

Open TipTop checkout


By utilizing the function, you can seamlessly direct your customers to TipTop's secure payment portal. This guide outlines the steps involved in implementing this functionality.

Implementation Steps


To initiate the checkout process, create a checkout object using tiptop.checkout(). Subsequently, call to transition the customer to TipTop's secure payment portal.

// OR


  "orderID": "ORD-12345",
  "currency": "USD",
  "totalCost": 2999,
  "taxCost": 200,
  "shippingCost": 100,
  // Additional parameters for items, addresses, etc.

Payment Modal

Calling will do 2 things:

  1. Send the checkout object to TipTop's servers for processing.
  2. Launch TipTop's secure payment portal as a modal over your current page.

For example, you may want to call when a user clicks a "Checkout" button on your site. Doing so would open the TipTop payment modal over your site, allowing the user to complete their purchase without leaving your page.

TipTop modal overlaid on checkout page image

Parameters and Callbacks


checkoutObjectyescheckout related data payload


This method primarily focuses on initiating the checkout process and doesn't return a value directly. Redirection URLs are configured within the checkout object itself.

Callback functions are crucial for handling different scenarios during checkout (relevant for redirect checkout flow only, not modal):

  • onFail: Invoked if the customer exits, cancels, or is declined during checkout.
  • onSuccess: Triggers upon successful checkout confirmation. This function receives a success object containing a checkout_id used for checkout authorization in the subsequent request.
  • onOpen: Informs you when TipTop Checkout successfully initializes on the user interface.
  • onValidationError: Alerts you in case of validation errors during the checkout request.
// Callback example{
    onFail: function(error) {
    onSuccess: function(checkout) {
    onOpen: function(token) {
    onValidationError: function(error) {