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.

tiptop.checkout(checkoutObject);
tiptop.checkout.open();
 
// OR
 
tiptop.checkout(checkoutObject).open();

Example

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

Payment Modal

Calling tiptop.checkout.open() 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 tiptop.checkout.open() 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

Parameters and Callbacks

Parameters

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.

// Callback example
tiptop.checkout.open({
    onFail: function(error) {
      ...
    },
    onSuccess: function(checkout) {
      ...
    },
    onOpen: function(token) {
      ...
    },
    onValidationError: function(error) {
      ...
    }
});