Paylink button

Prerequisites

This component uses pnpm, so you need to install it first, if you don't have it yet.

Installation

Clone the repo:

git clone [email protected]:raisenow/paylink-button.git

Install dependencies:

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. 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.

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:

<!--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:

<!--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 Possible values: 'pay', 'donate' 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 Default value: undefined (this is required attribute)

language

Type: string Possible values: 'en', 'de', 'fr', 'it', 'auto' 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 Possible values: 'small', 'medium', 'large' Default value: 'medium'

width

Type: string Possible values: 'fixed', 'full' Default value: 'fixed'

color-scheme

Type: string Possible values: 'dark', 'light' Default value: 'light'

Generic Paylink button attributes / initialisation options

solution-id

Type: string Default value: undefined (this is required attribute)

size

Type: string Possible values: 'small', 'medium', 'large' Default value: 'medium'

width

Type: string Possible values: 'fixed', 'dynamic', 'full' Default value: 'fixed'

background-color

Type: string Default value: '#2596be'

label

Type: string Default value: 'Donate'

icon

Type: string Possible values: 'gift', 'heart', 'secure' Default value: 'gift'

border-radius

Type: string 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:

  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:

  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:

  <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):

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