# Paylink button

## Prerequisites

This component uses [pnpm](https://pnpm.io/), so you need to install it first, if you don't have it yet.

## Installation

Clone the repo:

```bash
git clone git@bitbucket.org:raisenow/paylink-button.git
```

Install dependencies:

```bash
pnpm install
```

## Dev server

### `pnpm start`, `pnpm dev`

Starts dev server with hot reload.

## Build a bundle

### `pnpm build:<mode>`

Build the bundle with specified target mode.<br>
Target modes:

- `dev`
- `stage`
- `production`

## Serve the bundle locally

### `pnpm serve`

Locally preview the build generated with `build:dev` command.

## Deploying to stage

### `pnpm deploy:stage`

Build the app with `stage` mode and upload it to the staging AWS S3 bucket.<br>

## Publish the package (prod)

### `npm publish --access public`

Makes a new release on npm.

## Examples

### Option 1. Web component

To use it on the page as a web component, add the following to the source code of your page:

```html
<!--Example for stage environment-->

<script
  src="https://paylink-button-stage.s3.eu-central-1.amazonaws.com/TwintButton.js"
  type="module"
></script>

<twint-pay-button
  solution-id="wpxdw"
  language="en"
  size="medium"
  width="fixed"
  color-scheme="dark"
></twint-pay-button>
```

### Option 2. Initialisation script

In some cases it may be problematic to use web components, for example when you use not very modern CMS,
which doesn't allow you to use custom tags.

In such cases it's possible to use initialisation script instead of web components.

To use it on the page with initialisation script, add the following to the source code of your page:

```html
<!--Example for stage environment-->

<div id="rnw-twint-button"></div>

<script type="module">
  import {TwintButton} from "https://paylink-button-stage.s3.eu-central-1.amazonaws.com/TwintButton.js"

  TwintButton.render(
    '#rnw-twint-button',
    {
      'solution-type': 'pay',
      'solution-id': 'wpxdw',
      'language': 'en',
      'size': 'medium'
      'width': 'fixed',
      'color-scheme': 'dark',
    }
  )
</script>
```

## Button tags

- `<paylink-button>`
- `<twint-pay-button>`
- `<twint-donate-button>`

## Twint button attributes / initialisation options

### `solution-type`

Type: `string`<br>
Possible values: `'pay'`, `'donate'`<br>
Default value:

- `'pay'` (in case of initialisation script usage)
- `'pay'` (in case of `<twint-pay-button>` web component usage)
- `'donate'` (in case of `<twint-donate-button>` web component usage)

### `solution-id`

Type: `string`<br>
Default value: `undefined` (this is required attribute)

### `language`

Type: `string`<br>
Possible values: `'en'`, `'de'`, `'fr'`, `'it'`, `'auto'`<br>
Default value: `'auto'` (auto-detected based on user's browser language with a fallback to `'de'` in case user uses unsupported language)

### `size`

Type: `string`<br>
Possible values: `'small'`, `'medium'`, `'large'`<br>
Default value: `'medium'`

### `width`

Type: `string`<br>
Possible values: `'fixed'`, `'full'`<br>
Default value: `'fixed'`

### `color-scheme`

Type: `string`<br>
Possible values: `'dark'`, `'light'`<br>
Default value: `'light'`

## Generic Paylink button attributes / initialisation options

### `solution-id`

Type: `string`<br>
Default value: `undefined` (this is required attribute)

### `size`

Type: `string`<br>
Possible values: `'small'`, `'medium'`, `'large'`<br>
Default value: `'medium'`

### `width`

Type: `string`<br>
Possible values: `'fixed'`, `'dynamic'`, `'full'`<br>
Default value: `'fixed'`

### `background-color`

Type: `string`<br>
Default value: `'#2596be'`

### `label`

Type: `string`<br>
Default value: `'Donate'`

### `icon`

Type: `string`<br>
Possible values: `'gift'`, `'heart'`, `'secure'`<br>
Default value: `'gift'`

### `border-radius`

Type: `string`<br>
Default value: `'8px'`

## Usage in runtime

### Option 1. Web component

Assuming you have `<div id="rnw-twint-button"></div>` container on your page,

- Create button programmatically:

  ```js
  const button = document.createElement('twint-donate-button')
  button.setAttribute('solution-id', 'wpxdw')
  button.setAttribute('color-scheme', 'dark')
  button.setAttribute('language', 'en')
  document.querySelector('#rnw-twint-button').appendChild(button)
  ```

- Change its attributes:

  ```js
  const button = document.querySelector('twint-donate-button')
  button.setAttribute('color-scheme', 'light')
  button.setAttribute('language', 'fr')
  ```

### Option 2. Initialisation script

Assuming you have `<div id="rnw-twint-button"></div>` container on your page,

- Create button programmatically:

  ```html
  <div id="rnw-twint-button"></div>

  <script type="module">
    import {TwintButton} from "https://paylink-button-stage.s3.eu-central-1.amazonaws.com/TwintButton.js"

    TwintButton.render(
      '#rnw-twint-button',
      {
        'solution-type': 'pay',
        'solution-id': 'wpxdw',
        'language': 'en',
        'size': 'medium'
        'width': 'fixed',
        'color-scheme': 'dark',
      }
    )
  </script>
  ```

- Change its attributes (use the same `TwintButton.render` function on the same target):

  ```html
  <script type="module">
    TwintButton.render('#rnw-twint-button', {
      language: 'fr',
      'color-scheme': 'light',
    })
  </script>
  ```