AuthorizeNet · adavidw · Oct 26, 2017 · Oct 31, 2017 · Oct 31, 2017 · Nov 1, 2017
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ The Accept sample application provides examples of how to use the Authorize.Net
 
 + Browse the application (_index.php_) over HTTPS connection.
 
-+ To "log in", use a customer profile ID that already exists within your account or create a new one by using the [Create a Customer Profile API](http://developer.authorize.net/api/reference/index.html#customer-profiles-create-customer-profile).
++ To "log in", use a customer profile ID that already exists within your account or create a new profile ID by using the [Create a Customer Profile API](http://developer.authorize.net/api/reference/index.html#customer-profiles-create-customer-profile).
 
 + In these examples, payment forms are shown in the same page and Shipping forms are handled in a separate modal popup. However, any of the types of display can be chosen to display any type of form.
 

diff --git a/acceptjs.html b/acceptjs.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+
+<!--
+    This file is a standalone HTML page demonstrating usage of the Authorize.net
+    Accept JavaScript library when integrated with your own payment form.
+
+    For complete documentation for the Accept JavaScript library, see
+    https://developer.authorize.net/api/reference/features/acceptjs.html
+-->
+
+<head>
+    <title>Sample form</title>
+</head>
+
+<body>
+
+<script type="text/javascript"
+    src="https://jstest.authorize.net/v1/Accept.js"
+    charset="utf-8">
+</script>
+
+<form id="paymentForm"
+    method="POST"
+    action="https://YourServer/PathToExistingPaymentProcessingScript" >
+    <input type="text" name="cardNumber" id="cardNumber" placeholder="cardNumber"/> <br><br>
+    <input type="text" name="expMonth" id="expMonth" placeholder="expMonth"/> <br><br>
+    <input type="text" name="expYear" id="expYear" placeholder="expYear"/> <br><br>
+    <input type="text" name="cardCode" id="cardCode" placeholder="cardCode"/> <br><br>
+    <input type="text" name="accountNumber" id="accountNumber" placeholder="accountNumber"/> <br><br>
+    <input type="text" name="routingNumber" id="routingNumber" placeholder="routingNumber"/> <br><br>
+    <input type="text" name="nameOnAccount" id="nameOnAccount" placeholder="nameOnAccount"/> <br><br>
+    <input type="text" name="accountType" id="accountType" placeholder="accountType"/> <br><br>
+    <input type="hidden" name="dataValue" id="dataValue" />
+    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
+    <button type="button" onclick="sendPaymentDataToAnet()">Pay</button>
+</form>
+
+<script type="text/javascript">
+
+function sendPaymentDataToAnet() {
+    var authData = {};
+        authData.clientKey = "YOUR PUBLIC CLIENT KEY";
+        authData.apiLoginID = "YOUR API LOGIN ID";
+
+    var cardData = {};
+        cardData.cardNumber = document.getElementById("cardNumber").value;
+        cardData.month = document.getElementById("expMonth").value;
+        cardData.year = document.getElementById("expYear").value;
+        cardData.cardCode = document.getElementById("cardCode").value;
+
+    // If using banking information instead of card information,
+    // build a bankData object instead of a cardData object.
+    //
+    // var bankData = {};
+    //     bankData.accountNumber = document.getElementById('accountNumber').value;
+    //     bankData.routingNumber = document.getElementById('routingNumber').value;
+    //     bankData.nameOnAccount = document.getElementById('nameOnAccount').value;
+    //     bankData.accountType = document.getElementById('accountType').value;
+
+    var secureData = {};
+        secureData.authData = authData;
+        secureData.cardData = cardData;
+        // If using banking information instead of card information,
+        // send the bankData object instead of the cardData object.
+        //
+        // secureData.bankData = bankData;
+
+    Accept.dispatchData(secureData, responseHandler);
+
+    function responseHandler(response) {
+        if (response.messages.resultCode === "Error") {
+            var i = 0;
+            while (i < response.messages.message.length) {
+                console.log(
+                    response.messages.message[i].code + ": " +
+                    response.messages.message[i].text
+                );
+                i = i + 1;
+            }
+        } else {
+            paymentFormUpdate(response.opaqueData);
+        }
+    }
+}
+
+function paymentFormUpdate(opaqueData) {
+    document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
+    document.getElementById("dataValue").value = opaqueData.dataValue;
+
+    // If using your own form to collect the sensitive data from the customer,
+    // blank out the fields before submitting them to your server.
+    document.getElementById("cardNumber").value = "";
+    document.getElementById("expMonth").value = "";
+    document.getElementById("expYear").value = "";
+    document.getElementById("cardCode").value = "";
+    document.getElementById("accountNumber").value = "";
+    document.getElementById("routingNumber").value = "";
+    document.getElementById("nameOnAccount").value = "";
+    document.getElementById("accountType").value = "";
+
+    document.getElementById("paymentForm").submit();
+}
+</script>
+
+</body>
+</html>
diff --git a/acceptjs_with_hosted_form.html b/acceptjs_with_hosted_form.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+
+<!--
+    This file is a standalone HTML page demonstrating usage of the Authorize.net
+    Accept JavaScript library using the integrated payment information form.
+
+    For complete documentation for the Accept JavaScript library, see
+    https://developer.authorize.net/api/reference/features/acceptjs.html
+-->
+
+<head>
+    <title>Sample form</title>
+</head>
+
+<body>
+
+<script type="text/javascript"
+    src="https://jstest.authorize.net/v3/AcceptUI.js"
+    charset="utf-8">
+</script>
+
+<form id="paymentForm"
+    method="POST"
+    action="https://YourServer/PathToExistingPaymentProcessingScript">
+    <input type="hidden" name="dataValue" id="dataValue" />
+    <input type="hidden" name="dataDescriptor" id="dataDescriptor" />
+    <button type="button"
+        class="AcceptUI"
+        data-billingAddressOptions='{"show":true, "required":false}' 
+        data-apiLoginID="YOUR API LOGIN ID" 
+        data-clientKey="YOUR PUBLIC CLIENT KEY"
+        data-acceptUIFormBtnTxt="Submit" 
+        data-acceptUIFormHeaderTxt="Card Information" 
+        data-responseHandler="responseHandler">Pay
+    </button>
+</form>
+
+<script type="text/javascript">
+
+function responseHandler(response) {
+    if (response.messages.resultCode === "Error") {
+        var i = 0;
+        while (i < response.messages.message.length) {
+            console.log(
+                response.messages.message[i].code + ": " +
+                response.messages.message[i].text
+            );
+            i = i + 1;
+        }
+    } else {
+        paymentFormUpdate(response.opaqueData);
+    }
+}
+
+
+function paymentFormUpdate(opaqueData) {
+    document.getElementById("dataDescriptor").value = opaqueData.dataDescriptor;
+    document.getElementById("dataValue").value = opaqueData.dataValue;
+
+    // If using your own form to collect the sensitive data from the customer,
+    // blank out the fields before submitting them to your server.
+    // document.getElementById("cardNumber").value = "";
+    // document.getElementById("expMonth").value = "";
+    // document.getElementById("expYear").value = "";
+    // document.getElementById("cardCode").value = "";
+
+    document.getElementById("paymentForm").submit();
+}
+</script>
+
+</body>
+</html>
diff --git a/login.php b/login.php
@@ -55,14 +55,19 @@
                         	<div class="form-top">
                         		<div class="form-top-left">
                         			<h3>Login to the Accept Sample App</h3>
-                            		<p>Enter your Customer ID below</p>
+                            		<p>Enter your Customer ID below:</p>
+                                    <p style="font-size: 11px; line-height: 1.4; display: block;">
+                                    <i>Use a Customer Profile ID that already exists within your account,
+                                    or create a new ID by using the
+                                    <a href="http://developer.authorize.net/api/reference/index.html#customer-profiles-create-customer-profile">
+                                    Create a Customer Profile API</a>.</i></p>
                         		</div>
                             </div>
                             <div class="form-bottom">
 			                    <form role="form" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" class="login-form">
 			                    	<div class="form-group">
 			                    		<label class="sr-only" for="form-username">Customer ID</label>
-			                        	<input type="text" name="form-username" placeholder="Customer ID .." class="form-username form-control" id="form-username">
+			                        	<input type="text" name="form-username" placeholder="Customer ID ..." class="form-username form-control" id="form-username">
 			                        	<input type="checkbox" name="cookieCheck" value=""><label>&nbsp; Remember Me</label><br><span style="color:red"><?php if($_SESSION["cpid_error"]=='true'){ echo "Customer Profile ID not Valid"; } ?></span>
 			                        </div>
 			                        <button type="submit" name="submit" class="btn">Sign in !</button>