@expresta/sdk-ts/README.md

A lightweight JS SDK for embedding Expresta's order button into websites using Typescript.

# 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

![App Screenshot](https://cdn.expresta.com/sdk/screenshots/button-dark.png)

![App Screenshot](https://cdn.expresta.com/sdk/screenshots/button-light.png)
## 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 <div>
* 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 
```ts
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
```ts
<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](https://career.expresta.com/people)
- [@expresta](https://www.npmjs.com/org/expresta)