Shabaas Checkout - Webflow Example

📋 Quick Setup Overview

Add the Shabaas checkout script to your Webflow project's Custom Code section
Wrap your checkout form in a container with data-shabaas-checkout attribute
Assign the required field IDs to each form input element
Add a container with class payment-methods for dynamic payment method rendering
Configure script attributes for your business UUID and alert preferences

📚 Required Field IDs

The following field IDs are recognized by the Shabaas checkout script. Each input field in your Webflow form must use these exact IDs for the integration to work properly. Fields marked as "(auto-filled)" are automatically populated by the script when checkout data is available.

Required Fields

id="name"              // Customer full name (auto-filled)
id="email"             // Customer email address (auto-filled)
id="phone_number"      // Customer phone number (required)

// Optional Fields
id="company_name"      // Company name (optional)
id="business_abn"      // Business ABN (auto-filled)
id="ref_no"            // Reference number (auto-filled)
id="amount"            // Payment amount in dollars (auto-filled)
id="description"       // Payment description (auto-filled)

⚠️ Important Notes:

Field IDs are case-sensitive and must match exactly as shown above
Auto-filled fields will be populated when checkout data is passed via URL parameters or script configuration
All required fields (name, email, phone_number) must be present for the checkout to function
Payment methods container (payment-methods class) is required for payment selection UI

🔧 Webflow Implementation Guide

Follow these step-by-step instructions to integrate Shabaas Checkout into your Webflow project.

Step 1: Add Script to Project Settings

Navigate to Project Settings → Custom Code → Footer Code and add the Shabaas checkout script.

<script
  src="https://cdn.shabaas.com/shabaas_checkout.js"
  data-business-uuid="YOUR_BUSINESS_UUID"
  data-show-alert="true"
  async
></script>

// Script Attributes:
// - data-business-uuid: Your unique business identifier (required)
// - data-show-alert: Enable/disable alert notifications (optional, default: "true")
// - async: Loads script asynchronously for better performance

Step 2: Create Checkout Form Container

In Webflow Designer, create a container div that will wrap your entire checkout form. Add the data-shabaas-checkout attribute to this container:

<div data-shabaas-checkout>
  <!-- Your form fields will go inside here -->
  <div class="form-wrapper">
    <!-- Form inputs -->
  </div>
</div>

// How to add in Webflow:
// 1. Select the container div in the Designer
// 2. Go to Element Settings panel → Custom Attributes
// 3. Add attribute: Name = "data-shabaas-checkout", Value = ""

Step 3: Set Field IDs in Webflow Designer

For each form input field, you must assign the corresponding field ID. The script uses these IDs to identify and populate form fields.

Instructions:

Select the input field in the Webflow Designer
Open the Element Settings panel (right sidebar)
Scroll to the Settings section
Find the Element ID field
Enter the appropriate ID (e.g., name, email, phone_number)
Repeat for all required fields listed above

// Example: Setting ID for Name field
<input
  type="text"
  id="name"
  placeholder="Enter your full name"
/>

// Example: Setting ID for Email field
<input
  type="email"
  id="email"
  placeholder="Enter your email"
/>

Step 4: Add Payment Methods Container

Create a container div where payment methods (Bank Transfer, ShabaasPay, Credit Cards) will be dynamically rendered. This container must have the class payment-methods.

<div class="payment-methods">
  <!-- Payment methods will be automatically inserted here by the script -->
  <!-- Options include: Bank Transfer, ShabaasPay, Credit/Debit Cards -->
</div>

// How to add in Webflow:
// 1. Add a Div Block element
// 2. Select the div and go to Element Settings → Classes
// 3. Add class: "payment-methods"
// 4. The script will populate this container with payment options

Step 5: Verify Integration

Testing Checklist:

✓ Script is loaded in the browser console (check Network tab)
✓ Container has data-shabaas-checkout attribute
✓ All form fields have correct IDs assigned
✓ Payment methods container has class payment-methods
✓ Payment methods are visible and interactive
✓ Form submission triggers checkout process

💡 Pro Tips:

Use browser DevTools to inspect elements and verify IDs are correctly set
Check the browser console for any JavaScript errors during integration
Test with different checkout data to ensure auto-fill functionality works
Ensure your business UUID is correctly configured in the script tag
Payment methods are dynamically loaded based on your business configuration

Shabaas Checkout - Webflow Integration

Customer Information

Select Payment Method

📋 Quick Setup Overview

📚 Required Field IDs

🔧 Webflow Implementation Guide