@expresta/sdk-ts v1.0.3

Expresta Buttons TS SDK

This SDK provides a customizable JavaScript integration for embedding a dynamic "Order Now" button into your website or application, enabling seamless access to Expresta’s print-on-demand services.

Designed for large-scale partners, Expresa JS SDK allows their end-users to order books, printables, and other physical products directly through a secure and scalable interface.

Key features:

• Easy-to-integrate JavaScript snippet
• Customizable button styling and placement
• On demand product configuration (e.g., SKU, quantity, metadata)
• Straightforward communication with Expresta’s backend for order processing
• Minimal setup, no server-side integration required

Screenshots

Demo

Init by JS object: https://cdn.expresta.com/sdk/demo/init_by_js.html

Init by HTML attributes: https://cdn.expresta.com/sdk/demo/init_by_attributes.html

Documentation

Before getting started, please contact cooperation@expresta.eu to set up your business account and receive your initial integration details.

JS object / HTML attributes explanation

• lang: Language of the button and the domain where the predefined product list will open. Accepted values: sk, cz, at, de, hu, en
• class: Defines the button theme. Accepted values: dark, light. When using HTML attributes, add this as a class to the main wrapper
• account-id: Your business account ID registered with Expresta
• public-key: Your public key provided by Expresta
• utm-source: UTM source parameter for tracking (optional)
• utm-medium: UTM medium parameter for tracking (optional)
• utm-campaign: UTM campaign parameter for tracking (optional)
• utm-content: UTM content parameter for tracking (optional)
• Array of product configurations. Each item should include a valid product_id (previously provided by Expresta) and the desired quantity.

Usage/Examples

You can install TypeScript SDK using NPM

Component definition

import React, { useEffect, useRef } from 'react';
import { OrderButton } from '@expresta/sdk-tsc';

type ExprestaButtonProps = {
    product: { id: string };
    quantity?: number;
    account: string;
    publicKey: string;
    lang?: 'en' | 'sk' | 'cz' | 'at' | 'de' | 'hu';
    className?: 'dark' | 'light';
  };
  

const ExprestaButton: React.FC<ExprestaButtonProps> = ({
  product,
  quantity = 1,
  account,
  publicKey,
  lang = 'sk',
  className = 'dark'
}) => {
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!containerRef.current) return;

    OrderButton.init({
        lang,
        class: className,
        wrap: 'expresta-buttons-wrapper',
        account: account,
        public_key: publicKey,
        utm_source: 'example-source',
        utm_medium: 'example-medium',
        utm_campaign: 'example-campaign',
        utm_content: 'example-content',
        products: [
          {
            id: product.id,
            qty: quantity
          }
        ]
      });      
  }, [product, quantity, account, publicKey, lang, className]);

  return <div ref={containerRef} id="expresta-buttons-wrapper"></div>;
};

export default ExprestaButton;

Afterwards, you can use the defiend component

<ExprestaButton
    product={{ id: '1111' }}
    quantity={1}
    account="55555"
    publicKey="XXXX-1111-YYYY-2222"
    lang="sk"
    className="light"
/>

Support

For technical inquiries, contact us at api@expresta.com

For cooperation and support, contact us at cooperation@expresta.eu

Authors

• Expresta Collective
• @expresta