Payment Link Management Tool

⚠️ Important: Credential Security Notice

This sample project is intended for use with CERTIFICATION (TESTING) CREDENTIALS ONLY.

The current implementation stores API credentials locally in the browser. This approach is acceptable only when using certification/test credentials and should NEVER be used with production credentials.

For any production implementation, credentials must be retrieved and managed server-side — they should never be stored in the browser.

A web-based management interface for creating and managing Datacap payment links. This single-page HTML application provides a complete solution for merchants to create, manage, and track payment links.

Features

• Create Payment Links: Generate payment links with customizable amounts, descriptions, and branding
• Manage Existing Links: View, edit, cancel, and mark payment links as paid
• Search & Filter: Search by invoice number, email, or phone number with advanced date filtering
• Templates: Save and reuse payment link configurations
• Multiple Payment Types: Support for Credit/Debit, ACH, and Gift card payments
• Communication Methods: Send payment links via Email or SMS
• Customizable Branding: Full color scheme customization for light and dark modes
• Recurring Payments: Configure recurring payment options
• Real-time Calculations: Automatic calculation of totals including tax, fees, and surcharges

Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• Datacap PayLink API credentials (Merchant ID and API Key)
• For SMS functionality: Twilio API credentials

Installation

Due to browser CORS (Cross-Origin Resource Sharing) restrictions, this tool cannot make API calls when opened directly from the filesystem. You have two options:

Option 1: Host on a Web Server (Recommended)

Deploy the HTML file to any web server or static hosting service. This can be a cloud hosting provider, your own web server, or a local development server.

Option 2: Launch Chrome with CORS Disabled (Development Only)

⚠️ Warning: This disables important security features. Only use for development/testing, and close this browser instance when done.

Windows:

# Close all Chrome instances first, then run:
"C:\Program Files\Google\Chrome\Application\chrome.exe" --disable-web-security --disable-gpu --user-data-dir="%TEMP%\chrome_dev"

macOS:

# Close all Chrome instances first, then run:
open -na "Google Chrome" --args --disable-web-security --disable-gpu --user-data-dir="/tmp/chrome_dev"

Linux:

# Close all Chrome instances first, then run:
google-chrome --disable-web-security --disable-gpu --user-data-dir="/tmp/chrome_dev"

Then open the HTML file directly in this browser instance.

Configuration

1. Open the tool using one of the methods above
2. Navigate to the Settings tab
3. Enter your credentials:
   • Merchant ID: Your Datacap merchant identifier
   • API Key: Your PayLink API key
4. Select your environment (Certification or Production)
5. Click Test Connection to verify your credentials
6. Optionally check "Save credentials to browser storage" to persist settings

API Environments

Environment	URL
Certification	https://paylink-cert.dcap.com/api/v1/
Production	https://paylink.dcap.com/api/v1/

Authentication

The tool uses Basic Authentication with:

• Username: Your Merchant ID
• Password: Your API Key

Twilio Integration (Optional)

For SMS communication, configure the following in the Settings tab:

• Twilio Account SID
• Twilio API Key
• Twilio API Secret
• Twilio From Phone Number

Usage

Creating a Payment Link

1. Go to the Create Link tab
2. Fill in the required fields:
   • Amount: Total payment amount
   • Invoice Number: Unique identifier for the transaction
   • Merchant Name: Your business name (displayed on payment page)
3. Configure at least one Payment Type with a valid Merchant ID
4. Optionally add:
   • Line items with descriptions
   • Communication methods (Email/SMS)
   • Custom branding colors
   • Tip configuration
   • Recurring payment settings
5. Click Create Payment Link

Managing Payment Links

1. Go to the Manage Links tab
2. Use the search bar to find links by:
   • Invoice number
   • Email address
   • Phone number
3. Use Advanced Filters for:
   • Status filtering (Open, Paid, Cancelled)
   • Date range filtering
