> For the complete documentation index, see [llms.txt](https://docs.2checkout.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.2checkout.com/2checkout-apis/2checkout-apis/2pay.js-payments-solution-integration-guide/use-cases/set-the-language-when-generating-the-card-component.md).

# Set the language when generating the card component

## Overview

Set up the 2Pay.js drop-in payments client to accept payments on your website. To collect payments, you need to create a payment form, tokenize sensitive card information, and use that token to create a charge.

Use the method below to set the language when generating the card component.

## Use case

{% stepper %}
{% step %}

### Create the payment form

Create a form with id="payment-form":

```html
<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>
  <button class="btn btn-primary" type="submit">Generate token</button>
</form>
```

{% endstep %}

{% step %}

### Add card element container

Inside the form, add an element with id="card-element":

```html
<form type="post" id="payment-form">
  <div class="form-group">
    <label for="name" class="label control-label">Name</label>
    <input type="text" id="name" class="field form-control">
  </div>

  <div id="card-element">
    <!-- A TCO IFRAME will be inserted here. -->
  </div>

  <button class="btn btn-primary" type="submit">Generate token</button>
</form>
```

{% endstep %}

{% step %}

### Include the 2Pay.js client

Include the 2Pay.js drop-in payments client JavaScript:

```html
<script type="text/javascript" src="https://2pay-js.2checkout.com/v1/2pay.js"></script>
```

{% endstep %}

{% step %}

### Configure language, create a component, and generate a token

Insert the following configuration JavaScript to set the language when adding the card component, and generate the token request:

```javascript
window.addEventListener('load', function() {
  // Initialize the JS Payments SDK client.
  let jsPaymentClient = new  TwoPayClient('AVLRNG');

  // Set the desired language to be used inside the iframe.
  jsPaymentClient.setup.setLanguage('ro');

  // Create the component that will hold the card fields.
  let component = jsPaymentClient.components.create('card');

  // Mount the card fields component in the desired HTML tag. This is where the iframe will be located.
  component.mount('#card-element');

  // Handle form submission.
  document.getElementById('payment-form').addEventListener('submit', (event) => {
    event.preventDefault();

    // Extract the Name field value
    const billingDetails = {
      name: document.querySelector('#name').value
    };

    // Call the generate method using the component as the first parameter
    // and the billing details as the second one
    jsPaymentClient.tokens.generate(component, billingDetails).then((response) => {
      console.log(response.token);
    }).catch((error) => {
      console.error(error);
    });
  });
});
```

{% endstep %}

{% step %}

### Place the order

Place the order using the generated token.
{% endstep %}
{% endstepper %}

## Demo

After performing the steps above, your implementation should look like this:

HTML

```html
<div class="container">
  <div class="row justify-content-md-center mt-5">
    <div class="col-12">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Implementation for the 2Pay.js client with language change</h5>

          <form type="post" id="payment-form">
            <div class="form-group">
              <label for="name" class="label control-label">Name</label>
              <input type="text" id="name" class="field form-control">
            </div>

            <div id="card-element">
              <!-- A TCO IFRAME will be inserted here. -->
            </div>

            <button class="btn btn-primary" type="submit">Generate token</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
```

CSS

```css
#two-co-iframe {
  height: 220px;
}
```

JavaScript

```javascript
window.addEventListener('load', function() {
  // Initialize the 2Pay.js client.
  let jsPaymentClient = new TwoPayClient('AVLRNG');

  // Set the desired language to be used inside the iframe.
  jsPaymentClient.setup.setLanguage('ro');

  // Create the component that will hold the card fields.
  let component = jsPaymentClient.components.create('card');

  // Mount the card fields component in the desired HTML tag. This is where the iframe will be located.
  component.mount('#card-element');

  // Handle form submission.
  document.getElementById('payment-form').addEventListener('submit', (event) => {
    event.preventDefault();

    // Extract the Name field value
    const billingDetails = {
      name: document.querySelector('#name').value
    };

    // Call the generate method using the component as the first parameter
    // and the billing details as the second one
    jsPaymentClient.tokens.generate(component, billingDetails).then((response) => {
      console.log(response.token);
    }).catch((error) => {
      console.error(error);
    });
  });
});
```

### CodePen embed

{% embed url="<https://codepen.io/2checkout-documentation/pen/wvvQoZN>" %}


---

# 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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.2checkout.com/2checkout-apis/2checkout-apis/2pay.js-payments-solution-integration-guide/use-cases/set-the-language-when-generating-the-card-component.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.