SecureField℠ Method

When you need the flexibility of your own form, securely.

Overview

The value.js SecureField℠ method provides a simple to integrate payment and credit_card tokenization solution for your ecommerce site that works with your custom forms.

Since value.js integrates your site with the value.io kernel you get turnkey access to all of these resources:

Direct Processor Destinations

  • TSYS
  • Litle
  • Mercury
  • Heartland Payment Systems
  • SecureNet
  • Sage Payments US
  • Stripe

Gateway Destinations

  • Inspire Commerce
  • Network Merchants (NMI)
  • USAePay
  • Authorize.Net

Custom Destinations

  • PassThrough (build your own)

Payment Cards:

  • Secure Input
  • Single Use Tokens
  • Destination Agnostic Vaulting

Payments:

  • Transact With Single Use or vaulted card against any destination

Give value.js SecureField℠ a try

Adding value.js to your site

  1. Include the value.js script and configuration on your site's checkout page. There are additional SecureField℠ configuration options and definitions below. 
                    <html>
                  <head>
                  <script src='https://api.value.io/assets/value.js' type="text/javascript"></script>
                    <script>
                      window.valueio_write_only_token = "497aa694-297b-4204-8f51-b86dd0ec5a38";
                      window.valueio_form_selector = "#your-checkout-form";
                      window.valueio_secure_number_selector = "#payment-card-number";
                      window.valueio_secure_month_selector = "#payment-card-month";
                      window.valueio_secure_year_selector = "#payment-card-year";
                      window.valueio_secure_security_code_selector = "#payment-card-security-code";
                      window.valueio_method = 'secure_field';
                      window.valueio_amount = '$1.00';
                      window.valueio_first_name = "Felton"
                      window.valueio_last_name = "Effertz"
                    </script>
                  </head>
                  <body>
                    <form onsubmit="alert('Thank you for your payment!'); return false" id="your-checkout-form">
                      <label>
                        Credit Card Number
                        <input type='text' id='payment-card-number' placeholder='4111 1111 1111 1111'></input>
                      </label>
                      <label>
                        Credit Card Expiration Month
                        <input type='text' id='payment-card-month' placeholder='01'></input>
                      </label>
                      <label>
                        Credit Card Expiration Year
                        <input type='text' id='payment-card-year' placeholder='17'></input>
                      </label>
                      <label>
                        Credit Card Security Code
                        <input type='text' id='payment-card-security-code' placeholder='123'></input>
                      </label>
                      <button type="submit">Pay Now</button>
                    </form>
                  </body>
                </html>
  2. When the credit card or payment form has been successfully submitted, your site's checkout form will be submitted including the credit card or payment record identifier in a hidden field.
  3. Your site retrieves the credit card or payment record from value.io with a server to server request (see: value.io kernel documentation).

SecureField℠ Configuration Documentation

General

window.valueio_write_only_token
(Required) a value.io token associated with your value.io account with the write_only role
window.valueio_token_field
(Optional) the name of the field in which the secure token will be sent
window.valueio_method
(Optional) default is secure_form, alternate option is secure_field
window.valueio_payment_id
(Optional) the id of a previously created untransacted payment record
window.valueio_resource
(Optional) default is payments, alternate option is credit_cards
window.valueio_redirect_url
(Optional) in addition to posting the merchants form with the secure field, can also redirect to a url instead
window.valueio_on_success
(Optional) user defined callback method to be called on value secure form or secure field success
window.valueio_on_failure
(Optional) user defined callback method to be called on value secure form or secure field failure
window.valueio_on_cancel
(Optional) user defined callback method to be called on value secure form cancel

Data Collection

These configurations allow for multiple modifications. All configurations may be used to define values, modified to specify the css selector for collecting values via a form field '_selector' or even modified to treat the form elements like credit card data using '_secure'.

window.valueio_form_selector
Default = '#checkout-form'
(Optional) css selector for the form element of your site's checkout page

