Skip to main content

​
Overview

Collect.js is a payment tokenization solution that generates secure payment tokens, eliminating the need to handle raw card data directly. This dramatically reduces your PCI compliance burden while maintaining a seamless checkout experience.
The token-based approach ensures merchants never handle unencrypted payment card data, reducing PCI compliance burdens while maintaining transaction security.

​
Core Benefits

PCI Compliance

Tokenization keeps raw card data off your servers

Flexible Integration

Multiple implementation patterns for different needs

Digital Wallets

Built-in Apple Pay and Google Pay support

Customizable UI

Style the payment form to match your brand

​
Integration Types

Collect.js provides two primary integration methodologies:

​
Implementation Levels

Choose the implementation level that matches your technical requirements:
Basic setup requiring minimal customization, ideal for merchants seeking quick deployment with standard functionality.Complexity: LowSetup Time: MinutesCustomization: LimitedBest for: Quick implementations with standard requirements
Enhanced configuration allowing custom styling and behavioral adjustments while maintaining simplified code structure.Complexity: MediumSetup Time: HoursCustomization: ModerateBest for: Custom branding and specific business logic
Full-featured implementation providing granular control over form behavior, validation, event handling, and integration workflows.Complexity: HighSetup Time: DaysCustomization: CompleteBest for: Complex checkout flows and advanced requirements

​
Payment Token

The payment token is a tokenized version of customer payment information:
The payment token is generated by Collect.js and is usable only once. After processing a transaction, you must generate a new token for subsequent payments.
Once you have the token, submit it to the Payment API: 
payment_token=TOKEN_FROM_COLLECTJS

​
Digital Wallet Support

​
Apple Pay Integration

Collect.js facilitates Apple Pay acceptance, enabling customers to submit payment data through Apple’s trusted payment method within the web environment.
1

Configure Apple Pay

Set up Apple Pay merchant identifier in your gateway account
2

Initialize Collect.js

Load Collect.js with Apple Pay enabled
3

Display Apple Pay Button

Show the Apple Pay button to eligible customers
4

Process Token

Collect.js generates a token when customer completes Apple Pay

​
Google Pay Integration

Similarly, Google Pay functionality allows customers to use Google’s payment system, with Collect.js handling the tokenization process securely.
1

Configure Google Pay

Set up Google Pay merchant credentials
2

Initialize Collect.js

Load Collect.js with Google Pay enabled
3

Display Google Pay Button

Show the Google Pay button to eligible customers
4

Process Token

Collect.js generates a token when customer completes Google Pay

​
Basic Implementation Example

<!DOCTYPE html>
<html>
<head>
    <script src="https://api.ionicfi.com/token/Collect.js"
            data-tokenization-key="YOUR_TOKENIZATION_KEY"
            data-variant="lightbox"></script>
</head>
<body>
    <form>
        <button type="button" id="payButton">Pay Now</button>
    </form>

    <script>
        document.getElementById('payButton').addEventListener('click', function(e) {
            e.preventDefault();
            CollectJS.startPaymentRequest();
        });

        CollectJS.configure({
            'callback': function(token) {
                // Token received, submit to your server
                console.log('Payment token:', token);
                // Add token to form and submit
            }
        });
    </script>
</body>
</html>
A complete React example is available on the Ionic Payment Gateway GitHub repository.

​
Configuration Options

Collect.js supports extensive configuration options:
Customize the appearance of payment fields:
CollectJS.configure({
    'styleSniffer': true,
    'customCss': {
        'color': '#333',
        'font-size': '16px',
        'font-family': 'Arial, sans-serif'
    }
});
Control validation behavior:
CollectJS.configure({
    'validationCallback': function(field, status, message) {
        console.log(field, status, message);
    },
    'fieldsAvailableCallback': function() {
        console.log('Fields ready');
    }
});
Add custom billing fields:
CollectJS.configure({
    'fields': {
        'ccnumber': { /* config */ },
        'ccexp': { /* config */ },
        'cvv': { /* config */ },
        'checkaccount': { /* config */ },
        'checkaba': { /* config */ },
        'checkname': { /* config */ }
    }
});

​
Security Architecture

1

Customer Enters Payment Data

Customer inputs payment information into Collect.js-hosted fields
2

Direct Transmission

Data is transmitted directly from the customer’s browser to the gateway
3

Token Generation

Gateway generates a single-use token and returns it
4

Server Submission

Your server submits the token to complete the transaction
Payment data never touches your server, dramatically reducing PCI compliance requirements.

​
Next Steps

Payment API

Use tokens with the Payment API

Customer Vault

Store tokens for recurring payments

Gateway.js

Add 3D Secure authentication

Testing

Test your integration