Overview

The Ionic Button Generator offers flexible ways to add payment buttons to your website. Choose between the visual dashboard for quick setup, or code-based implementation for maximum customization and control.

Dashboard Method

Visual button creator - generate ready-to-use code and links instantly

Developer Method

Build with HTML forms and variables - complete flexibility and control

Both methods post to the same endpoint and support the same features. Choose based on your workflow and project requirements.

Key Benefits

Multiple Implementation Options

Choose dashboard generation or code-based implementation

Fully Customizable

Control button appearance, form fields, and payment variables

Quick Integration

Dashboard generates ready-to-use code or links in seconds

Developer-Friendly

Full access to payment variables for custom implementations

When to Use Payment Buttons

Simple Product Sales

Add “Buy Now” buttons for individual products on your website without building a full shopping cart.Example: An online store selling handmade crafts with individual buy buttons for each item.

Donations

Create donation buttons for nonprofits, campaigns, or personal fundraising.Example: A charity website with preset donation amounts (

25,

50, $100) as separate buttons.

Service Payments

Accept payments for services with predefined amounts.Example: A consultant with buttons for different service packages.

Membership & Subscriptions

Create buttons for recurring membership payments.Example: A fitness center with monthly membership payment buttons.

Dashboard Method (No-Code)

Use the visual Button Generator in your merchant dashboard to create payment buttons without writing code.

Dashboard Walkthrough

Follow these steps to create your first payment button:

Access the Button Generator

Log in to your Ionic Merchant Dashboard
Navigate to Tools > Payment Button Generator
Click Create New Button

Configure Payment Settings

Set up your payment details:Basic Settings:

Button Type: Choose from Buy Now, Donate, Subscribe, or Pay Now
Amount: Enter a fixed amount or allow customers to enter their own
Description: What the payment is for (appears on the checkout page)
Product Name: Internal reference name for tracking

Optional Settings:

Currency: USD (default) or other supported currencies
Tax Amount: Add fixed or percentage-based tax
Shipping: Enable shipping cost fields
Quantity: Allow customers to specify quantity

Customize Button Appearance

Make the button match your brand:

Button Text: Customize the text (e.g., “Buy Now”, “Donate”, “Subscribe”)
Button Color: Choose from preset colors or enter a custom hex code
Button Size: Small, Medium, or Large
Button Style: Flat, Rounded, or Pill-shaped
Preview: See real-time preview of your button

Configure Form Fields

Choose which customer information to collect:Customer Information:

Email (required)
Name (optional or required)
Phone (optional or required)
Address (optional or required)

Custom Fields:

Add up to 5 custom fields for additional information
Set each as optional or required

Set Up Redirect URLs

Define where customers go after payment:

Success URL: Where to send customers after successful payment
Cancel URL: Where to send customers if they cancel
Webhook URL (optional): For receiving real-time payment notifications

Enable Security Options

Add extra security layers:

Hash/Checksum: Automatically generated to prevent tampering
3D Secure: Enable for additional fraud protection
AVS Verification: Require address verification
CVV Required: Always require CVV for card payments

Generate Button Code

Click Generate Code to create your button:The dashboard will provide:

HTML code snippet to copy
JavaScript code (if needed)
Direct URL to the payment form
QR code for easy sharing

Test Your Button

Before going live:

Toggle Test Mode in the dashboard
Copy the generated test code
Paste on a test page
Complete a test transaction using test card numbers
Verify the payment flow and redirects work correctly

Deploy to Your Website

Once testing is complete:

Switch to Live Mode in the dashboard
Regenerate the button code (it will now use live credentials)
Copy the live code
Paste into your website’s HTML
Publish your changes

Output Options

The Button Generator provides three ways to add payments to your site:

1. HTML Form Button

The most common option - generates a complete HTML form with a button:

<!-- Copy this code directly from your dashboard -->
<form action="https://api.ionicfi.com/cart/cart.php" method="post">
  <input type="hidden" name="type" value="sale" />
  <input type="hidden" name="key_id" value="your_api_key_here" />
  <input type="hidden" name="amount" value="29.99" />
  <input type="hidden" name="hash" value="generated_hash_value" />
  <input type="hidden" name="redirect" value="https://yoursite.com/success" />

  <button type="submit" class="ionic-payment-button">
    Buy Now - $29.99
  </button>
</form>

To use this code:

Copy the entire code block from your dashboard
Paste it into your website’s HTML where you want the button to appear
No additional configuration needed - it’s ready to use!

2. Link Alternative

For websites that don’t allow HTML forms or have restrictions, the Button Generator also creates a direct payment link:

