Integration Approaches

Choose the simplest integration path for your host application.

This guide stays at a high level for external client teams. It is intended to show the most common wallet screen setup and how that same wallet screen can fit into different parts of your app.

The Main Idea

In most integrations, your application has a Wallet screen and that screen renders WalletHub.

The SDK still owns the wallet UI on that screen. Your host app still owns:

• authentication and token management
• native app permissions
• app navigation
• where the wallet screen appears in the user journey

Most Common Setup

This is the default setup most teams should start with.

Your application has a normal Wallet screen, and that screen renders WalletHub. The SDK provider is mounted above that screen so the wallet can use the SDK configuration and authentication token.

High-level example:

function App() {
  const authToken = tokenFromYourLoginFlow;

  return (
    <VECUProvider
      config={{
        authToken,
        deploymentStage: 'sandbox',
      }}
    >
      <WalletScreen />
    </VECUProvider>
  );
}

function WalletScreen() {
  return <WalletHub />;
}

UI example:

App
└── Wallet Screen
    └── WalletHub
        ├── Credentials
        └── Offers

This is usually enough for an external client integration. You mount VECUProvider, add a wallet screen, and the SDK provides the wallet experience inside it.

Same Wallet Screen, Different Starting Points

Some applications do not take users straight to the wallet from a tab or menu. Instead, users may reach the same wallet screen from another part of the app, such as Profile, Vehicle Details, or a feature-specific flow.

That does not change the wallet integration model. The destination is still the same Wallet screen, and that screen still renders WalletHub.

High-level example:

function App() {
  return (
    <VECUProvider config={{ authToken, deploymentStage: 'sandbox' }}>
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </VECUProvider>
  );
}

UI example:

App
├── Home
├── Profile
├── Vehicle Details
└── Wallet Screen
    └── WalletHub

In other words, many teams are still doing the same basic integration. The wallet simply appears at a different point in the host app flow.

Reference Applications

The wallet application and demo application are useful reference points for how the SDK can be mounted inside a host app.

Use them as examples of:

• rendering WalletHub inside a wallet screen
• placing that wallet screen inside app navigation
• coordinating host app authentication with SDK setup
• handling permissions and platform-specific configuration

Those examples include application-specific decisions and should not be treated as required templates.

Related Guidance

• Quick Start for the minimum integration path
• Configuration for SDK setup options
• Theming for branding and styling