Hosted Checkout

Collect Checkout is the no code checkout solution

Introduction

Our hosted checkout page is designed to seamlessly integrate into various web-based payment workflows. Our checkout page operates entirely on our secure servers, guaranteeing that your environment remains free from any handling of payment data.

Customer Experience Flow

Our hosted checkout provides a streamlined payment experience:

  1. Click to Pay: Customers interact with your payment trigger
  2. Secure Redirect: Automatic navigation to our hosted checkout page
  3. Clear Product Display: Organized product list with total amount due
  4. Simple Payment Form: Intuitive form for payment details
  5. Return to Your Site: Seamless redirect back with transaction confirmation
Image describing Hosted Checkout workflow

Video Tutorial

Quick Start Guide

1. Basic Setup

Add this JavaScript snippet to your webpage:

// Basic hosted checkout integration
<script>
function openCheckout() {
    // Your checkout initialization code here
    window.open('https://your-checkout-url', '_blank');
}
</script>

2. Create Payment Trigger

Add a button or link to trigger the checkout:

<button onclick="openCheckout()" class="pay-button">
    Pay Now
</button>

3. Handle Return Flow

Set up your success page to handle returning customers:

// Handle successful payment return
if (window.location.search.includes('payment=success')) {
    showSuccessMessage();
}

Hosted Checkout vs. Payment Component

Choose the right solution for your needs:

Best for: Quick implementation and faster time to market

Pros:

  • Minimal development effort required
  • Built-in error handling and receipt display
  • Automatic security and compliance
  • Pre-built user interface

Cons:

  • Limited customization options
  • Less control over user experience
  • Redirect-based flow

💡 Decision Guide

Choose Hosted Checkout if you want to launch quickly with minimal development effort. Choose Payment Component if you need complete control over the checkout experience.