Platforms/Tools/Guides/Wallet SDK Integration

Wallet SDK Integration

Add the CommerceHub Connect Wallet SDK web component to let shoppers select, add, and verify cards and bank accounts in a dialog or embedded in your page, instead of building the payment-source screens yourself. Your backend creates and completes the interaction.

Step 1: Understand the integration model

Step 1 of 11

The SDK provides the <commerce-hub-connect> web component for payment-source selection, creation, verification, and management, plus native-account balances when enabled. The same contract works in plain TypeScript, Angular, React, and Lit, in dialog or embedded presentation.

ℹYour backend authenticates the shopper, creates the interaction, keeps the merchant credentials, and completes selection-based interactions. Your front end mounts the widget, supplies the interaction response, and handles events. The SDK fetches interaction state and runs the shopper flows, including validation, encryption, and inline errors.

ℹNot every workflow is available to every merchant. The interaction's features, tender permissions, country and product configuration, and source verification state decide what the SDK offers.

ℹBrowser requirements: custom elements, Shadow DOM, Fetch, and Web Crypto. Serve production pages over HTTPS and validate your target browsers against the support matrix from onboarding.

ℹBefore you start, confirm the approved SDK release, target environment, allowed tenders, country and product configuration, backend signing specification, and support contact.

ℹNever substitute test credentials into a production integration.