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

1

Create the payment form

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

<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>

2

Add card element container

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

<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>

3

Include the 2Pay.js client

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

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

4

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:

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);
    });
  });
});

5

Place the order

Place the order using the generated token.

Demo

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

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

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

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