Direct Integration
TipTop-JS reference
Open TipTop Checkout

Open TipTop checkout

Introduction

By utilizing the tiptop.checkout.open() 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

Initialization

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

JavaScript
tiptop.checkout(checkoutObject);
tiptop.checkout.open();

Example

JavaScript
tiptop.checkout({
  "orderID": "ORD-12345",
  "currency": "USD",
  "totalCost": 2999,
  "taxCost": 200,
  "shippingCost": 100,
  // Additional parameters for items, addresses, etc.
});
 
tiptop.checkout.open();

Parameters and Callbacks

Parameters

ParameterRequiredDescription
checkoutObjectyescheckout related data payload

Callbacks

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.
JavaScript
// Callback example
tiptop.checkout.open({
    onFail: function(error) {
      ...
    },
    onSuccess: function(checkout) {
      ...
    },
    onOpen: function(token) {
      ...
    },
    onValidationError: function(error) {
      ...
    }
});