NPS SDK Reference

Copy

• Copy for LLM

  Copy page as Markdown for LLMs
• View as Markdown

  Open this page as Markdown
• Open in ChatGPT

  Get insights from ChatGPT
• Open in Claude

  Get insights from Claude
• Connect to Cursor

  Install MCP server on Cursor
• Connect to VS Code

  Install MCP server on VS Code

const nps = new NPS({
    sessionToken: 'your_session_token',
    sessionId: 'your_session_id',
    onReady: () => console.log('SDK ready'),
    onTokenizationComplete: (result) => console.log('Token:', result.token),
    onError: (error) => console.error('Error:', error)
});

nps.mount('#payment-form', {
    paymentMethod: 'card',
    displayOptions: { showLabels: true },
    styling: { theme: 'light' }
});

// Switch to ACH
nps.updatePaymentMethod('ach');

// Switch to card
nps.updatePaymentMethod('card');

// Switch to Apple Pay
nps.updatePaymentMethod('applepay');

const result = await nps.tokenize({
    amount: 49.99,
    cardholderName: 'John Doe',
    billingAddress: {
        name: 'John Doe',
        street: '123 Main St',
        city: 'Anytown',
        state: 'CA',
        postalCode: '90210',
        country: 'US'
    },
    metadata: {
    }
});

console.log(result.token); // Payment token

nps.destroy();

nps.mount('#payment-form', {
    paymentMethod: 'card',
    width: '100%',
    displayOptions: {
        showLabels: true,
        showIcons: true,
        showErrors: true
    },
    styling: {
        theme: 'light',
        colors: { focusBorder: '#3B82F6' }
    }
});

displayOptions: {
    showLabels: true,
    showIcons: true,
    showErrors: true,
    showPlaceholders: true,
    showRequiredIndicator: true,
    showSecurityCodeIndicator: true
}

styling: {
    theme: 'light',
    labelStyle: 'stacked',
    fieldStyle: 'outlined',
    fieldLayout: 'stacked',
    fontFamily: 'Inter, sans-serif',
    fontSize: 15,
    labelFontSize: 14,
    labelFontWeight: 500,
    helpTextFontSize: 14,
    helpTextFontWeight: 400,
    colors: {
        label: '#5A5E66',
        border: '#C4C8CC',
        focusBorder: '#3B82F6',
        error: '#D32F2F',
        text: '#000000',
        background: '#FFFFFF',
        helpText: '#9CA3AF',
        filledBackground: '#F3F4F6'
    },
    spacing: 12,
    borderRadius: 4,
    borderWidth: 1,
    inputHeight: 36,
    inputPadding: '10px 12px',
    iframeWidth: '100%',
    focusShadow: '0 0 0 3px rgba(59, 130, 246, 0.1)'
}

const result = await nps.tokenize({
    amount: 49.99,
    cardholderName: 'John Doe',
    billingAddress: {
        name: 'John Doe',
        street: '123 Main St',
        city: 'Anytown',
        state: 'CA',
        postalCode: '90210',
        country: 'US'
    },
    metadata: {
    }
});

const nps = new NPS({
    sessionToken: 'token',
    sessionId: 'session_123',
    onReady: () => {
        console.log('SDK is ready!');
        // Enable submit button, show form, etc.
    }
});

const nps = new NPS({
    sessionToken: 'token',
    sessionId: 'session_123',
    onTokenizationComplete: (result) => {
        console.log('Token:', result.token);
        
        // Send token to your backend
        fetch('/api/process-payment', {
            method: 'POST',
            body: JSON.stringify({ token: result.token })
        });
    }
});

const nps = new NPS({
    sessionToken: 'token',
    sessionId: 'session_123',
    onError: (error) => {
        console.error('Error code:', error.code);
        console.error('Error message:', error.message);
        
        switch(error.code) {
            case 'VALIDATION_ERROR':
                // Show validation errors to user
                break;
            case 'SESSION_EXPIRED':
                // Refresh session token
                break;
            case 'NETWORK_ERROR':
                // Retry request
                break;
        }
    }
});

{
    code: 'VALIDATION_ERROR',
    message: 'Invalid card number',
    fields: {
        cardNumber: 'Invalid card number'
    }
}

// Mount with card payment
nps.mount('#payment-form', { paymentMethod: 'card' });

// Switch to ACH
nps.updatePaymentMethod('ach');

// Switch to Apple Pay
nps.updatePaymentMethod('applepay');

window.addEventListener('nps-mount', (event) => {
    const { containerSelector, options } = event.detail;
    // Mount will be called automatically
});

window.dispatchEvent(new CustomEvent('nps-mount', {
    detail: {
        containerSelector: '#payment-form',
        options: { paymentMethod: 'card' }
    }
}));

window.addEventListener('nps-update-payment-method', (event) => {
    const { method } = event.detail;
    // Update will be called automatically
});

window.dispatchEvent(new CustomEvent('nps-update-payment-method', {
    detail: { method: 'ach' }
}));

window.addEventListener('nps-tokenization-complete', (event) => {
    const result = event.detail;
    console.log('Token:', result.token);
});

window.addEventListener('nps-tokenization-error', (event) => {
    const error = event.detail;
    console.error('Error:', error);
});

window.dispatchEvent(new CustomEvent('nps-tokenize', {
    detail: {
        additionalData: {
            amount: 49.99,
            cardholderName: 'John Doe',
            billingAddress: { /* ... */ }
        }
    }
}));

// 1. Initialize SDK
const nps = new NPS({
    sessionToken: await fetchSessionToken(),
    sessionId: 'session_123',
    onReady: () => console.log('Ready'),
    onTokenizationComplete: (result) => {
        console.log('Token:', result.token);
        // Send to backend
    },
    onError: (error) => console.error('Error:', error)
});

// 2. Mount payment form
nps.mount('#payment-form', {
    paymentMethod: 'card',
    width: '100%',
    displayOptions: {
        showLabels: true,
        showIcons: true,
        showErrors: true,
        showPlaceholders: true,
        showRequiredIndicator: true,
        showSecurityCodeIndicator: true
    },
    styling: {
        theme: 'light',
        labelStyle: 'stacked',
        fieldStyle: 'outlined',
        fieldLayout: 'stacked',
        fontFamily: 'Inter, sans-serif',
        fontSize: 15,
        labelFontSize: 14,
        labelFontWeight: 500,
        colors: {
            label: '#5A5E66',
            border: '#C4C8CC',
            focusBorder: '#3B82F6',
            error: '#D32F2F',
            text: '#000000',
            helpText: '#9CA3AF'
        },
        spacing: 12,
        borderRadius: 4,
        borderWidth: 1,
        inputHeight: 36,
        iframeWidth: '100%'
    }
});

// 3. Switch payment method
nps.updatePaymentMethod('ach');

// 4. Tokenize payment
const result = await nps.tokenize({
    amount: 49.99,
    cardholderName: 'John Doe',
    billingAddress: {
        name: 'John Doe',
        street: '123 Main St',
        city: 'Anytown',
        state: 'CA',
        postalCode: '90210',
        country: 'US'
    },
    accountType: 'checking', // Required for ACH
    metadata: {
    }
});

// 5. Clean up
nps.destroy();