Skip to content

Widget Integration

Self-Hosted Wallet Verification Widget

Setting up multi-flow self-hosted wallet verification can be a tedious process. Therefore, CryptoSwift provides an all-in-one solution that is easy to integrate into your products. The self-hosted wallet verification widget can be integrated as a Web Component or Standalone App.

CryptoSwift Self-Hosted Wallet Verification Widget

To initiate a self-hosted wallet verification session via the widget, follow the steps below:

1. Send an Initiation Request

Before starting the verification flow for your user, you need to send an API request to prepare the widget data.

# Example request
curl --location 'https://api.cryptoswift.eu/wallet-verification/widget' \
--header 'x-api-key: a70fcedf-416b-4f83-845c-a05aba0d7da4' \
--header 'Content-Type: application/json' \
--data '{
  "depositAddress": "025ecb213e8322af685473d2e4c8b23b5c104a9e57822027380a9bf6cd68dc2bfc",
  "asset": "BTC",
  "blockchain": "Bitcoin",
  "withdrawalAddress": "02f852bec98de40721fe0c5188c7255f7bc8592c1a1bcddb7d0c8edbf47f0f503c",
  "redirectUrl": "https://your.crypto-app.domain/wallet-verification",
  "origin": "https://your.crypto-app.domain:80"
}'

The mandatory data includes:

  • asset (BTC, ETH etc)
  • blockchain
  • withdrawalAddress - the wallet address of the user to verify
  • origin - the domain/port that will be used to host the widget. It will enforce security both on the client-side and while validating the signature (if applicable)

Additionally you can provide a redirectUrl URL (in case you are using the standalone widget version and not the Web Component) and define a depositAddress in case you want to enable the Satoshi Test flow.

You can specify the supported verification flows by setting allowedFlows. If allowedFlows are not provided, CryptoSwift will automatically select the most suitable verification flows based on the input data.

Refer to the API documentation for more details.

API Response:

{
  "id": "f075bb83-8ca6-49ce-b688-36a382287828",
  "token": "97857f6c-396a-4d68-a1bf-563bfb76c5b6",
  "url": "http://widget.cryptoswift.eu/?id=f075bb83-8ca6-49ce-b688-36a382287828&token=97857f6c-396a-4d68-a1bf-563bfb76c5b6"
}

The response from the API includes the unique ID of the verification plus a token. This data needs to be provided to the Widget itself. This can be done either as GET parameters in case of standalone version, or as data attributes in case using the Web Component version.

2. Integrate the Widget

Option A: Web Component

To integrate the widget as a web component:

1. Import the Component

<script type="module" src="https://wallet.cryptoswift.eu/widget/wallet-verifier.js"></script>

2. Define the Component

<wallet-verifier
    id="wv"
    data-id="f075bb83-8ca6-49ce-b688-36a382287828"
    data-token="97857f6c-396a-4d68-a1bf-563bfb76c5b6">
</wallet-verifier>

Alternatively you can inject the data-id and data-token dynamically at runtime:

const verifier = document.getElementById('wv');
verifier.setAttribute('data-id', response.id);
verifier.setAttribute('data-token', response.token);

3. Listen for the Completion Event

The widget emits a Completion event once the flow is completed

<script>
    document
        .getElementById('wv')
        .addEventListener('verification-complete', (event) => {
            console.log('Verification result:', event.detail);
        });
</script>

The verification-complete event contains the following data:

  • id – Verification session ID
  • status – The status of the verification: "PENDING", "VERIFIED", "FAILED" or "DELETED"
  • flow – Selected verification flow
  • address – Verified wallet address
  • asset
  • blockchain

Option B: Standalone App

If you prefer not to embed the widget, redirect the wallet owner to:

https://wallet.cryptoswift.eu/?id={{ID}}&token={{TOKEN}}

At the end of the verification process, the user will be redirected to the redirectUrl specified in the initiation request. The ID of the verification will be added as a GET parameter to the redirectUrl. This allows you to check the status of the wallet verification using the API.

Next steps