https://api.ionicfi.com/cart/cart.php?key_id=YOUR_KEY&amount=29.99&hash=GENERATED_HASH

To use this link:

Paste it directly as a link on your website
Add it to emails or invoices
Use it in social media posts
Convert to a QR code

The Link Alternative does not support shopping cart product options or text input (variable amount) fields. For those features, use the HTML form button method.

Important: iFrame Support

Payment buttons are not currently supported via iframes. Always implement buttons directly on your page for the best user experience.

Dashboard Customization Options

The merchant dashboard provides extensive customization for your payment buttons:

Look and Feel

Create custom profiles with your brand colors (text, form fields, headers, background)
Add your logo via direct image link
Include header/footer HTML or CSS stylesheets to match your website design
Make profiles default for all generated buttons

Customer Information Fields

Choose which fields are required, optional, or hidden
Enable/disable Card Security Code (CVV) requirement
Configure custom merchant-defined fields (up to 20)
Control address verification and customer data collection

Payment Methods

Select which payment types to accept (credit card, electronic check)
Configure payment method availability per button

Security Settings

Hash Verification: Enable/disable hash-based security to prevent button tampering
CAPTCHA: Require CAPTCHA entry to prevent bot-based fraud
All security settings managed through dashboard interface

Tax Configuration

Set state-specific tax rates (percentage-based)
Automatic tax calculation based on customer billing state
Applies to shopping cart buttons

Shipping Configuration

Configure threshold-based shipping rates (domestic and international)
Set up percentage markup for specific shipping types (Ground, Express, etc.)
Create tiered shipping rates based on cart total

Convenience Fees/Surcharging

Enable convenience fees or surcharging through Settings
Configure fixed amounts and percentages
Set default surcharge type for all buttons

Developer Method (Code-Based)

Build payment buttons using HTML forms and payment variables for complete flexibility and control.

Code Implementation

Basic Form Structure

Create payment buttons using standard HTML forms that POST to the Ionic endpoint:

