# Card & ACH Integration
Accept credit card and ACH payments using the Widget SDK. This guide walks through the full integration from loading the SDK to processing a payment.
## How It Works
The SDK renders a secure payment form on your checkout page. Your customer enters their payment details directly into the payment form — your page never touches sensitive data. When you're ready, call `tokenize()` to exchange those details for a secure token, then send that token to your backend for processing via the Payments API. For complete reference, see [SDK reference](/docs/ui-sdk-reference).
## Step 1 — Load the SDK
Include the Widget script from the NPS CDN. This exposes the `Widget` constructor globally.
```html
```
## Step 2 — Add a container
Add an empty container element where the payment form will be rendered.
```html
```
## Step 3 — Initialize the SDK
Create a `Widget` instance. The session token is provided separately via `updateSessionToken()` before calling `tokenize()`.
```js
const wg = new Widget({
// ...additional options — see UI SDK Reference
onTokenizationComplete: (result) => {
// Forward result.token to your backend
},
onError: (error) => {
}
});
```
## Step 4 — Mount the Payment Form
Call `mount()` to render the payment form. Pass the payment method and any styling or display options.
```js
wg.mount('#payment-form', {
paymentMethod: 'card',
styling: {
theme: 'light',
labelStyle: 'floating',
fieldLayout: 'stacked',
fontFamily: 'Inter',
borderRadius: 4,
colors: {
border: '#C4C8CC',
focusBorder: '#3B82F6'
}
}
});
```
You can switch between card and ACH without remounting the form:
```js
wg.updatePaymentMethod('ach');
wg.updatePaymentMethod('card');
```
## Step 5 — Tokenize
When your customer is ready to pay, set a fresh session token via `updateSessionToken()` and then call `tokenize()` with the payment details. The SDK validates the form and returns a secure token.
**Card Example:**
```js
const sessionToken = await fetchSessionToken(); // your server-side endpoint
wg.updateSessionToken(sessionToken);
const result = await wg.tokenize({
amount: 125.00,
name: 'Jane Smith',
billingAddress: {
addressLine1: '123 Main St',
addressLine2: 'Suite 100', // optional
city: 'Omaha',
country: 'US'
}
});
```
**ACH Example:**
```js
const sessionToken = await fetchSessionToken();
wg.updateSessionToken(sessionToken);
const result = await wg.tokenize({
amount: 50.00,
name: 'Jane Smith',
accountType: 'checking',
billingAddress: {
addressLine1: '456 Oak Ave',
addressLine2: 'Apt 2B', // optional
city: 'Omaha',
postalCode: '68102',
country: 'US'
}
});
```
On success, the result contains a `token` (plus other details). On failure, `onError` is invoked with an error code and message.
## Step 6 — Process the Payment
Send the `token` to your backend. Your server submits it to the [Payments API](https://docs.nelnetpay.com/apis/osi-payments-api/other/processpaymentrequest) to process the payment. The token is the only value required from the SDK.
## Complete Example
```html
Checkout
Checkout
```
## Key Idea
The SDK securely collects payment details in the browser and returns a token. Your backend uses that token to process payments—sensitive data never touches your server.