# First Payment

This guide walks through the **complete end-to-end flow** for processing your first payment with Nelnet Payment Services (NPS).

By the end of this guide, you will:

- Authenticate using **Bearer (JWT) authentication**
- Embed the **hosted tokenization iframe**
- Securely collect payment details in the browser
- Receive a **payment token**
- Submit that token to the **Payments API** to process a transaction


> **Important**
All integrations **must use the NPS tokenization iframe** or **embedded Payment Widget**. Sensitive payment details never touch your servers.


## How the Flow Works

div
ol
li
Your backend creates a JWT using your API keys
li
Your backend creates a payment session
li
Your frontend loads the tokenization iframe
li
The browser tokenizes payment details
li
Your backend submits the token to the Payments API
## Prerequisites

Before you begin, make sure you have:

- An NPS **API Key ID** and **API Key**
- A backend service capable of creating JWTs
- A web page where you can embed the tokenization iframe


> Never expose API keys or secrets in client-side code.


## Step 1: Create a JWT for API Authentication (Backend)

All NPS backend APIs use **Bearer authentication** with a short-lived JWT.

### JWT Requirements

- **Algorithm:** HS512
- **Authorization Header:** `Authorization: Bearer <JWT>`
- **Required Claims:**
  - `sub` – API Key ID
  - `iat` – Issued-at timestamp
  - `exp` – Expiration timestamp


### Example: Creating a JWT (Node.js)


```js
import jwt from 'jsonwebtoken';

function createJwt() {
  const payload = {
    sub: process.env.NPS_API_KEY_ID,
    iat: Math.floor(Date.now() / 1000),
    exp: Math.floor(Date.now() / 1000) + 300
  };

  return jwt.sign(payload, process.env.NPS_API_KEY, {
    algorithm: 'HS512'
  });
}
```

## Step 2: Create a Payment Session (Backend)

Before loading the tokenization iframe, your backend must create a **payment session**.

### Example Backend Endpoint


```js
app.post('/create-payment-session', async (req, res) => {
  const jwt = createJwt();

  const response = await fetch('https://api.nelnetpay.com/tokenization/session', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${jwt}`,
      'Content-Type': 'application/json'
    }
  });

  const session = await response.json();

  res.json({
    sessionId: session.id,
    sessionToken: session.token,
    expiresAt: session.expiresAt
  });
});
```

## Step 3: Load the Tokenization SDK (Frontend)


```html
<script src="https://cdn.nelnetpay.com/sdk/v1.0.0/nps.js"></script>
<div id="payment-form"></div>
```

## Step 4: Initialize the Tokenization Iframe (Frontend)


```js
async function initializePayment() {
  const response = await fetch('/create-payment-session', { method: 'POST' });
  const { sessionId, sessionToken } = await response.json();

  const nps = new NPS({
    sessionId,
    sessionToken,
    onReady: () => console.log('Payment form ready'),
    onError: console.error
  });

  nps.mount('#payment-form', { paymentMethod: 'card' });
  return nps;
}
```

## Step 5: Tokenize Payment Details (Frontend)


```js
const result = await nps.tokenize({
  amount: 49.99,
  cardholderName: 'Jane Doe',
  billingAddress: {
    name: 'Jane Doe',
    street: '123 Main St',
    city: 'Omaha',
    state: 'NE',
    postalCode: '68102',
    country: 'US'
  }
});
```

## Fraud, Risk & Validation

During tokenization, NPS automatically performs:

- **Fraud analytics** using transaction context and metadata
- **Bot and abuse detection**
- **Embedded CAPTCHA challenges** (when enabled)


If a merchant is configured for CAPTCHA:

- A user-interactable challenge may be presented **inside the iframe**
- Tokenization cannot complete until the challenge is resolved


## Tokenization Response Details

In addition to the payment token, the tokenization response may include:

### Credit Card Payments

- **BIN information** (card network, issuer metadata)
- **Surcharge calculations**, if enabled for the merchant
- Card brand and funding indicators


These values can be used to:

- Display surcharges before processing
- Adjust final amounts
- Drive merchant/partner checkout logic and UX decisions


## Step 6: Process the Payment (Backend)


```json
{
  "entityId": 1325691045,
  "transactionType": "SALE",
  "amount": 49.99,
  "paymentType": {
    "creditCard": {
      "token": "4NTSIT839d9b1234"
    }
  },
  "accountHolder": {
    "accountHolderName": "Jane Doe",
    "ipAddress": "10.10.10.10"
  }
}
```

### Payments API Endpoint


```
POST https://api.nelnetpay.com/payments
Authorization: Bearer <JWT>
Content-Type: application/json
```