# Merchant Integration Overview div h2 Nelnet Payment Services SDK p Secure, PCI-compliant payment processing through iframe-based tokenization ## Integration Architecture div The NPS payment integration uses **JWT authentication** and **secure iframe architecture SDK** to ensure payment data never touches your servers. div h3 🔐 Secure Payment Integration Flow div div div div div 🖥️ div Server-side div div div div div div JWT Auth div div div div div Session Token div div div ☁️ div NPS API div div div div div Session Token div div div div 🌐 div Client-side div div 📦 div NPS SDK div div div div div div div 💳 div Secure Payment Form div Isolated iFrame ### Integration Flow table tr th Step th Action th Details tr td div 1 td strong Create Payment Session br span Server-side → NPS API td div • Make an authenticated request to create a payment session br • Include your JWT Bearer token in the Authorization header br • Receive a session token and session id that's safe for client-side use tr td div 2 td strong Initialize Payment Form br span Client-side td div • Load the NPS JavaScript SDK on your checkout page br • Initialize the SDK with the session token and session id from Step 1 br • The SDK will create a secure payment form in your designated container tr td div 3 td strong Collect Payment Information br span Customer Interaction td div • Customers enter their payment details in the secure form br • All sensitive data is isolated from your application br • Real-time validation provides immediate feedback tr td div 4 td strong Tokenize Payment Data br span Secure Tokenization td div • When the customer submits, their payment data is securely tokenized br • You receive a payment token that represents the payment information br • No sensitive payment data ever touches your servers tr td div 5 td strong Use Token br span Server-side td div • Use the secure payment token as needed br • The token represents the payment information collected br • Process according to your business requirements ## Key Benefits table tr td div h3 Security First ul li span ✓ strong PCI Compliance : Reduce your PCI scope by never handling raw payment data li span ✓ strong Domain Isolation : Payment fields are completely isolated in a secure iframe li span ✓ strong Token-based : Work only with secure tokens, never sensitive card data td div h3 Developer Friendly ul li span ✓ strong Integration : Get started with just a few lines of code li span ✓ strong Multiple Payment Methods : Support for cards, ACH, and apple pay li span ✓ strong Customizable UI : Style the payment form to match your page ## Integration Method div The NPS JavaScript SDK provides secure payment collection through an isolated iframe architecture. ```javascript const nps = new NPS({ sessionToken: 'your_session_token/random_key' sessionId: 'session_id' }); ``` ## Quick Start Steps div div div 1 strong Install SDK ```html ``` div div 2 strong Create Session ```javascript // Server-side: Request session const session = await createPaymentSession(); ``` div div 3 strong Initialize object and Payment Form ```javascript // Client-side const nps = new NPS({ sessionToken: 'your_session_token/random_key' sessionid: 'session_id' }); //Mount secure payment form nps.mount('#payment-container'); ``` div div 4 strong Process Payment ```javascript // Server-side: Use token to process payment const result = await processPayment(token,); ``` ## Supported Payment Methods table tr th Credit & Debit Cards th ACH Bank Transfers th Digital Wallets tr td div • Visa br • Mastercard br • American Express br • Discover br div • Real-time card validation and formatting td div • Routing and account number validation td div • Apple Pay ## Testing Your Integration ### Testing Environments Test your integration across different environments to ensure compatibility ### Test Payment Form Styling div Verify your custom styling renders correctly: ```javascript nps.mount('#payment-container', { styling: { } }); ``` ### Test Different Payment Methods table tr td div h4 Card Testing ```javascript // Test card nps.mount('#payment-container', { paymentMethod: 'card' }); ``` td div h4 ACH Testing ```javascript // Test ACH nps.mount('#payment-container', { paymentMethod: 'ach' }); ``` td div h4 Apple Pay Testing ```javascript // Test Apple Pay nps.mount('#payment-container', { paymentMethod: 'applepay' }); ``` ### Test Cards table tr th Brand th Number th CVV th Expiry tr td Visa td code 4242 4242 4242 4242 td Any 3 digits td Any future date tr td Mastercard td code 5555 5555 5555 4444 td Any 3 digits td Any future date tr td Amex td code 3782 822463 10005 td Any 4 digits td Any future date tr td Visa td code 4000 0000 0000 0002 td Any 3 digits td Any future date tr td Visa td code 4000 0000 0000 9995 td Any 3 digits td Any future date ### Testing Checklist div div h3 Testing Checklist div div Test in all test environments div Verify custom styling appears correctly div Validate form behavior across devices div Test all supported payment methods div Verify error handling and messages div Test tokenization with various card types div Validate real-time formatting for various features div Verify accessibility features ## Next Steps table tr th Documentation th Description tr td a SDK Integration Guide span → td Detailed SDK setup and configuration ## Support Resources div div div h3 Need Help? div div Technical Support a NPSTechSupport@nelnet.net