Web SDK — Inline Version

This section presents real-world integration scenarios using the Tonder Inline Web SDK.

Each page demonstrates how to control different parts of the checkout experience — such as cards, APMs, save card option, or buttons — through the customization settings.

Available Use Cases

Dynamic Checkout Display

Integration Requirements

To run these examples successfully, make sure to include the required external scripts for payment processing:


<!-- Required for card payments or saved card flows -->
<script src="https://js.skyflow.com/v1/index.js"></script>
 
<!-- Required for Openpay processor support -->
<script src="https://openpay.s3.amazonaws.com/openpay.v1.min.js"></script>
<script src="https://openpay.s3.amazonaws.com/openpay-data.v1.min.js"></script>
 
<!-- Optional: Use this if you're not importing the SDK from NPM -->
<script src="https://zplit-prod.s3.amazonaws.com/v1/bundle.min.js"></script>

⚠️ If you’re loading the SDK via <script> instead of NPM, you can use:
const inline = new TonderSdk.InlineCheckout({...})
instead of:
import { InlineCheckout } from 'tonder-web-sdk'

How to Use These Demos

Each page shows a working example using the Inline SDK.
Code is segmented by framework (JavaScript, React, Angular).
You can copy and adapt the code snippets to match your integration.