Shopping (React Native)

Shopping configurations

Please refer to Shopping configurations (React Native).

Customize shopping click behaviors

Please refer to Customize shopping click behaviors.

Product Hydration

Host app can implement onUpdateProductDetails callback to update product info in the client side, such as product name. We call this product hydration. For example, the host apps could fetch the latest product information from their own servers on the callback and return the lastest product info in the callback. The code snippets are:

FireworkSDK.getInstance().shopping.onUpdateProductDetails = async (event) => {
  let products: Product[] = [];
  for (let productId of event.productIds) {
    let product: Product = { productId: productId };

    // The latest product information can be fetched from the servers of the host app.

    // Product-level properties
    product.name = 'latest-product-name';
    product.subtitle = 'latest-product-subtitle';
    // Product-level currency string (e.g. "USD", "EUR")
    product.currency = 'USD';
    product.description = 'latest-product-description';
    product.isAvailable = true;
    product.mainProductImage = 'https://example.com/product-image.jpg';
    // Set to true to hide the product price
    product.hidePrice = false;
    // The translated custom CTA title displayed to the user
    product.customCTATitleTranslation = 'Buy Now';
    // Set to true to hide the primary CTA button
    product.hidePrimaryCTA = false;
    product.customCTATarget = '_blank';
    product.customCTAUrl = 'https://example.com/product';
    // The custom CTA title key (untranslated)
    product.customCTATitle = 'Add to Cart';
    // Set to true to hide this product entirely
    product.hidden = false;

    // Product units (variants)
    // IMPORTANT: unitId must match the unit id from the Firework SDK.
    // The SDK matches units by unitId to determine which variant to hydrate.
    // Only matched units will be updated; unmatched ones retain their original values.
    product.units = [
      {
        unitId: 'unit-id-1',
        name: 'Variant 1',
        url: 'https://example.com/product/variant-1',
        imageUrl: 'https://example.com/variant-1-image.jpg',
        // Current selling price
        price: {
          amount: 19.99,
          currencyCode: 'USD',
        },
        // Original price before discount (used to show strikethrough price)
        originalPrice: {
          amount: 39.99,
          currencyCode: 'USD',
        },
        // Whether this variant is available for purchase
        isAvailable: true,
        // Variant options such as color, size, etc.
        options: [
          { name: 'Color', value: 'Red' },
          { name: 'Size', value: 'M' },
        ],
      },
      {
        unitId: 'unit-id-2',
        name: 'Variant 2',
        url: 'https://example.com/product/variant-2',
        imageUrl: 'https://example.com/variant-2-image.jpg',
        price: {
          amount: 24.99,
          currencyCode: 'USD',
        },
        originalPrice: {
          amount: 49.99,
          currencyCode: 'USD',
        },
        isAvailable: false,
        options: [
          { name: 'Color', value: 'Blue' },
          { name: 'Size', value: 'L' },
        ],
      },
    ];

    products.push(product);
  }

  // Return the hydrated product list to the SDK.
  // All properties are optional except productId and unitId.
  // Only set the properties you want to override;
  // unset properties will retain their original values from the SDK.
  return products;
};

Reference

VideoShopping