> ## Documentation Index > Fetch the complete documentation index at: https://docs.mycashq.com/llms.txt > Use this file to discover all available pages before exploring further. # Card Tokenization > Securely tokenize card data using Approvely ## Overview Card tokenization converts sensitive card data into a secure token (nonce) that can be used to process payments. This approach ensures that card data never touches your servers, reducing your PCI compliance requirements. ## How Tokenization Works Customer fills out the tokenization form with their card information Card data is sent directly to Approvely's secure servers, which return a one-time nonce token Your server uses the nonce token to process the payment via the charge endpoint The nonce token is single-use and expires after a short period. It must be used immediately to process a payment. ## Getting Your Tokenization Token Access the [Approvely Control Panel](https://sandbox.approvelygateway.com/control-panel/sources) Copy your **Tokenization Token** (also called API Key) from the Sources page ## Setting Up Tokenization ### Option 1: Using Python Local Server (Quick Test) For quick testing, you can use a local HTML page: Create a file named `approvely_tokenization.html` with the tokenization form (see example below) Open your command line in the folder with the HTML file and run: ```bash theme={null} python -m http.server ``` Or for a specific port: ```bash theme={null} python -m http.server 8080 ``` Navigate to `http://127.0.0.1:8000/approvely_tokenization.html` in your browser ### Option 2: Integrate into Your Application Integrate the tokenization form directly into your application's checkout page. ## HTML Tokenization Form Example This example uses Approvely's Hosted Tokenization, which provides a secure iframe for card data entry: ```html theme={null} Hosted Tokenization Sample
Masked Card #:
Masked CVV2:
Nonce:
``` **Replace the tokenization key:** Change `YOUR_TOKENIZATION_KEY_HERE` to your actual tokenization key from the [Approvely Control Panel](https://sandbox.approvelygateway.com/control-panel/sources). ### How This Works The Approvely tokenization script is loaded from their CDN Create a `HostedTokenization` instance with your public source key The card form is mounted as a secure iframe in the `#iframe-container` div Customer enters card details directly in the secure iframe (never touches your server) When user clicks "Get Token", call `cardForm.getNonceToken()` to get the nonce Send the nonce token to your server to process the charge ### Key Features * **Secure Iframe**: Card data is entered in Approvely's secure iframe, never touching your server * **Real-time Validation**: Card number and CVV are validated as the user types * **Masked Display**: Shows masked card number and CVV for user confirmation * **Event Handling**: Listen to `input` and `change` events for real-time feedback ## Test Card Data Use these test cards in the sandbox environment: ### Successful Transaction | Field | Value | | ------------------- | ------------------------------------- | | **Card Number** | `4111 1111 1111 1111` | | **Cardholder Name** | Any name (e.g., "John Doe") | | **CVV** | Any 3 digits (e.g., "123") | | **Expiry Date** | Any valid future date (e.g., "10/28") | | **Amount** | Any amount (e.g., "5.00") | ### Other Test Cards **Card Number:** `4111 1111 1111 1111` **Result:** Successful transaction **Card Number:** `5555 5555 5555 4444` **Result:** Successful transaction **Card Number:** `3782 822463 10005` **CVV:** 4 digits (e.g., "1234") **Result:** Successful transaction **Card Number:** `4000 0000 0000 0002` **Result:** Card declined ### CVV Numbers by Card Type For testing purposes, use the following CVV numbers based on card type: | Card Type | CVV | | -------------- | ---- | | **Visa** | 999 | | **Mastercard** | 998 | | **Discover** | 996 | | **Amex** | 9997 | | **Diners** | 996 | | **JCB** | 996 | **Testing Amount Limitation:** Most sales under $1.00 will return a decline. Use amounts of $1.00 or higher for successful test transactions. ## Nonce Token Format After successful tokenization, you'll receive a nonce token in this format: ``` nonce-134avdynjq3ey1r8r7gq ``` **Example Response:** ```json theme={null} { "nonce": "nonce-pft4uav4cker5g8bk3db", "card_type": "visa", "last_four": "1111", "expiry_month": "10", "expiry_year": "2028" } ``` ## Using the Nonce Token Once you have the nonce token, immediately send it to your server to process the charge: ```javascript theme={null} // Client-side: Send nonce to your server async function processPayment(nonce, amount, cardholderName) { const response = await fetch('/api/process-payment', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ nonce: nonce, amount: amount, cardholder_name: cardholderName }) }); return await response.json(); } ``` ```javascript theme={null} // Server-side: Use nonce to charge async function chargeCard(nonce, amount, expiryMonth, expiryYear, billingInfo) { const credentials = Buffer.from(`${apiKey}:${pin}`).toString('base64'); const response = await fetch( 'https://api.sandbox.approvelygateway.com/api/v2/transactions/charge', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Authorization': `Basic ${credentials}` }, body: JSON.stringify({ amount: amount, source: nonce, expiry_month: expiryMonth, expiry_year: expiryYear, billing_info: { first_name: billingInfo.first_name, last_name: billingInfo.last_name, street: billingInfo.street, street2: billingInfo.street2, city: billingInfo.city, state: billingInfo.state, zip: billingInfo.zip, country: billingInfo.country, phone: billingInfo.phone } }) } ); return await response.json(); } ``` ## Security Best Practices Never store raw card numbers, CVV, or full expiry dates on your servers Nonce tokens expire quickly. Use them immediately after generation Always serve your tokenization form over HTTPS Validate card data format before sending to tokenization ## Troubleshooting **Possible causes:** * Invalid tokenization token * Incorrect card number format * Network connectivity issues **Solution:** * Verify your tokenization token is correct * Ensure card number contains only digits * Check browser console for error messages **Cause:** Delay between tokenization and charge request **Solution:** * Process the charge immediately after receiving the nonce * Don't store nonces for later use * If expired, re-tokenize the card **Cause:** Tokenization script blocked by browser **Solution:** * Ensure you're using HTTPS * Verify the Approvely script URL is correct * Check browser console for specific CORS errors ## Next Steps Learn how to use the nonce token to process payments