Usage

Examples

Basic usage

A very simple example.

<Button token="123" countryCode="AU" />

<Button token="123" countryCode="AU" />

Logo

Display text logo, image logo or both.

<Button token="123" countryCode="AU">
  Buy now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" logo="image">
  Buy now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" logo="text">
  Buy now with
</Button>

<Button token="123" countryCode="AU">
  Buy now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" logo="image">
  Buy now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" logo="text">
  Buy now with
</Button>

Theme

Different button styles. white-black is the default style.

<Button token="123" countryCode="AU" theme="white-black">
  Shop now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" theme="mint-black">
  Shop now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" theme="black-mint">
  Shop now with
</Button>

<Button token="123" countryCode="AU" theme="white-black">
  Shop now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" theme="mint-black">
  Shop now with
</Button>
<label> </label>
<Button token="123" countryCode="AU" theme="black-mint">
  Shop now with
</Button>

Clearpay

When the countryCode='GB', the logo will be Clearpay.

<Button token="123" countryCode="GB">
  Shop with
</Button>

<Button token="123" countryCode="GB">
  Shop with
</Button>

API

Property	Description	Type	Default
token	(required) checkout token to be used to complete payment.	string	-
countryCode	(required) country code.	string	-
behavior	method of launching the checkout page.	enum: `popup` \| `redirect`	`popup`
onComplete	callback when transaction is complete. popup mode only.	(event: any) => void	-
logo	determine how to display the logo.	enum: `image` \| `text` \| `all`	`all`
theme	color of button's background and label.	enum: `white-black` \| `black-mint` \| `mint-black`	`white-black`
className	classname of button wrapper.	string	-
style	extra styles.	React.CSSProperties	-

Usage

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Examples

Basic usage

Logo

Theme

Clearpay

API

Examples