Add a PHP payment-processing example that uses the SquareConnect PHP …

…client library
square · Apr 28, 2016 · b254b72 · b254b72
1 parent 89b6dab
commit b254b72
Show file tree

Hide file tree

Showing 6 changed files with 251 additions and 5 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,4 @@
 target/
+vendor/
+composer.phar
+composer.lock
diff --git a/connect-examples/v2/README.md b/connect-examples/v2/README.md
@@ -1,12 +1,15 @@
 
-The project is structured under two folders:
+This folder includes the following samples:
 
-* rails_payment: rails server implementation, within here it also includes frontend implementations for:
-    * plain JS
+* __rails_payment__: a rails server implementation. This example includes front-end
+implementations for:
+    * Standard Javascript
     * JQuery
     * Angular 1
     * React
     * Ember
     * JS + Bootstrap
-* node_payment: node server implementation, within here there is a frontend implementation:
-    * plain JS
+* __node_payment__: a node server implementation. This example includes a single,
+standard Javascript front-end implementation.
+* __php_payment__: a simple PHP server implementation with an accompanying payment
+form.
diff --git a/connect-examples/v2/php_payment/README.md b/connect-examples/v2/php_payment/README.md
@@ -0,0 +1,49 @@
+# Payment processing example: PHP
+
+This sample demonstrates processing card payments with Square Connect API, using the
+Square Connect PHP client library.
+
+## Setup
+
+### Install the PHP client library
+
+This sample already includes the `square/connect` dependency in its `composer.json`
+file. To install the client library:
+
+1. Make sure you've downloaded Composer, following the instructions
+[here](https://getcomposer.org/download/).
+
+2. Run the following command from the directory containing `composer.json`:
+
+       php composer.phar install
+
+### Provide required credentials
+
+Both `process-card.php` and `index.html` have values near the top of the file
+that you need to replace with various credentials associated with your application.
+If you're just testing things out, it's recommended that you use your _sandbox_
+credentials for now. See
+[this article](https://docs.connect.squareup.com/articles/using-sandbox/)
+for more information on the API sandbox.
+
+You can `grep` for `REPLACE_ME` to find all of the fields to replace.
+
+
+## Running the sample
+
+From the sample's root directory, run:
+
+    php -S localhost:8000
+
+You can then visit `localhost:8000` in your browser to see the card form.
+
+If you're using your sandbox credentials, you can test out an valid credit card
+transaction by providing the following card information in the form:
+
+* Card Number 4532 7597 3454 5858
+* Card CVV 111
+* Card Expiration (Any time in the future)
+* Card Postal Code (Any valid US postal code)
+
+**Note that if you are _not_ using your sandbox credentials and you enter _real_
+credit card information, YOU WILL CHARGE THE CARD.**
diff --git a/connect-examples/v2/php_payment/composer.json b/connect-examples/v2/php_payment/composer.json
@@ -0,0 +1,5 @@
+{
+  "require": {
+    "square/connect": "*"
+  }
+}
diff --git a/connect-examples/v2/php_payment/index.html b/connect-examples/v2/php_payment/index.html
@@ -0,0 +1,118 @@
+<html>
+<head>
+  <title>My Payment Form</title>
+  <script type="text/javascript" src="https://js.squareup.com/v2/paymentform"></script>
+  <script type="text/javascript">
+    var sqPaymentForm = new SqPaymentForm({
+
+      // Replace this value with your application's ID (available from the merchant dashboard).
+      // If you're just testing things out, replace this with your _Sandbox_ application ID,
+      // which is also available there.
+      applicationId: 'REPLACE_ME',
+      inputClass: 'sq-input',
+      cardNumber: {
+        elementId: 'sq-card-number',
+        placeholder: "0000 0000 0000 0000"
+      },
+      cvv: {
+        elementId: 'sq-cvv',
+        placeholder: 'CVV'
+      },
+      expirationDate: {
+        elementId: 'sq-expiration-date',
+        placeholder: 'MM/YY'
+      },
+      postalCode: {
+        elementId: 'sq-postal-code',
+        placeholder: 'Postal Code'
+      },
+      inputStyles: [
+
+        // Because this object provides no value for mediaMaxWidth or mediaMinWidth,
+        // these styles apply for screens of all sizes, unless overridden by another
+        // input style below.
+        {
+          fontSize: '14px',
+          padding: '3px'
+        },
+
+        // These styles are applied to inputs ONLY when the screen width is 400px
+        // or smaller. Note that because it doesn't specify a value for padding,
+        // the padding value in the previous object is preserved.
+        {
+          mediaMaxWidth: '400px',
+          fontSize: '18px',
+        }
+      ],
+      callbacks: {
+        cardNonceResponseReceived: function(errors, nonce, cardData) {
+          if (errors) {
+            var errorDiv = document.getElementById('errors');
+            errorDiv.innerHTML = "";
+            errors.forEach(function(error) {
+              var p = document.createElement('p');
+              p.innerHTML = error.message;
+              errorDiv.appendChild(p);
+            });
+          } else {
+            // This alert is for debugging purposes only.
+            alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData));
+
+            // Assign the value of the nonce to a hidden form element
+            var nonceField = document.getElementById('card-nonce');
+            nonceField.value = nonce;
+
+            // Submit the form
+            document.getElementById('form').submit();
+          }
+        },
+        unsupportedBrowserDetected: function() {
+          // Alert the buyer that their browser is not supported
+        }
+      }
+    });
+    function submitButtonClick() {
+      event.preventDefault();
+      sqPaymentForm.requestCardNonce();
+    }
+  </script>
+  <style type="text/css">
+    .sq-input {
+      border: 1px solid #CCCCCC;
+      margin-bottom: 10px;
+      padding: 1px;
+    }
+    .sq-input--focus {
+      outline-width: 5px;
+      outline-color: #70ACE9;
+      outline-offset: -1px;
+      outline-style: auto;
+    }
+    .sq-input--error {
+      outline-width: 5px;
+      outline-color: #FF9393;
+      outline-offset: 0px;
+      outline-style: auto;
+    }
+  </style>
+</head>
+<body>
+
+  <h1>My Payment Form</h1>
+
+  <form id="form" novalidate action="/process-card.php" method="post">
+    <label>Credit Card</label>
+    <div id="sq-card-number"></div>
+    <label>CVV</label>
+    <div id="sq-cvv"></div>
+    <label>Expiration Date</label>
+    <div id="sq-expiration-date"></div>
+    <label>Postal Code</label>
+    <div id="sq-postal-code"></div>
+    <input type="hidden" id="card-nonce" name="nonce">
+    <input type="submit" onclick="submitButtonClick()" id="card-nonce">
+  </form>
+
+  <div id="errors"></div>
+</body>
+</html>
diff --git a/connect-examples/v2/php_payment/process-card.php b/connect-examples/v2/php_payment/process-card.php
@@ -0,0 +1,68 @@
+<?php
+
+require 'vendor/autoload.php';
+
+# Replace these values. You probably want to start with your Sandbox credentials
+# to start: https://docs.connect.squareup.com/articles/using-sandbox/
+
+# The ID of the business location to associate processed payments with.
+# If you're testing things out, use a sandbox location ID.
+#
+# See [Retrieve your business's locations](https://docs.connect.squareup.com/articles/getting-started/#retrievemerchantprofile)
+# for an easy way to get your business's location IDs.
+$location_id = 'REPLACE_ME';
+
+# The access token to use in all Connect API requests. Use your *sandbox* access
+# token if you're just testing things out.
+$access_token = 'REPLACE_ME';
+
+# Helps ensure this code has been reached via form submission
+if ($_SERVER['REQUEST_METHOD'] != 'POST') {
+  error_log("Received a non-POST request");
+  echo "Request not allowed";
+  http_response_code(405);
+  return;
+}
+
+# Fail if the card form didn't send a value for `nonce` to the server
+$nonce = $_POST['nonce'];
+if (is_null($nonce)) {
+  echo "Invalid card data";
+  http_response_code(422);
+  return;
+}
+
+$transaction_api = new \SquareConnect\Api\TransactionApi();
+
+$request_body = array (
+
+  "card_nonce" => $nonce,
+
+  # Monetary amounts are specified in the smallest unit of the applicable currency.
+  # This amount is in cents. It's also hard-coded for $1.00, which isn't very useful.
+  "amount_money" => array (
+    "amount" => 100,
+    "currency" => "USD"
+  ),
+
+  # Every payment you process with the SDK must have a unique idempotency key.
+  # If you're unsure whether a particular payment succeeded, you can reattempt
+  # it with the same idempotency key without worrying about double charging
+  # the buyer.
+  "idempotency_key" => uniqid()
+);
+
+# The SDK throws an exception if a Connect endpoint responds with anything besides
+# a 200-level HTTP code. This block catches any exceptions that occur from the request.
+try {
+  $result = $transaction_api->charge($access_token, $location_id, $request_body);
+  echo "<pre>";
+  print_r($result);
+  echo "</pre>";
+} catch (\SquareConnect\ApiException $e) {
+  echo "Caught exception!<br/>";
+  print_r("<strong>Response body:</strong><br/>");
+  echo "<pre>"; var_dump($e->getResponseBody()); echo "</pre>";
+  echo "<br/><strong>Response headers:</strong><br/>";
+  echo "<pre>"; var_dump($e->getResponseHeaders()); echo "</pre>";
+}