メインコンテンツへスキップ

How to Easily Add a Solana Token Swap to Your Webpage with Jupiter Terminal

更新日：
2025年11月26日
アーロン・ミラノのプロフィール
アーロン・ミラノ
すべて
ソラナ
SVM
Swap
DeFi
dApps
JavaScript
木星

読了時間：8分

概要​

Often, a dApp may require a user to pay for a product or service with a specific token, or a dApp may have built-in mechanics that require a user to swap tokens. In these cases, having a swap feature built into your dApp can be helpful. Jupiter, a leading swap program on Solana, has created a simple, end-to-end swap component that can be added to any webpage: Jupiter Terminal. Jupiter Terminal allows users to swap tokens without leaving your site.

主な業務内容​

In this guide, you will learn how to use Jupiter Terminal to add a swap feature to any webpage in 5 minutes.

  1. Learn the Basics of the Jupiter protocol
  2. Create a simple HTML page
  3. Add Jupiter Terminal to the page

必要なもの​

What is Jupiter?​

Jupiter is a Web3 Swap program on Solana. Jupiter allows users to find efficient routes for swapping tokens on Solana. Token swapping is a core feature of DeFi that enables users to trade one token for another while accounting for the market value of each token.

Jup.ag Swap Source: jup.ag

Jupiter aggregates pricing from many decentralized exchanges (DEXs) and automated market makers (AMMs) and employs a unique algorithm called "smart routing" that allows users to find the best price for their swap.

Jupiter Routes Source: Jupiter Docs: How Does Jupiter Work

Jupiter will also search for inefficiencies in intermediary swaps (e.g., USDC-mSOL-SOL instead of USDC-SOL) to find lower costs for users. When executing swaps, Jupiter also utilizes a concept called Trade Splitting, which breaks a trade into smaller trades across multiple DEXs to find the best price.

What is Jupiter Terminal?​

Jupiter Terminal is a simple, end-to-end swap component that can be added to any webpage. Jupiter Terminal allows users to swap tokens without leaving your site. Jupiter Terminal is a great way to add a swap feature to your site without having to build your own swap program or component.

Jupiter Terminal Example

It also allows users to enjoy a seamless experience with a reputable swap program. Additionally, you can easily add fees to your swaps, a great way to monetize your site.

Currently, Jupiter Terminal is available in three different formats:


  • Modal: (default) a modal overlaying the whole screen.
  • Integrated: Renders Jupiter Terminal component as a part of your webpage.
  • Widget: renders Jupiter Terminal as a widget/pop-up button that can be placed in different positions.

For this demo, we will create a page with an integrated terminal, but you can use the same process to add a modal or widget to your page.

Create a Simple HTML Page​

Let's start by creating a new file, index.html, in a new project directory, jupiter-example. In your terminal, run the following command:

mkdir jupiter-example && cd jupiter-example && echo > index.html

を開く index.html file in your favorite text editor and add the following code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quick Swap Demo</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
            background-color: #002e3b;
        }
        h1 {
            padding: 20px;
            font-size: 24px;
            color: white;
        }
        #integrated-terminal {
            padding: 10px;
            border-radius: 20px;
            background-color: #304256
        }
    </style>
</head>

<body>
    <h1>Quick Swap Demo</h1>
    <div id="integrated-terminal">
    </div>
</body>

</html>

This should give us a simple page with a title and a div with the id integrated-terminal. We will use this div to render the Jupiter Terminal component. We have included some styling to make the page look a little nicer, but feel free to add your own styling.

Let's make sure our page renders before we move on. In your terminal, run the following command:

npx http-server

その http-server command will start a local server and serve your index.html file. You should see the following output:

Starting up http-server, serving ./
//...
Available on:
  http://127.0.0.1:8080
Hit CTRL-C to stop the server