Credit Card Specific Data

Sensitive Credit Card data fields such as these are never submitted back to your server with the form submission. They may be transacted against or retrieved with the secure token using a follow up server to server request.
window.valueio_secure_brand_selector
Default = '#payment-card-brand', '#credit_card_brand'
(Optional) This is the css selector for the credit card brand input element of your site's checkout page.
window.valueio_secure_number_selector
Default = '#payment-card-number', '#credit_card_number'
(Optional) This is the css selector for the credit card number input element of your site's checkout page.
window.valueio_secure_month_selector
Default = '#payment-card-month', '#credit_card_month'
(Optional) This is the css selector for the credit card expiration month input element of your site's checkout page.
window.valueio_secure_year_selector
Default = '#payment-card-year', '#credit_card_year'
(Optional) This is the css selector for the credit card expiration year input element of your site's checkout page.
window.valueio_secure_security_code_selector
Default = '#payment-card-security-code', '#cvv', '#credit_card_cvv'
(Optional) This is the css selector for the credit card security code input element of your site's checkout page.
window.valueio_vault
Default = 'false'
(Optional) This dertimines whether created credit card records are stored in the credit card vault or not. Accepted values are 'false' (default), 'true', or 'collect'. Set to 'collect' if you will have a 'save card' checkbox on your form.

Billing Data

You may use these fields as shown below to specify the form field css selector. If you remove '_selector' you are free to simply define the value directly. You may also add '_secure' with '_selector' after 'window.valueio' to treat these fields like the Secure Credit Card data above.
window.valueio_first_name_selector
Default = '#first-name', '#billing_first_name'
(Optional) css selector for the billing first name input element of your site's checkout page
window.valueio_last_name_selector
Default = '#last-name', '#billing_last_name'
(Optional) css selector for the billing last name input element of your site's checkout page
window.valueio_address1_selector
Default = '#address-1', '#billing_address_1'
(Optional) css selector for the billing street address 1 input element of your site's checkout page
window.valueio_address2_selector
Default = '#address-2', '#billing_address_2'
(Optional) css selector for the billing street address 2 input element of your site's checkout page
window.valueio_city_selector
Default = '#city', '#billing_city'
(Optional) css selector for the billing city input element of your site's checkout page
window.valueio_state_selector
Default = '#state', '#billing_state'
(Optional) css selector for the billing state input element of your site's checkout page
window.valueio_zip_selector
Default = '#zip', '#billing_postcode'
(Optional) css selector for the billing zip input element of your site's checkout page
window.valueio_country_selector
Default = '#country', '#billing_country'
(Optional) css selector for the billing country input element of your site's checkout page
window.valueio_phone_selector
Default = '#phone', '#billing_phone'
(Optional) css selector for the phone input element of your site's checkout page
window.valueio_email_selector
Default = '#email', '#billing_email'
(Optional) css selector for the email input element of your site's checkout page
window.valueio_transact
(Optional) This dertimines whether a payment record is automatically transacted against a back end processor, against a terminal, or not transacted. Accepted values are 'true' (default), 'false', and 'terminal'.
window.valueio_terminal_slug
(Optional) This Specifies a terminal slug to transact against if window.valueio_transact is set to 'terminal'
window.valueio_submit_on_load
(Optional) This dertimines whether the form automatically submits with configured data on page load. Accepted values are 'true' or 'false'(default).

Other Transactional Data

You may use these fields as shown below to specify the form field css selector. If you remove '_selector' you are free to simply define the value directly. You may also add '_secure' after 'window.valueio' to treat these fields like the Secure Credit Card data above.
window.valueio_vault_selector
Default = '#store_credit_card', FALSE
(Optional) css selector for the save credit card input element of your site's checkout page
window.valueio_amount_selector
Default = '#amount'
(Optional) css selector for the order amount element of your site's checkout page
window.valueio_order_number_selector
Default = '#order-number'
(Optional) css selector for the order number element of your site's checkout page