> For the complete documentation index, see [llms.txt](https://docs.xswap.link/xswap/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xswap.link/xswap/xpay/usage-examples/cross-chain-token-purchase.md).

# Cross-chain Token Purchase

In this example, we will take a look at a simple project which can be found here: [**GitHub**](https://github.com/xswap-link/Cross-Chain-Token-Purchase)

<figure><img src="/files/LrRdfQff9EgCu1JwH62G" alt=""><figcaption><p>Cross-chain Token Purchase</p></figcaption></figure>

## Overview

This application is extremely simple, to demonstrate how easy it is to integrate XPay. Assuming that the Dapp already has integration with the web3 wallet provider we will focus more on the XPay. For this example, the application is using RainboKit to connect the wallet. In the next section let's take a look at the XPay integration.

<figure><img src="/files/awvE2MRmXJlIxWM9zipn" alt=""><figcaption><p>Cross-chain Token Purchase Demo</p></figcaption></figure>

## Quick Start

To run the demo locally clone the repository, create a `.env` file by coping the `.env.sample`, and set the variables `VITE_INTEGRATOR_ID` (the framework requires the prefix VITE\_). If you don't have an integrator Id please [**Apply Here**](https://forms.gle/Y6kh19Bghtayt6FZ7)**.**

&#x20;Then using the npm package manager run the following command

```
npm install
```

After installing the dependencies start the dev server

```
npm run dev
```

## XPay Integration

In this demo, we use just one function from XPay, `openTransactionModal``.`

### openTransactionModal

Here is the function call from the project

```typescript
const transactions = await openTransactionModal({
  integratorId, // integrator Id from .env
  dstChain: "8453", // Base
  dstToken: "0x8fe815417913a93ea99049fc0718ee1647a2a07c", // XSWAP Token
});
```

Here we defined the `chain` and `token` that users will be able to buy as well as the `integratorId`. This function opens a modal for the user where they will be able to select the source chain and token for the transaction.&#x20;

Once the user approves the swap form, the modal will move to the execution view. The transactions contain optional approve and swap transactions which need to be signed by the user.&#x20;

After the swap transaction was confirmed on the source blockchain the cross-chain swap is in motion and we can monitor the transaction progress. Once the transaction is being delivered a notification will appear in the corner of the browser.

After the cross-chain message is delivered and executed the notification will change to green and disappear.&#x20;


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.xswap.link/xswap/xpay/usage-examples/cross-chain-token-purchase.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.