Credit Card

Credit card contains sensitive information which needs to be protected. You can use Elements vaulting process to securely collect credit card information from your customers.

Generate Client Token

Generate the client token which is used on the frontend application.

require "elements"

Elements.configure do |c|
  # You must set a valid api key
  c.api_key = "my_api_key"
  # Optionally, you can configure logging for request & response
  c.logger = Logger.new($stdout)
  # If you want to connect to the sandbox instead of production
  c.api_base = Elements::ElementsConfiguration::SANDBOX_URL
end

# create client token which is used on the client side
Elements::ClientToken.create({ external_customer_id: "your_customer_identifier" })
#set up api key
import elements
elements.api_key = "my_api_key"
elements.api_base = elements.API_SANDBOX

# call this API generate client token
client_token = elements.ClientToken.create(external_customer_id="foo").client_token
curl --location --request POST 'https://api.elements-sandbox.io/api/v1/authentication/client_token' \
--header 'Authorization: <YOUR API KEY>' \
--header 'Content-Type: application/json' \
--data-raw '{
    "external_customer_id": "CE7FTPGHXPHDP",
    "psp_customer_references": [
        {
            "payment_gateway_type": "stripe",
            "customer_id": "cus_KuqGAtrkyIZShx"
        }
    ]
}'

Collect Card Details

Now, you’re ready to collect payment details on the client with the Elements Client SDK. Element client SDK supports collecting payment details for a variety of payment methods with a prebuilt UI component which supports customized styles.

Set up Elements.js

<head>
  <title>Elements Web Vaulting</title>
  <script src="https://js.elements.io/v1/elements.js"></script>
</head>
// Include as module
import Elements from '@elementspay/elements-web-lib';
// Or include as script in html
const Elements = window.Elements;

const elements = Elements({
    environment: 'sandbox',
    clientKey: YOUR_CLIENT_KEY_HERE
});

Add Container

<body>
  <div id="demo-container">
    <div id="demo-title">Credit Card Vaulting</div>
    <div id="frame-container"></div>
    <button onclick="window.onSumbit(event)">
      Submit
    </button>
  </div>
</body>

Mount Credit Card Component
When the container above has loaded, create an instance of the Credit Card component and mount it to the container DOM node.

const componentsManager = elements.componentsManager();

const cardComponent = componentsManager.create('card', {
   showZipCode: true,
   showNameField: true,
});

setTimeout(() => {
    cardComponent.mount('#frame-container');
}, 0);

Vault Credit Card
Submit users' credit card information to Elements backend in exchange for a vaulted token which can be safely applied for the payment processing purpose.

window.onSumbit = event => {
  const btn = event.target;
  btn.disabled = true;
  btn.className = 'pending';
  const btnText = btn.innerHTML;
  btn.innerHTML = '<span>.</span><span>.</span><span>.</span>';
  
  elements.createToken(cardComponent)
    .then(data => {
       btn.disabled = false;
       btn.className = '';
       btn.innerHTML = btnText;
       if (data && data.elementsTokenization) {
         console.log("Tokenization succeeded - " + data);
       } else {
         console.log("Tokenization failed");
       }
    });
};

[Optional] Listen to Events Change
The pre-built component provides a list of events which you can listen to. So you have full control on what can happen after certain user actions.

cardComponent.on('ready', function(event) {
  // handle ready to display event here
});

cardComponent.on('change', function(event) {
  // handle input value changed here
});

cardComponent.on('blur', function(event) {
  // handle field blur event here
});

cardComponent.on('focus', function(event) {
  // handle forcus event here
});

3D Secure

3D Secure is a way to prompts customers to complete an additional authentication step before users can make any payment related activity. The extra protection 3D Secure helps protecting not only customers but also merchants. Normally, if the 3D Secure step is completed, the liability for any fraud-related disputes for that payment typically shift from the merchant to the issuer.

Elements supports 3D Secure by nature thus you don't have to worry about how to handle it.


What’s Next

You can convert the vaulting result to a reusable payment method through Elements.