Referral code input components

Every InfluTo SDK ships a ready-made field where users type a creator's referral code or a free-access code. It prefills the code when a referral link brought the user, checks it with InfluTo, and applies it. Use it as is, or build your own field on validateCode and applyCode — see the last section and the referral code guide.

Which component

All of them need initialize to have finished first.

How they behave

When a code is rejected, the components show the result's error text — the server's English message, such as "Code not found or inactive", or the SDK's "Network error or invalid response" — and fall back to your invalid label only when there's none (Android shows "This code has expired" for an expired code). For fully localized messages, build your own field and map error_code yourself.

Privacy defaults

By default each component shows only the field and whether the code is valid. Two props, both false by default, add more:

• showCampaignName — shows the campaign's name (React Native also shows its description).
• showReferrerName — shows the creator's personal name ("Referred by …"). Turn it on only if your creators agreed to be named.

React Native shows them once the code is valid (which is also when it's applied); iOS, Android and Flutter after the user taps Apply; web in the success message. The raw validateCode result always carries the creator's name in influencer.name and in message — keep those off screen in your own UI too.

React Native

import { ReferralCodeInput } from '@influto/react-native-sdk/ui';

<ReferralCodeInput
  appUserId={userId}
  labels={{ title: 'Got a code?', validateButton: 'Apply' }}
  colors={{ primary: '#111827' }}
  onApplied={(result) => {
    if (result.campaign?.campaign_type === 'FREE_ACCESS') refreshPremium();
  }}
  onSkip={() => navigation.navigate('Paywall')}
/>

Codes shorter than 4 characters are rejected in the component with INVALID_FORMAT before any request.

Theming

style takes React Native styles for container, titleContainer, title, subtitle, inputContainer, input, buttonContainer, validateButton, validateButtonText, skipButton, skipButtonText, messageContainer and messageText. They're applied on top of the defaults; the container is a white card with 20 pt padding, rounded corners and a shadow.

iOS (SwiftUI)

import SwiftUI
import InfluTo

struct CodeStep: View {
    let userID: String?

    var body: some View {
        InfluToReferralCodeInput(
            appUserId: userID,
            title: "Got a code?",
            onApplied: { result in
                if result.campaign?.campaignType == "FREE_ACCESS" { refreshPremium() }
            }
        )
    }
}

Labels has four vars: placeholder (Referral code), apply (Apply), valid (Code applied) and invalid (This code isn't valid):

var labels = InfluToReferralCodeInput.Labels()
labels.placeholder = "Promo code"
labels.apply = "Use code"

It's built from a standard TextField, Button and system text styles, with green and red for the valid and invalid states. Style the surrounding view with ordinary SwiftUI modifiers.

Android (Jetpack Compose)

dependencies {
    implementation("to.influ:android-sdk:1.1.1")
    implementation("to.influ:android-sdk-ui:1.1.1")
}

import to.influ.sdk.ui.InfluToReferralCodeInput

InfluToReferralCodeInput(
    appUserId = userId,
    title = "Got a code?",
    onApplied = { result ->
        if (result.campaign?.campaignType == "FREE_ACCESS") refreshPremium()
    },
)

It's built from Material 3 OutlinedTextField and Button, so it follows your MaterialTheme.

Flutter

import 'package:influto/influto.dart';

ReferralCodeInput(
  appUserId: userId,
  title: 'Got a code?',
  onApplied: (result) {
    if (result.campaign?.campaignType == 'FREE_ACCESS') refreshPremium();
  },
)

It uses a Material TextField with an outlined border and an ElevatedButton, so it follows your ThemeData.

Web (React)

@influto/web/react works in React and Ionic React apps.

import { ReferralCodeInput, useInfluToAttribution } from '@influto/web/react';

function CodeStep({ ready, userId }: { ready: boolean; userId?: string }) {
  const { loading, attribution } = useInfluToAttribution(ready);
  if (loading) return null;

  return (
    <>
      {attribution?.attributed && <p>Your creator's offer is applied.</p>}
      <ReferralCodeInput
        appUserId={userId}
        className="code-form"
        onCodeApplied={(code, result) => {
          if (result.campaign?.campaign_type === 'FREE_ACCESS') refreshPremium();
        }}
      />
    </>
  );
}

ReferralCodeInput

It renders an unstyled <form> with an input, a submit button and, after a submit, a <span role="status"> with Code applied or the error (Invalid code when the server gives none). Style it with your classes, or target the attributes it sets: data-influto-status on the form (idle, checking, valid, invalid) and data-influto-message on the message.

useInfluToAttribution

useInfluToAttribution(enabled = true, sdk = InfluTo) runs checkAttribution() once and returns loading, attribution (an AttributionResult or null), error and refresh(). Pass enabled = false until initialize() has resolved — before that, checkAttribution throws and the hook reports it as error.

Build your own field

For your own design or fully localized messages, use the SDK calls directly: check the code with validateCode while the user types (debounced), and apply it with applyCode when they submit.

// While typing (debounced): show valid / invalid only
const check = await InfluTo.validateCode(text);
setValid(check.valid);

// On submit
const result = await InfluTo.applyCode(text, userId);
if (!result.applied) showError(result.error_code);
else if (result.campaign?.campaign_type === 'FREE_ACCESS' && (await InfluTo.checkAccess(userId)).hasAccess) unlockPremium();

// While typing (debounced): show valid / invalid only
let check = await InfluTo.validateCode(text)
isValid = check.valid

// On submit
let result = await InfluTo.applyCode(text, appUserId: userID)
if result.applied != true {
    showError(result.errorCode)
} else if result.campaign?.campaignType == "FREE_ACCESS" {
    let access = await InfluTo.checkAccess(appUserId: userID)
    if access.hasAccess { unlockPremium() }
}

// While typing (debounced): show valid / invalid only
val check = InfluTo.validateCode(text)
isValid = check.valid

// On submit
val result = InfluTo.applyCode(text, userId)
if (result.applied != true) showError(result.errorCode)
else if (result.campaign?.campaignType == "FREE_ACCESS" && InfluTo.checkAccess(userId).hasAccess) unlockPremium()

// While typing (debounced): show valid / invalid only
final check = await InfluTo.instance.validateCode(text);
setState(() => isValid = check.valid);

// On submit
final result = await InfluTo.instance.applyCode(text, appUserId: userId);
if (result.applied != true) {
  showError(result.errorCode);
} else if (result.campaign?.campaignType == 'FREE_ACCESS' &&
    (await InfluTo.instance.checkAccess(appUserId: userId)).hasAccess) {
  unlockPremium();
}

// While typing (debounced): show valid / invalid only
const check = await InfluTo.validateCode(text);
setValid(check.valid);

// On submit
const result = await InfluTo.applyCode(text, userId);
if (!result.applied) showError(result.error_code);
else if (result.campaign?.campaign_type === 'FREE_ACCESS' && (await InfluTo.checkAccess(userId)).hasAccess) unlockPremium();

• Uppercase the input and keep only A–Z, 0–9, _ and -, 4–20 characters (code rules). The SDK only trims and uppercases, and the code it stores and writes to RevenueCat is the one you pass — so a stray space or invisible character from a pasted caption must be removed here.
• Map error_code / errorCode (INVALID_FORMAT, CODE_NOT_FOUND, CODE_EXPIRED, NETWORK_ERROR) to your own localized text. applied can also be false for a valid code, for example a free-access code without a user ID.
• applyCode binds the code to the user from identifyUser, or the user ID you pass; free-access codes need one.
• Don't display influencer or message unless your creators agreed to be named.
• Gate premium on your store entitlement or checkAccess().hasAccess, not on the code result alone.