Pay Button

The Payiano Pay Button is a ready-to-use payment plugin that lets you collect payments directly on your website. Customers complete their transaction inside an overlay modal without ever leaving your page, which helps reduce cart abandonment and builds trust with your brand.

The plugin is designed to get you up and running as quickly as possible. Whether you are building a simple landing page or a complex single-page application, you can start accepting payments in minutes with minimal effort.

Key Benefits

  • Fast Integration: Go from zero to a working checkout in minutes. There is no SDK to install, no build step, and no server-side code required for the basic setup.
  • Seamless Checkout Experience: Payments are completed inside an overlay modal on your own page. Customers are never redirected to a third-party site, keeping them on your website throughout the entire payment flow.
  • Secure by Default: All transactions are authenticated with your company's public key. Sensitive payment data is handled entirely by Payiano's PCI-compliant infrastructure and never touches your server.
  • Theme and Locale Support: Choose between light and dark themes and switch the checkout language between English and Arabic with a single attribute or option, so the button fits naturally into any website design.
  • Works Everywhere: The plugin works with any website, whether it is a static HTML page, a WordPress site, a Vue or React app, or anything else that runs in a browser.

Integration Approaches

The Pay Button plugin offers two ways to integrate, depending on how much control you need over the checkout experience.

HTML Element

The simplest approach. Drop a <payiano-pay-button> HTML element into your page and the plugin takes care of everything else. No JavaScript required. This is ideal for static websites, landing pages, or any scenario where you want to add a payment button with zero code.

Programmatic Checkout

For more advanced use cases, the JavaScript SDK exposes the PayianoPayButton class, which lets you open the checkout modal entirely from code. This gives you full control over when and how the checkout is triggered, conditional logic, and event callbacks like onReady and onError. This approach is ideal for single-page applications and dynamic websites.

If you encounter any issues during integration or need further assistance with the provided examples, or have any other inquiries, our team is here to help. Please don't hesitate to contact us . We are committed to ensuring your integration process is smooth and successful.