Pay Button HTML Element
The <payiano-pay-button> is a custom HTML element that renders a fully functional payment button on your webpage. No JavaScript is required. The entire payment flow, from button rendering to checkout modal to payment confirmation, is handled automatically by the Payiano script. Simply copy a few lines of HTML into your page and your customers can pay immediately.
For an overview of all integration approaches, see the Pay Button page. If you need more control over the checkout flow, check out the Programmatic Checkout guide.
Integration Steps
1. Create a Payment Link
Before integrating the Pay Button, create a payment link through the Payiano API. Once generated, you'll use the Payment Link ID in the next steps.
2. Include the Payiano Script
Add the following <script> tag in the <head> section of your HTML or just before the closing </body> tag.
3. Embed the Pay Button
Place the <payiano-pay-button> element wherever you want the button to appear.
Attributes
The following attributes are available on the <payiano-pay-button> element.
public-key required Type: stringYour company's public key, which uniquely identifies your merchant account and authenticates every checkout session. This key is safe to expose in client-side code because it can only be used to create checkout sessions and cannot read or modify account data. You can find and rotate your public key in the Developer section of your Payiano dashboard. |
resource-name required Type: enum Possible values: JSON [
"payment.payment_link",
"payment.checkout"
]
Identifies the type of Payiano resource to collect payment for. This tells the checkout modal which API resource to load so it can display the correct amount, currency, and payment details to the customer. |
resource-id required Type: ulidThe unique identifier of the specific resource instance to pay for. For payment links, this is the ID returned in the API response when you create a payment link. Each checkout should reference the correct resource ID so the modal can load the right payment details and process the transaction successfully. |
button-text Type: stringCustom label displayed on the rendered pay button. Use this to match the button text to your site's language or context, for example "Buy Now", "Subscribe", or "Donate". When omitted, the button defaults to a generic "Pay Now" label. |
button-color Type: enum Default: primary Possible values: JSON [
"primary",
"secondary",
"tertiary"
]
Sets the color scheme of the rendered pay button. Use primary for a bold, dark-navy button that stands out as the main call to action, secondary for a vibrant blue style, or tertiary for a green accent style that blends with lighter designs. |
locale-code Type: string Possible values: JSON [
"ar",
"en"
]
The language code for the checkout interface, including all labels, input placeholders, validation messages, and error text. Choosing the correct locale ensures customers see the checkout in their preferred language, which improves conversion rates. |
theme-mode Type: string Possible values: JSON [
"light",
"dark"
]
Controls the visual appearance of the checkout modal. Use light for light-background sites and dark for dark-background sites to maintain a consistent look and feel with your website's design. |
Interactive Playground
Use the controls below to customise the pay button attributes and see the generated HTML update in real time.