Get started with Payiano Pay Button Plugin
The Payiano Pay Button Plugin simplifies the process of collecting payments online, making it easy for merchants to integrate a payment button on their website. This plugin allows customers to complete their payments seamlessly with minimal effort required from the merchant's development team. With just a few lines of code, you can implement Payiano's secure and reliable payment system into your website.
Key Features
- Easy Integration: Just embed the payment button with a simple HTML tag.
- Seamless Payment Process: The Payiano button handles the entire payment flow without redirecting users to a third-party platform.
- Secure Transactions: All payments are processed using your company's unique public key, ensuring secure identification.
- No Code Skills Required: After creating a payment link, the integration is straightforward and requires no additional development work beyond copying and pasting a few lines of code.
Integration Steps
1. Create a Payment Link
Before integrating the Pay Button, the first step is to create a payment link through the Payiano API. This payment link acts as a unique identifier for the specific transaction or product. Merchants should generate this link for each pay button. Once the payment link is generated, you’ll use the Payment Link ID in the next steps.
2. Include the Payiano Pay Button JavaScript File
To enable the Pay Button functionality on your site, you need to load the Payiano JavaScript library. Add the following <script> tag in the <head> section of your HTML or just before the closing </body> tag. This JavaScript file contains all the logic required to render the Payiano Pay Button on your webpage and process payments securely.
3. Embed the Payiano Pay Button Element
Next, embed the custom HTML element <payiano-pay-button> within your webpage. This element will render the actual payment button, which is interactive and fully functional once the customer clicks it. The basic structure of the Pay Button element is as follows:
Explanation of Attributes:
- resource-id: This is the unique ID that was generated when you created the payment link. It identifies the specific payment request.
- resource-name: This identifies the target resource name, for payment links you can use
payment_link. - public-key: This is your company’s public key . It’s used by Payiano to verify and authenticate the payment transaction, ensuring that the payment is processed securely under your merchant account.
Example
Below is a full HTML example that shows how to integrate the Pay Button into a webpage. In this example, we assume the merchant has already created a payment link with the ID 01hqjmrh1hjg315bhnytk0k7ne and has a public key pk_sandbox_company_egzaW5M3iJkl24CKhHiiwTQoRpUuWJEz.