> For the complete documentation index, see [llms.txt](https://docs.verifone.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.verifone.com/online-payments/api-integration/card-encryption-verifone.js.md).

# Card encryption - verifone.js

The verifone.js library is a quick and secure way to collect sensitive credit card data. This allows users full control over the checkout experience while maintaining a minimum SAQ A-EP level. The user receives an encrypted card block, which can be used to process a payment.

## Availability <a href="#availability" id="availability"></a>

verifone.js is available for all Verifone merchants who use the Payments API of Verifone or process their payments using an external party.

## Prerequisites

If you intend to use Server-to-Server integrations, you also need:

* [Secure card capture key block](/online-payments/api-integration-methods-auth-and-endpoints/secure-card-capture-key.md)
* [Secure card capture key alias](/online-payments/api-integration-methods-auth-and-endpoints/secure-card-capture-key.md)

## Benefits <a href="#benefits" id="benefits"></a>

The verifone.js solution offers:

* Full ownership over merchant payment flow
* Reduced complexity for PCI DSS compliance
* Seamless integration into an existing checkout page, regardless of the stack used

## Supported browsers <a href="#supported-browsers" id="supported-browsers"></a>

* Chrome
* Firefox
* Edge
* Safari
* Opera
* Brave

## How it works <a href="#how-it-works" id="how-it-works"></a>

<div data-with-frame="true"><figure><img src="https://3085512782-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyw34t0Oefjx0nEVMOjo2%2Fuploads%2FXS4VYngHInTUV6LCHJcf%2FUse%20Cases%20image_0.png?alt=media&amp;token=8fbbb5e0-3c3e-4fa5-89b0-cd48ef8ff70b" alt=""><figcaption></figcaption></figure></div>

## Integration steps <a href="#integration-steps" id="integration-steps"></a>

An account is created in Verifone Central by a Verifone employee.

{% hint style="warning" %}
The onboarding is done with a [Secure Card Capture Key](/online-payments/api-integration-methods-auth-and-endpoints/secure-card-capture-key.md) on Verifone Central.
{% endhint %}

To integrate verifone.js in your Checkout page, follow these steps:&#x20;

1. Load verifone.js in the \<head> of your Checkout page, where the card form is shown.

   ```javascript
   <script src="https://cst.jsclient.vficloud.net/verifone.js"></script>
   ```

   \
   **Sandbox environment:**

   * EMEA : <https://cst.jsclient.vficloud.net/verifone.js>
   * US : <https://uscst.jsclient.vficloud.net/verifone.js>

   **Production environment:**&#x20;

   * EMEA : <https://emea.jsclient.verifone.cloud/verifone.js>
   * US : <https://us.jsclient.verifone.cloud/verifone.js>
   * NZ : <https://nz.jsclient.verifone.cloud/verifone.js><br>
2. Define the [Secure Card Capture Key](/online-payments/api-integration-methods-auth-and-endpoints/secure-card-capture-key.md).<br>

   ```javascript
   var encryptionKey = "SecureCardCaptureKey"
   ```
3. Collect the card data and place it into a JSON object.\
   \
   **Card schema**

   | Parameter name  | Type                         | Description                                                                                                    |
   | --------------- | ---------------------------- | -------------------------------------------------------------------------------------------------------------- |
   | `cardNumber`    | Require&#x64;**\*** (string) | Numeric value with no spaces or separators allowed between the digits                                          |
   | `expiryMonth`   | Optional (string)            | Numeric value with length 2. e.g., March -> 03                                                                 |
   | `expiryYear`    | Optional (string)            | Numeric value with length 2, e.g., 2028 -> 28                                                                  |
   | `cvv`           | Optional (string)            | Numeric value with length 3 or 4                                                                               |
   | `svcAccessCode` | Optional (string)            | <p>Numeric value with length up to 8</p><p>PIN number of non-PCI cards (<strong>e.g.:</strong> Gift Cards)</p> |

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>*</strong><code>cardNumber</code> is required for <strong>getEncryptedCardDetails</strong> method and optional for <code>encryptCard</code></p></div>

   ```javascript
   var card = {
   	"cardNumber": "4000000000001091",
   	"expiryMonth": "03",
   	"expiryYear": "28",
   	"cvv": "123"
   }
   ```
4. Invoke verifone.js to encrypt the card using `encryptionKey`

   ```javascript
   var encryptedCard = await verifone.encryptCard(card, encryptionkey)
   ```

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><code>verifone.encryptCard</code> returns a Promise. Not all browsers support using async-await. Consider this in your integration.</p></div>

   Alternatively, if you would like to receive additional data regarding the card, such as expiration date and limited card digits use the function below:

   ```javascript
   var encryptedCard = await verifone.getEncryptedCardDetails(card, encryptionkey)
   ```
5. If you are using getEncryptedCardDetails you can use the BIN in a binlookup call to receive the card\_brand for grater accuracy in initiating payments.

   ```java
    POST /v2/card/card-details
   {
   	"prefix": "500000"              
   }
   ```

   \
   If this returns multiple results, you should ask the shopper to select one of the brands, corresponding to their card.

   ```java
   {
       "bin_details": [
           {
               "bin": "52",
               "card_brand": "Maestro",
               "issuer_country": null,
               "issuer_name": "Mastercard",
               "type": "DEBIT",
               "funding_source": "DEBIT"
           },
           {
               "bin": "52",
               "card_brand": "MasterCard",
               "issuer_country": null,
               "issuer_name": "Mastercard",
               "type": "CREDIT",
               "funding_source": "CREDIT"
           }
       ]
   }
   ```
6. \[Optional] To initiate a payment using the Payments API, use the encryptedCard parameter alongside the public key alias of the encryption key:

   ```java
   POST /v2/transactions/card
   {
       "amount": 3252,
       "encrypted_card": "encryptedCard", //encrypted card value from verifone.js
       "public_key_alias": "K9",
       "card_brand": "MasterCard" //optional
       ...
   }
   ```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.verifone.com/online-payments/api-integration/card-encryption-verifone.js.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.