This component uses pnpm, so you need to install it first, if you don't have it yet.
Clone the repo:
git clone git@bitbucket.org:raisenow/paylink-button.git
Install dependencies:
pnpm install
Starts dev server with hot reload.
Build the bundle with specified target mode.
Target modes:
dev
stage
production
Locally preview the build generated with build:dev
command.
Build the app with stage
mode and upload it to the staging AWS S3 bucket.
Makes a new release on npm.
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>
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>
<paylink-button>
<twint-pay-button>
<twint-donate-button>
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)
Type: string
Default value: undefined
(this is required attribute)
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)
Type: string
Possible values: 'small'
, 'medium'
, 'large'
Default value: 'medium'
Type: string
Possible values: 'fixed'
, 'full'
Default value: 'fixed'
Type: string
Possible values: 'dark'
, 'light'
Default value: 'light'
Type: string
Default value: undefined
(this is required attribute)
Type: string
Possible values: 'small'
, 'medium'
, 'large'
Default value: 'medium'
Type: string
Possible values: 'fixed'
, 'dynamic'
, 'full'
Default value: 'fixed'
Type: string
Default value: '#2596be'
Type: string
Default value: 'Donate'
Type: string
Possible values: 'gift'
, 'heart'
, 'secure'
Default value: 'gift'
Type: string
Default value: '8px'
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')
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>