Skip to main content
This page provides a reference for the core methods available in the Ionic Full SDK.

​
Core Methods

The Tonder Ionic Full SDK (@tonder.io/ionic-full-sdk) exposes the InlineCheckout class, which implements all the methods necessary for payment, enrollment, configuration, and cleanup.

​
Method Details

Each method in the Tonder Ionic Full SDK serves a specific purpose in the payment integration workflow. Below you’ll find detailed information about each method, including their parameters, usage examples, and practical implementation guidance.
Creates a new instance of the InlineCheckout class with the necessary configuration for secure payment processing. This constructor establishes the connection with Tonder’s services and configures the payment environment.

​
InlineCheckout Parameter Table

ParameterTypeDescriptionRequired
apiKeyStringYour Tonder API key for authentication.Yes
returnUrlStringURL where the checkout form is mounted (used for 3DS redirect completion).Yes
modeStringOperating environment mode. Options: ‘product’ or ‘stage’.No
renderPaymentButtonBooleanIf true, the SDK renders a default Tonder payment button. If used, you must set payment data using setPaymentData().No
Here’s an example of how to initialize the InlineCheckout class:
const inlineCheckout = new InlineCheckout({
  apiKey: "YOUR_API_KEY",
  returnUrl: "YOUR_RETURN_URL",
  mode: "stage",
  renderPaymentButton: false 
});
Renders the pre-built checkout UI into your designated container. This method creates and displays the complete payment form with card input fields, validation, and styling.
ParameterTypeDescription
dataObjectThe customer configuration object, containing at least the email
Here’s an example:
// Example using customer email and Secure Token for card saving
inlineCheckout.configureCheckout({
  customer: {
    email: "example@email.com",
    secureToken: "e89eb18.." // Required for SaveCard functionality
  }
});
Initiates a payment transaction using the provided customer and cart data. This method processes the payment securely and handles the transaction flow.
ParameterTypeDescription
None-This method takes no parameters.
Here’s an example of how to process a payment:
inlineCheckout.injectCheckout();
Sets the payment data (such as customer, cart, and metadata). This is useful when using the default Tonder payment button.
ParameterTypeDescription
dataobjectThe full payment data structure.
Here’s an example:
/// Should be called after configureCheckout()
inlineCheckout.injectCheckout();
Processes a payment transaction securely using the provided checkoutData.
ParameterTypeDescription
checkoutDataobjectCustomer and cart information for the transaction, adhering to the Payment Data Structure.
 
// This method is used when the developer controls the payment button
const response = await inlineCheckout.payment(checkoutData);
Verifies the status of a 3D Secure (3DS) transaction. It should be called immediately after injectCheckout() to handle the redirect return.
ParameterTypeDescription
None-This method takes no parameters.
 
// The response status will be one of: ['Declined', 'Cancelled', 'Failed', 'Success', 'Pending', 'Authorized']
inlineCheckout.verify3dsTransaction().then((response) => {
  console.log("Verify 3ds response", response); 
});
Saves a new card. This method is useful when the SDK is configured as an enrollment card (isEnrollmentCard: true).
ParameterTypeDescription
None-This method takes no parameters.
 
await this.tonderService.saveCard();
Removes the checkout UI from the DOM and cleans up resources.
ParameterTypeDescription
None-This method takes no parameters.
 
inlineCheckout.removeCheckout();