twisto-payment-widget | Twisto Documentation

Checkout widget for payment selection. Shows all available Twisto payment options — Pay in 30 days and Pay in 3 — or a single product when product is specified. Includes a brief explanation of each option and a "Learn more" link.

Step 1: Add this script to the page ⬇️

<script src="https://cdn.twistopay.com/widget/twisto-widget.js" async></script>

Step 2: Insert the widget at checkout where payment methods are listed ⬇️

All products — omit product to show both Pay in 30 days and Pay in 3. Requires amount and currency:

<twisto-payment-widget
  amount="AMOUNT"
  currency="CZK"
  language="en"
></twisto-payment-widget>

Pay in 30 days only — no amount or currency required:

<twisto-payment-widget
  product="pay-in-30-days"
  language="en"
></twisto-payment-widget>

Pay in 3 only — requires amount and currency:

<twisto-payment-widget
  product="pay-in-3"
  amount="AMOUNT"
  currency="CZK"
  language="en"
></twisto-payment-widget>

Always pass the product price to amount.

Reading the selected product

The widget reflects the currently selected product back to the element via the selected-type attribute. This lets you read which payment option the customer chose.

selected-type is set to "standard" when Pay in 30 days is selected, and "pay-in-three" when Pay in 3 is selected.

To read the selected value:

const selected = document.querySelector('twisto-payment-widget').getAttribute('selected-type')
// returns "standard" or "pay-in-three"

Attributes

Attribute	Description	Type	Default value
product	Twisto product. Options: `pay-in-30-days` or `pay-in-3`. Omit to show all products.	String	`null`
amount	Product price. Required when `product="pay-in-3"` or when `product` is omitted.	Number	`null`
currency	Currency of amount. Required with `amount`. For example, `CZK`, `EUR`, `PLN`, etc.	String	`null`
language	Language. Options: `cs`, `en` or `pl`.	String	`en`
theme	Theme. Options: `light` or `dark`.	String	`light`
width	Widget width. Options: `auto` or `full`.	String	`auto`
site	Redirect target. Can be `cz` or `pl`. By default decided by language.	String	`null`
selected-type	Read-only. Reflects the selected product — `"standard"` or `"pay-in-three"`. Set by the widget.	String	`null`

For a full list of available attributes, see How to edit Twisto widgets.

Examples

All products

<twisto-payment-widget amount="2000" currency="CZK" language="en"></twisto-payment-widget>

Pay in 30 days only

<twisto-payment-widget product="pay-in-30-days" language="en"></twisto-payment-widget>

Pay in 3 only

<twisto-payment-widget product="pay-in-3" amount="2000" currency="CZK" language="en"></twisto-payment-widget>