Open your browser and navigate to the path specified in your terminal (in this case http://127.0.0.1:8080). You should see the following page:

Simple HTML Page

Nice work. Now, let's add an integrated Jupiter Terminal component to our page. Terminate your http-server process by pressing CTRL-C または CMD-C ターミナルで。

Add Jupiter Terminal​

あなたの index.html file, we will need to add our Jupiter Terminal script and inject the component into our page. Under your <title> tag, add the main Jupiter Terminal script with the data-preload tag:

    <title>Quick Swap Demo</title>
    <!-- Add This 👇 -->
    <script src="https://terminal.jup.ag/main-v1.js" data-preload></script>

This will ensure the script is preloaded on your browser's document.readyState === "complete" イベント。

Before we can initialize our Jupiter Terminal, we will need a Solana Mainnet endpoint to connect to.

Quicknodeのエンドポイントを使用してSolanaクラスターに接続する

Solana上で開発を行うには、ネットワークに接続するためのAPIエンドポイントが必要です。パブリックノードを利用することも、独自のインフラストラクチャをデプロイして管理することも可能です。ただし、応答時間を8倍高速化したい場合は、その手間を私たちにお任せください。

なぜ、のプロジェクトの50％以上が ソラナ Quicknode を選んで、無料トライアルを始めましょう こちら. ここでは、 ソラナ メインネット エンドポイント。

をコピーして HTTP プロバイダーのリンク：

Now, inside the integrated-terminal div we created, we just need to initialize the Jupiter Terminal using a window.Jupiter.init スクリプト：

    <div id="integrated-terminal">
        <!-- Add This 👇 -->
        <script>
            window.Jupiter.init({
                displayMode: "integrated",
                integratedTargetId: "integrated-terminal",
                // 👇 REPLACE THIS WITH YOUR OWN HTTP PROVIDER ENDPOINT
                endpoint: "https://example.solana-mainnet.quiknode.pro/123456/",
                formProps: {
                    fixedOutputMint: false
                }
            });
        </script>
    </div>

その window.Jupiter.init script takes a few parameters:


  • displayMode specifies the type of Jupiter Terminal to render. In this case, we are using integrated to render the component on our page. Alternatively, you could pass modal (default) or widget.
  • integratedTargetId is required for displayMode: "integrated". This is the ID of the div we created earlier.
  • エンドポイント is our Quicknode Solana endpoint we created earlier.

Let's test it out and make sure it works. In your terminal, run the following command:

npx http-server

Great job! You should now have a Jupiter Swap component embedded in your page. You can now swap tokens without leaving your page. You should notice that the Component allows you to connect a Solana wallet (even though our page did not include a Solana Wallet Adapter). We can select a token to swap from, enter an amount, and select the token we would like to receive:

Jupiter Swap Component

Tip: Use Your dApp's Existing Wallet Provider

Jupiter allows you to use your dApp's existing wallet provider. You can pass a walletProvider parameter to the passThroughWallet parameter to use your dApp's existing wallet provider.

const App = () => {
  const { wallet } = useWallet();

  const initJupiter = () => {
    if (wallet) {
      window.Jupiter.init({
        endpoint,
        // 👇 USE YOUR DAPP'S EXISTING WALLET PROVIDER
        passThroughWallet: wallet,
      });
    }
  };
};

Additional Parameters​

Additionally, you can add some optional parameters depending on your use case:


  • strictTokenList (ブール値): a smaller set of tokens that have been validated by the Jupiter team (default: true)
  • formProps (オブジェクト): a set of form properties that can be used to customize the functionality of the swap. Example:
    {
        // Limit the input token to a single token
        "fixedInputMint": true,
        // Limit the output token to a single token
        "fixedOutputMint": true,
        // Define how the swap is calculated
            // ExactIn: The user specifies the amount of input tokens, and the amount of output tokens is calculated
            // ExactOut: The user specifies the amount of output tokens, and the amount of input tokens is calculated
        "swapMode": "ExactOut" // "ExactIn", 
        // Restrict user to not be able to change the input amount
        "fixedAmount": true,
        // Predefine the input amount
        "initialAmount": "8888888800000",
        // Predefine the input token
        "initialInputMint": "DezXAZ8z7PnrnRJjz3wXBoRgixCa6xjnB7YaB1pPB263",
        // Predefine the output token
        "initialOutputMint": "AZsHEMXd36Bj1EMNXhowJajpUXzrKcK57wW4ZGXVa7yR"
    }
  • passThroughWallet (ブール値): use your dApp's existing wallet provider (default: false)
  • widgetStyle (オブジェクト, for displayMode: "widget" only): styling for the widget. Example:
    {
        position: 'bottom-right', // 'bottom-left', 'top-left', 'top-right'
        size: 'default', // 'sm'
    }
  • defaultExplorer: 'Solana Explorer' (default) | 'Solscan' | 'Solana Beach' | 'SolanaFM'
  • containerStyles (文字列): inject CSS styles to the outer-most container
  • containerClassName (文字列): inject Tailwind classes to the outer-most container

まとめ​

You just created a simple landing page with a swap feature using Jupiter Terminal. You can use this process to add a swap component, widget, or modal to any webpage.

If you have a question or idea you want to share, drop us a line on Discord or Twitter!

皆様からのフィードバックを心よりお待ちしております！❤️

ご意見や新しいトピックに関するご要望などがありましたら、ぜひお知らせください。皆様からのご連絡を心よりお待ちしております。

リソース​

最終更新日 on
このガイドをシェアする