Simple Integration

Turnkey payment form with receipt. This is the method used to run the 'Pay Now' button above.

Include value.js on the page and setup configurations.

                    <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_form_title_1 = 'Your Store Name Here';
                      window.valueio_secure_form_title_2 = 'Your Store Callout Here';
                      window.valueio_amount = "$1.00";
                      window.valueio_show_receipt = "true";
                    </script>

Include the value.css link between <head> and </head>.

                    <link rel='stylesheet' type='text/css' href='https://api.value.io/assets/value.css'>

Include a matching form with submit button on your page within the html body.

                    <form id="your-checkout-form">
                      <button type="submit">Pay Now</button>
                    </form>

You're done.

Working Example:

                           <html> 
                            <head>
                              <script src='https://api.value.io/assets/value.js' type="text/javascript"></script>
                              <link rel='stylesheet' type='text/css' href='https://api.value.io/assets/value.css'>
                              <script>
                                window.valueio_write_only_token = "497aa694-297b-4204-8f51-b86dd0ec5a38";
                                window.valueio_form_selector = "#your-checkout-form";
                                window.valueio_secure_form_title_1 = 'Your Store Name Here';
                                window.valueio_secure_form_title_2 = 'Your Store Callout Here';
                                window.valueio_amount = "$1.00";
                                window.valueio_show_receipt = "true";
                              </script>
                            </head>
                            <body>
                              <form id="your-checkout-form">
                                <button type="submit">Pay Now</button>
                              </form>
                            </body>
                          </html>

Advanced Integration

Advanced Integrations use SecureForm to capture secure data and tokenize client side. This is typically done prior to a server to server transaction. The response is a single use token. Transactions are then conducted later useing the kernel API and single use token.

Include value.js on the page and setup configurations.

                    <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_form_title_1 = 'Your Store Name Here';
                      window.valueio_secure_form_title_2 = 'Your Store Callout Here';
                      window.valueio_resource= 'credit_card';
                    </script>

Include the value.css link between <head> and </head>.

                    <link rel='stylesheet' type='text/css' href='https://api.value.io/assets/value.css'>

Include a matching form with submit button on your page within the html body.

                    <form id="your-checkout-form">
                      <button type="submit">Pay Now</button>
                    </form>

When the credit card or payment form has been successfully submitted, your site will receive the single use token.
Architect your server to server requests as you see fit (see: value.io kernel documentation).
Many more configurations below for bending the work flow to your needs.

Card Present - USB Swiper

From a developer perspective, setting up USB swipers is as easy as telling the value.io support team your account requires them. Once we eneable USB swipers, forms will be built out with them in mind. The below button was built out using the code from our Simple Integration Tab above. The only difference is, we have USB Swipers enabled for the linked demo sub-account.

Card Present - EMV Terminal

The Value.IO team has worked hand in hand with Dejavoo℠ to build a fully cloud ready EMV terminal solution. Below outlines the flow of transaction data. In our system, we consider terminals "Destinations." This means that like our USB Swiper example, the bulk of code changes takes place on the Value.IO side, and we abstract out the communications to the devices for you. Read below for more information, and contact us with questions.

value.io application integration flow example 2

1) POS System Launches SecureForm.
- a) POS System initializes a transaction via "simple integration" such as example above.
- b) SecureForm knowing the destination automatically prompts 2a below.
2) Terminal Transaction
- a) Value.IO initializes transaction via terminal. POS system does not require any development beyond the simple integration to make this happen.
- b) Terminal runs transaction directly to processor and returns response as well as signature capture image when applicable.
3) Vertual Termianl
- If 2a fails, and terminal is seen as unavailable on the local network for any reason, USB Swiper or key entry can be used as backup via 3. Refunds and credits can also be issued w/o requiring terminal connectivity from the back office utilizing 3.

SecureForm℠ API 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_credit_card_id: (Optional) a credit card record single use token to be used for a payment
window.valueio_destination_id: (Optional) the id of the destination to be used for a payment
window.valueio_resource: (Optional) default is payments, alternate option is credit_cards
window.valueio_amount: (Optional) order amount
window.valueio_order_number: (Optional) order number
window.valueio_redirect_url: (Optional) in addition to posting the merchant's 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

SecureForm℠ Specific Configurations

window.valueio_secure_form_title_1: (Optional) the title for the iframe form
window.valueio_secure_form_title_2: (Optional) the callout for the iframe form
window.valueio_secure_form_collect_name: (Optional) configures the iframe form to include name fields. Accepted values are 'true' and 'false' (default)
window.valueio_secure_form_collect_address: (Optional) configures the iframe form to include address fields. Accepted values are 'true' and 'false' (default)
window.valueio_secure_form_collect_zip: (Optional) configures the iframe form to include the zip address field when valueio_secure_form_collect_address is 'false'. Accepted values are 'true' and 'false' (default)
window.valueio_secure_form_collect_payment: (Optional) configures the iframe form to include order fields. Accepted values are 'true' and 'false' (default)
window.valueio_secure_form_collect_payment_comment: (Optional) configures the iframe form to include an order comment. Accepted values are 'true' and 'false' (default)
window.valueio_secure_form_collect_credit_card: (Optional) configures the iframe form to include credit card fields. Accepted values are 'true' (default) and 'false'
window.valueio_vault: (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'. Setting to 'collect' will display a 'save card' checkbox on the form.
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_authorize_only: (Optional) This dertimines whether a transaction is only authorized or authorized and captured. Accepted values are 'true' and 'false' (default)
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).
window.valueio_secure_form_nav_bar_color: (Optional) This dertimines the nav bar color.
window.valueio_secure_form_nav_bar_text_color: (Optional) This dertimines the nav bar text color.
window.valueio_secure_form_text_color: (Optional) This dertimines the form text color.
window.valueio_secure_form_input_text_color: (Optional) This dertimines the form input text color.
window.valueio_secure_form_background_color: (Optional) This dertimines the form background color.
window.valueio_secure_form_input_background_color: (Optional) This dertimines the form input background color.
window.valueio_secure_form_fieldset_border_color: (Optional) This dertimines the fieldset border color.
window.valueio_secure_form_submit_color: (Optional) This dertimines the form submit button color.
window.valueio_secure_form_submit_text_color: (Optional) This dertimines the form submit button text color.
window.valueio_secure_form_font_family: (Optional) This dertimines the form font family.

SecureForm℠ Method

The most secure way to gather sensitive data online.

Overview

Direct Processor Destinations

Gateway Destinations

Custom Destinations

Payment Cards:

Payments:

Give value.js a try

Adding value.js to your site