Embed in Your Solution

The CyoGate Payment Component is a pre-built, fully customizable payment form that embeds directly in your website. Customers never leave your site — the form appears inline via secure iframes.

How It Works

1. Include the Collect.js script with your Public API Key
2. Define container elements for each payment field
3. Initialize with your configuration
4. The component renders secure iframe-based payment fields
5. On submit, the component tokenizes the card and returns a token to your callback
6. Your server uses the token + Private Key to process the payment

Benefits

• Zero card data on your servers (SAQ A eligible)
• Full visual customization via the Appearance API
• Built-in real-time validation and card type detection
• Apple Pay and Google Pay with minimal configuration
• Responsive design out of the box

Quick Example

<div id="ccnumber"></div>
<div id="ccexp"></div>
<div id="cvv"></div>
<input type="hidden" id="payment-token" name="payment_token">
<button id="pay-button">Pay $29.99</button>

<script src="https://secure.cyogate.net/token/Collect.js"
        data-tokenization-key="YOUR_PUBLIC_KEY"></script>
<script>
CollectJS.configure({
  variant: 'inline',
  fields: {
    ccnumber: { selector: '#ccnumber' },
    ccexp:    { selector: '#ccexp' },
    cvv:      { selector: '#cvv' },
  },
  callback: function(token) {
    document.getElementById('payment-token').value = token.token;
    document.getElementById('checkout-form').submit();
  }
});
document.getElementById('pay-button').onclick = function() {
  CollectJS.startPaymentRequest();
};
</script>

Implementation Guides

• Integrating the Frontend Component
• Customize Styling
• Implement Backend
• Test and Deploy
• Surcharging with Card Type Detection