4. Available actions for each link:
   • Copy URL to clipboard
   • Open payment page
   • Edit (Open links only)
   • Mark as Paid
   • Cancel

Using Templates

1. Configure a payment link with your desired settings
2. Click Save as Template
3. Access saved templates in the Templates tab
4. Load templates to quickly create similar payment links
5. Export/Import templates for backup or sharing

File Structure

paylink-management-tool/
├── paymentlink-management-tool.html    # Main application file
├── README.md                       # This documentation
├── LICENSE                         # MIT License
└── .gitignore                      # Git ignore file

Security Considerations

Sample Project Security — Certification Use Only

This tool is designed as a sample/demo application to help partners understand and integrate with the PayLink API. It is built for use in a certification (testing) environment where compromised credentials carry no financial risk.

The current implementation includes client-side encryption of credentials (AES-256-GCM in browser localStorage), which provides a basic layer of obfuscation. However, this is not a substitute for proper server-side credential management and does not provide adequate protection for production API keys.

What client-side storage protects against:

• Casual viewing of browser storage
• Simple scraping tools
• Credentials being immediately visible in DevTools

What client-side storage does NOT protect against:

• Malicious JavaScript running on the same page (XSS attacks)
• Someone with full access to the browser or computer
• The encryption key is stored alongside the encrypted data in localStorage

🚨 Production Deployment: Server-Side Credentials Required

For any production deployment, you MUST move credential handling to a backend server. Production API credentials should never be stored in or transmitted to the browser.

The recommended architecture for production:

Browser (UI only) → Your Backend Server (credentials stored here) → PayLink API

Why this is required for production:

• Browser storage is inherently insecure for sensitive credentials
• Client-side code can be inspected, modified, or exploited
• Production credentials grant access to real financial transactions
• Regulatory and PCI compliance requirements demand server-side credential management

Implementation approach:

• Create a backend API (Node.js, .NET, Python, etc.) that acts as a proxy
• Store production credentials securely on the server using environment variables or a secrets manager (e.g., AWS Secrets Manager, Azure Key Vault, HashiCorp Vault)
• The frontend calls your backend — your backend authenticates with the PayLink API on behalf of the user
• Implement user authentication and authorization to control who can create and manage payment links

Additional Production Security Recommendations

1. HTTPS Only

Always deploy behind HTTPS in production. Never transmit credentials or payment data over unencrypted connections.

2. Access Controls

• Implement user authentication before allowing access to the tool
• Use role-based access control (RBAC) for different permission levels
• Log all payment link creation and management actions

3. Content Security Policy (CSP)

Add CSP headers to prevent XSS attacks:

Content-Security-Policy: default-src 'self'; script-src 'self' cdn.jsdelivr.net; style-src 'self' cdn.jsdelivr.net;

4. API Key Rotation

• Rotate API keys periodically
• Use separate API keys for certification vs. production
• Revoke compromised keys immediately

Additional Security Notes

• API Keys: Never commit API keys to version control
• Twilio Secrets: Twilio credentials are sent with payment requests for SMS functionality — ensure your deployment is secure
• Browser Storage: If users uncheck "Save credentials locally", no credentials are persisted. Even so, this does not make the tool suitable for production credentials — use server-side storage instead

Browser Support

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Dependencies

This tool uses the following CDN-hosted libraries:

• Bootstrap 5.3.0 - UI framework
• Bootstrap Icons 1.10.0 - Icon library

No build process or npm installation required.

API Documentation

For detailed PayLink API documentation, contact Datacap Systems or visit the DSI Developer Portal.

Support

For technical support:

• Contact Datacap Systems support team
• Visit https://dsidevportal.com/

License

This project is licensed under the MIT License - see the LICENSE file for details.

Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Changelog

Version 1.0.0

• Initial release
• Create, edit, and manage payment links
• Template system
• Search by invoice, email, or phone number
• Advanced filtering options
• Full branding customization