rn-button-sdk

Button SDK for React Native https://developer.usebutton.com/

Installation

npm install @flipgive/rn-button-sdk

Configuration

iOS

Add Button SDK App ID to Info.plist:

<key>ButtonSdkAppId</key>
<string>your_ios_app_id</string>

Android

Add Button SDK App ID to AndroidManifest.xml:

<application>
  <meta-data 
    android:name="com.usebutton.sdk.app_id" 
    android:value="your_android_app_id" />
</application>

API

Basic Usage

import {
  startPurchasePath,
  clearAllData,
  setIdentifier,
  initializeSDK,
} from "@flipgive/rn-button-sdk";

// Initialize the SDK
await initializeSDK();

// Start purchase path
startPurchasePath({
  url: "https://the.button.url", // required
  token: "my-tracking-token", // required
  headerTitle: "My Button Browser Title",
  headerSubtitle: "My Button Browser Subtitle",
  headerTitleColor: "#FFFFFF",
  headerSubtitleColor: "#FFFFFF",
  headerBackgroundColor: "#FFFFFF",
  headerTintColor: "#FFFFFF",
  footerBackgroundColor: "#FFFFFF",
  footerTintColor: "#FFFFFF",
  promotionBadgeLabel: "Deals",
  promotionListTitle: "Available Deals",
  promotionBadgeFontSize: 12
});

// User login
setIdentifier(id);

// User logout
clearAllData();

Exit Confirmation Dialog

startPurchasePath({
  url: "https://the.button.url",
  token: "my-tracking-token",
  exitConfirmation: {
    enabled: true,
    title: "Leave Shopping?",
    message: "Are you sure you want to leave?",
    stayButtonLabel: "Stay",
    leaveButtonLabel: "Leave"
  }
});

Promotions

const promotionData = {
  merchantName: "Example Store",
  rewardText: "2% Cashback",
  featuredPromotion: {
    id: "featured-1",
    description: "Special Sale - Up to 65% off 4% Cashback",
    couponCode: "SALE65",
    startsAt: "2025-07-10T09:00:00Z",
    endsAt: "2025-07-25T23:59:00Z"
  },
  promotions: [
    {
      id: "promo-1",
      description: "New Sale Styles - Up to 50% off 3% Cashback",
      couponCode: "SAVE20",
      startsAt: "2025-07-15T09:00:00Z",
      endsAt: "2025-07-30T23:59:00Z"
    }
  ]
};

const baseUrl = "https://my-itent-page.com"

startPurchasePath({
  url: "https://the.button.url",
  token: "my-tracking-token",
  promotionData: promotionData,
  closeOnPromotionClick: true,
  promotionBadgeLabel: "Deals",
  promotionListTitle: "Available Deals",
  promotionBadgeFontSize: 13,
  onPromotionClick: async (promotionId: string) => {
    console.log('Promotion clicked:', promotionId);
    
    // Async calls here.....
    
    return {
      url: `${baseUrl}&promoId=${promotionId}`,
      token: "my-tracking-token" // static
    };
  }
});

License

MIT