<!-- Add your own CSS classes -->
<form action="https://api.ionicfi.com/cart/cart.php" method="post">
  <!-- Hidden fields from dashboard (don't modify these) -->
  <input type="hidden" name="type" value="sale" />
  <input type="hidden" name="key_id" value="your_api_key_here" />
  <input type="hidden" name="amount" value="29.99" />
  <input type="hidden" name="hash" value="generated_hash_value" />

  <!-- Custom styled button -->
  <button type="submit" class="btn btn-primary btn-lg">
    Purchase Now
  </button>
</form>

<style>
  .btn-primary {
    background-color: #EC4899;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
  }
  .btn-primary:hover {
    background-color: #DB2777;
  }
</style>

Multiple Buttons on One Page

Create different buttons for different products or amounts:

<!-- Product 1: Basic Plan -->
<form action="https://api.ionicfi.com/cart/cart.php" method="post">
  <input type="hidden" name="key_id" value="your_api_key_here" />
  <input type="hidden" name="amount" value="9.99" />
  <input type="hidden" name="hash" value="hash_for_basic" />
  <input type="hidden" name="orderid" value="basic-plan" />
  <button type="submit">Basic Plan - $9.99/mo</button>
</form>

<!-- Product 2: Pro Plan -->
<form action="https://api.ionicfi.com/cart/cart.php" method="post">
  <input type="hidden" name="key_id" value="your_api_key_here" />
  <input type="hidden" name="amount" value="29.99" />
  <input type="hidden" name="hash" value="hash_for_pro" />
  <input type="hidden" name="orderid" value="pro-plan" />
  <button type="submit">Pro Plan - $29.99/mo</button>
</form>

<!-- Product 3: Enterprise Plan -->
<form action="https://api.ionicfi.com/cart/cart.php" method="post">
  <input type="hidden" name="key_id" value="your_api_key_here" />
  <input type="hidden" name="amount" value="99.99" />
  <input type="hidden" name="hash" value="hash_for_enterprise" />
  <input type="hidden" name="orderid" value="enterprise-plan" />
  <button type="submit">Enterprise Plan - $99.99/mo</button>
</form>

Each button needs its own unique hash value. Generate these through the dashboard for each product/amount combination.

Dynamic Amount Buttons

Allow customers to enter their own amount (useful for donations):

<form action="https://api.ionicfi.com/cart/cart.php" method="post">
  <input type="hidden" name="key_id" value="your_api_key_here" />
  <input type="hidden" name="hash" value="generated_hash" />

  <label for="amount">Donation Amount:</label>
  <input type="number" name="amount" id="amount" min="5" step="0.01" placeholder="25.00" />

  <button type="submit">Donate Now</button>
</form>

Advanced Configuration

Hash/Checksum Security

The dashboard automatically generates hash values to prevent payment tampering. Here’s how it works: What the dashboard does automatically:

Generates a secure hash based on your secret key and payment details
Includes the hash as a hidden field in the button code
Validates the hash on the server side to prevent tampering

For developers who need programmatic hashing:

<?php
// Example: Generate hash for amount validation
$secret_key = 'your_secret_key';
$amount = '29.99';
$orderid = 'ORDER123';

$hash = md5($secret_key . $amount . $orderid);
?>

<input type="hidden" name="hash" value="<?php echo $hash; ?>" />

Finish Methods

Control what happens after payment:

Method	Description	Use Case
`redirect`	Redirect to success/cancel URL	Standard e-commerce flow
`redirect_receipt`	Show receipt then redirect	Provide payment confirmation
`email_receipt`	Email receipt to customer	Automated record keeping
`display_response`	Show payment response on page	Simple confirmation

Configure finish methods in the dashboard under Button Settings > Response Handling.

Button Customization Examples

Styled Buy Button

<form action="https://api.ionicfi.com/cart/cart.php" method="post" style="margin: 20px 0;">
  <!-- Hidden fields from dashboard -->
  <input type="hidden" name="key_id" value="your_key" />
  <input type="hidden" name="amount" value="49.99" />
  <input type="hidden" name="hash" value="your_hash" />

  <button type="submit" style="
    background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
    color: white;
    padding: 16px 32px;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
  " onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 12px rgba(0,0,0,0.15)';"
     onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 6px rgba(0,0,0,0.1)';">
    Buy Now - $49.99
  </button>
</form>

Donation Buttons with Preset Amounts

<div style="display: flex; gap: 10px; flex-wrap: wrap;">
  <!-- $25 Donation -->
  <form action="https://api.ionicfi.com/cart/cart.php" method="post">
    <input type="hidden" name="key_id" value="your_key" />
    <input type="hidden" name="amount" value="25.00" />
    <input type="hidden" name="hash" value="hash_for_25" />
    <button type="submit" class="donation-btn">$25</button>
  </form>

  <!-- $50 Donation -->
  <form action="https://api.ionicfi.com/cart/cart.php" method="post">
    <input type="hidden" name="key_id" value="your_key" />
    <input type="hidden" name="amount" value="50.00" />
    <input type="hidden" name="hash" value="hash_for_50" />
    <button type="submit" class="donation-btn">$50</button>
  </form>

  <!-- $100 Donation -->
  <form action="https://api.ionicfi.com/cart/cart.php" method="post">
    <input type="hidden" name="key_id" value="your_key" />
    <input type="hidden" name="amount" value="100.00" />
    <input type="hidden" name="hash" value="hash_for_100" />
    <button type="submit" class="donation-btn">$100</button>
  </form>
</div>

<style>
  .donation-btn {
    padding: 12px 24px;
    background: #EC4899;
    color: white;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  .donation-btn:hover {
    background: white;
    color: #EC4899;
    border-color: #EC4899;
  }
</style>

Response Variables

Payment buttons return response data to your finish URL (redirect URL) using a query string that can be read via GET parameters.

Available Response Variables

When a transaction completes, these variables are passed back to your finish URL:

Variable	Description
`type`	Transaction type (sale, auth, etc.)
`response`	Response code (1=approved, 2=declined, 3=error)
`responsetext`	Human-readable response message
`authcode`	Authorization code for approved transactions
`transactionid`	Unique gateway transaction ID
`orderid`	Your order identifier
`amount`	Transaction amount
`avsresponse`	Address Verification System response code
`cvvresponse`	CVV verification response code
`first_name`	Customer first name
`last_name`	Customer last name
`company`	Company name (if provided)
`address_1`	Billing address line 1
`address_2`	Billing address line 2
`city`	Billing city
`state`	Billing state
`country`	Billing country
`postal_code`	Billing ZIP/postal code
`phone`	Customer phone number
`email`	Customer email address
`ip_address`	Customer IP address
`key_id`	Your API key ID
`action`	Action performed
`product_sku_#`	Product SKU (numbered for multiple products)
`product_description_#`	Product description
`product_amount_#`	Product amount
`product_shipping_#`	Product shipping cost
`url_continue`	Continue URL
`url_cancel`	Cancel URL
`url_finish`	Finish URL
`customer_receipt`	Customer receipt setting
`hash`	Security hash value
`referrer_url`	Referring page URL
`merchant_defined_field_#`	Custom merchant-defined fields (up to 20)

Example Response Handling

<?php
// Read response variables from query string
$response = $_GET['response']; // 1=approved, 2=declined, 3=error
$responsetext = $_GET['responsetext'];
$authcode = $_GET['authcode'];
$transactionid = $_GET['transactionid'];
$amount = $_GET['amount'];
$orderid = $_GET['orderid'];

if ($response == '1') {
    // Transaction approved
    echo "Payment successful!<br>";
    echo "Transaction ID: " . htmlspecialchars($transactionid) . "<br>";
    echo "Amount: $" . htmlspecialchars($amount) . "<br>";
    echo "Auth Code: " . htmlspecialchars($authcode);

    // Update your database, send confirmation email, etc.
} else {
    // Transaction declined or error
    echo "Payment failed: " . htmlspecialchars($responsetext);
}
?>

Response Codes

1 = Transaction Approved
2 = Transaction Declined
3 = Error in transaction data or processing

See the Response Codes documentation for complete details on AVS and CVV response codes.

Testing Payment Buttons

Always test your buttons before accepting real payments:

Enable Test Mode

In your dashboard, toggle Test Mode to ON

Generate Test Button

Create your button while in test mode - it will use test credentials automatically

Test Transactions

Use the demo account for testing:Test Credentials:

key_id: 3785894
username: demo

Test Card Numbers:

Card Type	Number
Visa	4111111111111111
MasterCard	5431111111111111
Discover	6011000991300009
American Express	341111111111111

Other Test Data:

Expiration: 10/25
CVV: 999 (for CVV match)
Address: 888 with ZIP 77777 (for AVS match)

Trigger specific responses:

Amount < $1.00 = Declined
Invalid card number = Fatal error

Verify Response Handling

Test the success and cancel redirects to ensure they work correctly

Check Dashboard

Verify test transactions appear in your dashboard’s transaction list

Switch to Live

Once testing is complete, disable test mode and regenerate your button with live credentials

Tracking Payments

All payments made through your buttons are tracked in your merchant dashboard:

Real-Time Dashboard

Monitor payments as they happen in the Transactions section

Email Notifications

Get instant email alerts for successful payments

Transaction Details

View customer info, amount, payment method, and status

Export & Reports

Download transaction reports for accounting and analysis

Using Webhooks for Real-Time Updates

For automated payment processing, set up webhooks in your dashboard:

Go to Settings > Webhooks
Enter your webhook URL
Select events to monitor (payment success, failure, refund, etc.)
Save and test the webhook

See the Webhooks documentation for implementation details.

When to Use Payment Buttons vs. Other Integration Methods

Use Payment Buttons When...

You need a quick, no-code solution
Selling individual products with fixed prices
Adding payments to existing websites
You don’t have developer resources
Simple payment flows are sufficient

Use Other Methods When...

You need custom checkout UX
Building a full shopping cart
Collecting card data on your site
Implementing complex business logic
Requiring advanced fraud detection

Alternative Integration Methods

Collect.js - For Custom Checkout Pages

Use Collect.js when you want full control over the checkout experience but need secure tokenization.Best for: Custom checkout pages, shopping carts, subscription management

Collect Checkout - For Hosted Checkout

Use Collect Checkout for a fully hosted checkout that can be customized programmatically.Best for: E-commerce sites, complex checkout flows, developer-friendly implementations

Payment API - For Full Control

Use the Payment API for direct server-to-server integration with complete control.Best for: Custom integrations, mobile apps, advanced payment processing

Troubleshooting

Button doesn't appear on my website

Possible causes:

HTML code not pasted correctly
JavaScript conflicts on the page
CSS hiding the button

Solution: Check browser console for errors, verify the form code is complete

Payment fails with 'Invalid hash' error

Cause: The hash value doesn’t match the payment detailsSolution: Regenerate the button through the dashboard - don’t edit amount or other fields without updating the hash

Redirects not working after payment

Cause: Incorrect or missing redirect URLsSolution: Edit your button in the dashboard and ensure success/cancel URLs are correct and accessible

Test transactions not appearing in dashboard

Cause: Test mode might not be enabledSolution: Verify test mode is ON in dashboard settings when testing

Security Best Practices

Always Use Hash Validation

Never deploy buttons without hash/checksum protection - this prevents amount tampering

Use HTTPS

Ensure your website uses HTTPS to protect customer data in transit

Validate Redirects

Test success and cancel URLs to ensure customers land on the correct pages

Monitor Transactions

Regularly review your transaction dashboard for suspicious activity

Next Steps

Create Your First Button

Set Up Webhooks

Receive real-time notifications for payment events

Testing Guide

Learn about test cards and amounts

Response Codes

Understand payment response codes

Getting Started

Integration Methods

Partners

API Reference

Documentation Index

​Overview