Swap Terminal

Jupiter Terminal is an open-sourced, lite version of Jupiter. This terminal provides end-to-end swap functionality by linking it in your HTML with just a few lines of code.

Jupiter Terminal References

• Terminal Playground: To play with different settings,features and styling.
• Open Source Repository: To understand and make use of the Jupiter Terminal better.
• API Type Reference: To utilize the different references.

Core Features

Feature	Details
Lightweight	-main-v3.js bundle (~70KB gzippped) - App bundle (~1.1 MB gzipped) loads on-demand when init() is called. - Preload app bundle with data-preload attributes.
Agnostic	- Works with any application in Integrated, Widget, or Modal format. - Compatible with frameworks like React, Plain HTML, etc. - Responsive to all screen sizes.
Customization	- Supports Swap, Payment, or Ape tokens use cases. - Allows fixed input/output amounts or mint. - Offers ExactIn or ExactOut swap modes.
Built-in Wallets	- Wallet Standard support, powered by Unified Wallet Kit. - Passthrough wallet from your app.
Fees Support	- Customizable fees and trackable via Referral Dashboard.

API References

Typescript Support

Since Jupiter Terminal is only importable via CDN, to get proper typing, you can create a typing declaration jupiter-terminal.d.ts file in your project, and copy the contents in src/types/index.d.ts.

declare global {
    interface Window {
        Jupiter: JupiterTerminal;
    }
}
// ...
// ...
// ...

Fee Support

There are no protocol fees on Jupiter, but integrators can introduce a platform fee on through the Swap Terminal as underlying, it is using the Swap API which allows you to take fees.

Refer to the Add Fees To Swap guide to get the accounts and add it.

window.Jupiter.init({
    // ...
    platformFeeAndAccounts,
});

Resuming / Closing Activity

- Every time `init()` is called, it will create a new activity. - If you want to resume from previous activity, you can use `resume()` instead. - `close()` function to hide the widget.

if (window.Jupiter._instance) {
    window.Jupiter.resume();
}

window.Jupiter.close();

Token List

The Jupiter Token List API is an open, collaborative and dynamic token list to make trading on Solana more transparent and safer for all. It is default to `true` to ensure that only validated tokens are shown.

• strictTokenList?: boolean;

onSuccess / onSwapError Callback

`onSuccess()` and `onSwapError()` reference can be provided, when swap is successful or errored respectively.

window.Jupiter.init({
    onSuccess: ({ txid, swapResult }) => {
        console.log({ txid, swapResult });
    },
    onSwapError: ({ error }) => {
        console.log('onSwapError', error);
    },
});

Customizing Styles

CSS Properties

Any CSS-in-JS can be injected to the outer-most container via containerStyles API.

window.Jupiter.init({
    // ... 
    containerStyles: { zIndex: 100 },
    containerStyles: { maxHeight: '90vh' },
});

className (Tailwind)

Tailwind classes can be injected to the outer-most container via containerClassName API.

window.Jupiter.init({
    // ...
    containerClassName: 'max-h-[90vh] lg:max-h-[600px]',
});