Collect.js Quick Start Guide

Prerequisites

• Active CyoGate merchant account
• Public and Private API Keys — see Get Your API Keys
• HTTPS-served checkout page

Complete Working Example

<form id="checkout-form" method="POST" action="/process">
  <div id="ccnumber"></div>
  <div id="ccexp"></div>
  <div id="cvv"></div>
  <input type="hidden" id="payment-token" name="payment_token">
  <button type="button" onclick="CollectJS.startPaymentRequest()">Pay $29.99</button>
</form>
<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', placeholder: 'Card Number' },
    ccexp:    { selector: '#ccexp',    placeholder: 'MM / YY' },
    cvv:      { selector: '#cvv',      placeholder: 'CVV' },
  },
  callback: function(token) {
    document.getElementById('payment-token').value = token.token;
    document.getElementById('checkout-form').submit();
  },
});
</script>

Server-Side Processing

<?php
$post = array('security_key' => YOUR_PRIVATE_KEY, 'type' => 'sale',
              'amount' => '29.99', 'payment_token' => $_POST['payment_token']);
$ch = curl_init('https://secure.cyogate.net/api/transact.php');
curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($post));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
$response = curl_exec($ch); curl_close($ch);
parse_str($response, $result);
echo $result['response'] == '1' ? 'Approved! TxID: ' . $result['transactionid'] : 'Declined: ' . $result['responsetext'];
?>