diff --git a/README.md b/README.md
index b591d7151..ac19b2196 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,52 @@
# Square Connect API Examples
-**IMPORTANT:** On 16 February 2016, changes were made to the representation of a
-Square merchant in the Connect API. These changes slightly altered the behavior of the
-Connect API for applications created after 16 February. The samples in this repository
-now reflect this altered behavior. If you created your Connect API application _before_
-16 February, samples that reflect your application's behavior are available in the
-`v1` directory.
-
-On 23 May 2017, We made a significant improvement to our SDK to expand their
-functionality and make them even easier to use. Unfortunately, some of the
-changes are not backward compatible. The samples in this repository now contain
-three different folders `v1`, `v2.0`, and `v2.1`. You can read more about the
-new SDK in our [blog post](https://medium.com/square-corner-blog/announcing-our-new-versions-of-our-client-sdks-1336d26e8099)
-
-This repository contains simple code samples that demonstrate use of the Square Connect API. Complete documentation for the API is available at [connect.squareup.com](https://connect.squareup.com).
-
-If you have questions about Square Connect API features or implementation, please see the [FAQ](https://docs.connect.squareup.com/articles/faq/).
+This repository contains code samples demonstrating the functionality of the
+Square Connect API and templates to simplify use of our SDKs and APIs.
+
+
+## In this repository
+
+* `connect-examples/oauth` - samples implementing OAuth
+* `connect-examples/v1` - samples demonstrating Connect v1 functionality
+* `connect-examples/v2` - samples demonstrating Connect v2 functionality
+* `templates/` - code blocks and function definitions to simplify common usage
+
+
+## Getting help
+
+Complete documentation for Square APIs is available at
+[docs.connect.squareup.com].
+
+If you have questions about Square Connect API features or implementation,
+you can ask for help on [Stack Overflow] or in our [Slack community].
+
+
+--------------------------------------------------------------------------------
+
+## Release notes
+
+### 2018-08-13
+
+Updating directory structure and submitting inaugural code templates.
+
+### 2017-05-23
+
+On 23 May 2017, we improved our SDKs to expand their functionality and make them
+easier to use. Unfortunately, some of the changes are not backward compatible.
+You can read more about the changes in our [SDK blog post].
+
+
+### 2016-02-16
+
+On 16 February 2016, we changed the way merchant data is represented in the
+Connect APIs. The data change also altered API behavior slightly. The samples
+in this repository reflect this altered behavior. If you created your Connect
+API application *before* 16 February, you can find samples that reflect your
+application's behavior in the `v1` directory.
+
+
+[//]: # "Link anchor definitions"
+[SDK blog post]: https://medium.com/square-corner-blog/announcing-our-new-versions-of-our-client-sdks-1336d26e8099
+[Stack Overflow]: https://stackoverflow.com/questions/tagged/square-connect
+[Slack community]: https://squ.re/2Hks3YE
+[docs.connect.squareup.com]: https://docs.connect.squareup.com
diff --git a/templates/README.md b/templates/README.md
new file mode 100644
index 000000000..590185ea7
--- /dev/null
+++ b/templates/README.md
@@ -0,0 +1,15 @@
+# Square Connect API Templates
+
+This directory contains code templates to simplify use of our SDKs and APIs.
+These templates are also referenced in setup guides at
+[docs.connect.squareup.com].
+
+## In this directory
+
+* `php` - server-side code templates in PHP
+* `web-ui` - client-side UI templates and themes for Square Payment Form
+
+--------------------------------------------------------------------------------
+
+[//]: # "Link anchor definitions"
+[docs.connect.squareup.com]: https://docs.connect.squareup.com
diff --git a/templates/php/sq_config.php b/templates/php/sq_config.php
new file mode 100644
index 000000000..b5320ab39
--- /dev/null
+++ b/templates/php/sq_config.php
@@ -0,0 +1,115 @@
+
diff --git a/templates/web-ui/payment-form/README.md b/templates/web-ui/payment-form/README.md
new file mode 100644
index 000000000..9b85a4b85
--- /dev/null
+++ b/templates/web-ui/payment-form/README.md
@@ -0,0 +1,12 @@
+# Templates and themes for Square Payment Form
+
+This directory contains collections of HTML, Javascript, and CSS templates for
+Square Payment Form. For instructions on using this templates, see the Payment
+Form Setup guide at [docs.connect.squareup.com].
+
+## In this directory
+
+* `basic` - templates for a basic Payment Form integration
+
+[//]: # "Link anchor definitions"
+[docs.connect.squareup.com]: https://docs.connect.squareup.com
diff --git a/templates/web-ui/payment-form/basic/sqpaymentform-basic.css b/templates/web-ui/payment-form/basic/sqpaymentform-basic.css
new file mode 100644
index 000000000..08aa5194a
--- /dev/null
+++ b/templates/web-ui/payment-form/basic/sqpaymentform-basic.css
@@ -0,0 +1,102 @@
+/* Define how SqPaymentForm iframes should look */
+.sq-input {
+ border: 1px solid rgb(223, 223, 223);
+ outline-offset: -2px;
+ margin-bottom: 5px;
+ display: inline-block;
+}
+
+/* Define how SqPaymentForm iframes should look when they have focus */
+.sq-input--focus {
+ outline: 5px auto rgb(59, 153, 252);
+}
+
+/* Define how SqPaymentForm iframes should look when they contain invalid values */
+.sq-input--error {
+ outline: 5px auto rgb(255, 97, 97);
+}
+
+/* Customize the "Pay with Credit Card" button */
+.button-credit-card {
+ min-width: 200px;
+ min-height: 20px;
+ padding: 0;
+ margin: 5px;
+ line-height: 20px;
+ box-shadow: 2px 2px 1px rgb(200, 200, 200);
+ background: rgb(255, 255, 255);
+ border-radius: 5px;
+ border: 1px solid rgb(200, 200, 200);
+ font-weight: bold;
+ cursor:pointer;
+}
+
+
+/* Customize the "{{Wallet}} not enabled" message */
+.wallet-not-enabled {
+ min-width: 200px;
+ min-height: 40px;
+ max-height: 64px;
+ padding: 0;
+ margin: 10px;
+ line-height: 40px;
+ background: #eee;
+ border-radius: 5px;
+ font-weight: lighter;
+ font-style: italic;
+ font-family: inherit;
+ display: block;
+}
+
+/* Customize the Apple Pay on the Web button */
+.button-apple-pay {
+ min-width: 200px;
+ min-height: 40px;
+ max-height: 64px;
+ padding: 0;
+ margin: 10px;
+ background-image: -webkit-named-image(apple-pay-logo-white);
+ background-color: black;
+ background-size: 100% 60%;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ border-radius: 5px;
+ cursor:pointer;
+ display: none;
+}
+
+/* Customize the Masterpass button */
+.button-masterpass {
+ min-width: 200px;
+ min-height: 40px;
+ max-height: 40px;
+ padding: 0;
+ margin: 10px;
+ background-image: url(https://static.masterpass.com/dyn/img/btn/global/mp_chk_btn_147x034px.svg);
+ background-color: black;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
+ background-position: 50% 50%;
+ border-radius: 5px;
+ border-color: rgb(255, 255, 255);
+ cursor:pointer;
+ display: none;
+}
+
+#sq-walletbox {
+ float:left;
+ margin:5px;
+ padding:10px;
+ text-align: center;
+ vertical-align: top;
+ font-weight: bold;
+}
+
+#sq-ccbox {
+ float:left;
+ margin:5px;
+ padding:10px;
+ text-align: center;
+ vertical-align: top;
+ font-weight: bold;
+}
diff --git a/templates/web-ui/payment-form/basic/sqpaymentform-basic.html b/templates/web-ui/payment-form/basic/sqpaymentform-basic.html
new file mode 100644
index 000000000..c9fa0ba57
--- /dev/null
+++ b/templates/web-ui/payment-form/basic/sqpaymentform-basic.html
@@ -0,0 +1,74 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Pay with a Digital Wallet
+
Apple Pay for Web not enabled
+
+
+
+
Masterpass not enabled
+
+
+
+
+
+
diff --git a/templates/web-ui/payment-form/basic/sqpaymentform-basic.js b/templates/web-ui/payment-form/basic/sqpaymentform-basic.js
new file mode 100644
index 000000000..e68f36553
--- /dev/null
+++ b/templates/web-ui/payment-form/basic/sqpaymentform-basic.js
@@ -0,0 +1,184 @@
+// Set the application ID
+var applicationId = "";
+
+// Set the location ID
+var locationId = "";
+
+/*
+ * function: requestCardNonce
+ *
+ * requestCardNonce is triggered when the "Pay with credit card" button is
+ * clicked
+ *
+ * Modifying this function is not required, but can be customized if you
+ * wish to take additional action when the form button is clicked.
+ */
+function requestCardNonce(event) {
+
+ // Don't submit the form until SqPaymentForm returns with a nonce
+ event.preventDefault();
+
+ // Request a nonce from the SqPaymentForm object
+ paymentForm.requestCardNonce();
+}
+
+// Create and initialize a payment form object
+var paymentForm = new SqPaymentForm({
+
+ // Initialize the payment form elements
+ applicationId: applicationId,
+ locationId: locationId,
+ inputClass: 'sq-input',
+
+ // Customize the CSS for SqPaymentForm iframe elements
+ inputStyles: [{
+ fontSize: '.9em'
+ }],
+
+ // Initialize Apple Pay placeholder ID
+ applePay: {
+ elementId: 'sq-apple-pay'
+ },
+
+ // Initialize Masterpass placeholder ID
+ masterpass: {
+ elementId: 'sq-masterpass'
+ },
+
+ // Initialize the credit card placeholders
+ cardNumber: {
+ elementId: 'sq-card-number',
+ placeholder: '•••• •••• •••• ••••'
+ },
+ cvv: {
+ elementId: 'sq-cvv',
+ placeholder: 'CVV'
+ },
+ expirationDate: {
+ elementId: 'sq-expiration-date',
+ placeholder: 'MM/YY'
+ },
+ postalCode: {
+ elementId: 'sq-postal-code'
+ },
+
+ // SqPaymentForm callback functions
+ callbacks: {
+
+ /*
+ * callback function: methodsSupported
+ * Triggered when: the page is loaded.
+ */
+ methodsSupported: function (methods) {
+
+ var applePayBtn = document.getElementById('sq-apple-pay');
+ var applePayLabel = document.getElementById('sq-apple-pay-label');
+ var masterpassBtn = document.getElementById('sq-masterpass');
+ var masterpassLabel = document.getElementById('sq-masterpass-label');
+
+ // Only show the button if Apple Pay for Web is enabled
+ // Otherwise, display the wallet not enabled message.
+ if (methods.applePay === true) {
+ applePayBtn.style.display = 'inline-block';
+ applePayLabel.style.display = 'none' ;
+ }
+ // Only show the button if Masterpass is enabled
+ // Otherwise, display the wallet not enabled message.
+ if (methods.masterpass === true) {
+ masterpassBtn.style.display = 'inline-block';
+ masterpassLabel.style.display = 'none';
+ }
+ },
+
+ /*
+ * callback function: createPaymentRequest
+ * Triggered when: a digital wallet payment button is clicked.
+ */
+ createPaymentRequest: function () {
+
+ var paymentRequestJson ;
+ /* ADD CODE TO SET/CREATE paymentRequestJson */
+ return paymentRequestJson ;
+ },
+
+ /*
+ * callback function: validateShippingContact
+ * Triggered when: a shipping address is selected/changed in a digital
+ * wallet UI that supports address selection.
+ */
+ validateShippingContact: function (contact) {
+
+ var validationErrorObj ;
+ /* ADD CODE TO SET validationErrorObj IF ERRORS ARE FOUND */
+ return validationErrorObj ;
+ },
+
+ /*
+ * callback function: cardNonceResponseReceived
+ * Triggered when: SqPaymentForm completes a card nonce request
+ */
+ cardNonceResponseReceived: function(errors, nonce, cardData, billingContact, shippingContact) {
+ if (errors) {
+ // Log errors from nonce generation to the Javascript console
+ console.log("Encountered errors:");
+ errors.forEach(function(error) {
+ console.log(' ' + error.message);
+ });
+
+ return;
+ }
+
+ alert('Nonce received: ' + nonce); /* FOR TESTING ONLY */
+
+ // Assign the nonce value to the hidden form field
+ document.getElementById('card-nonce').value = nonce;
+
+ // POST the nonce form to the payment processing page
+ document.getElementById('nonce-form').submit();
+
+ },
+
+ /*
+ * callback function: unsupportedBrowserDetected
+ * Triggered when: the page loads and an unsupported browser is detected
+ */
+ unsupportedBrowserDetected: function() {
+ /* PROVIDE FEEDBACK TO SITE VISITORS */
+ },
+
+ /*
+ * callback function: inputEventReceived
+ * Triggered when: visitors interact with SqPaymentForm iframe elements.
+ */
+ inputEventReceived: function(inputEvent) {
+ switch (inputEvent.eventType) {
+ case 'focusClassAdded':
+ /* HANDLE AS DESIRED */
+ break;
+ case 'focusClassRemoved':
+ /* HANDLE AS DESIRED */
+ break;
+ case 'errorClassAdded':
+ /* HANDLE AS DESIRED */
+ break;
+ case 'errorClassRemoved':
+ /* HANDLE AS DESIRED */
+ break;
+ case 'cardBrandChanged':
+ /* HANDLE AS DESIRED */
+ break;
+ case 'postalCodeChanged':
+ /* HANDLE AS DESIRED */
+ break;
+ }
+ },
+
+ /*
+ * callback function: paymentFormLoaded
+ * Triggered when: SqPaymentForm is fully loaded
+ */
+ paymentFormLoaded: function() {
+ /* HANDLE AS DESIRED */
+ }
+ }
+});