Merge pull request #5 from FidelLimited/develop

Update Docs to first MVP release

cards/README.md

@@ -1,29 +1,27 @@
 ## Cards
-The Card object holds information about the card details submitted by the user using the web form or the mobile SDKs. One user can link multiple cards, debit or credit under the same account.
+The Card object holds information about the card details submitted by the user using the web or mobile SDKs. One user can link multiple cards, debit or credit under the same account.
 
-The details required to link a card are the 16-digit card number, expiry date and the programId of the Program you want to link this card to. The card number is validated using the Luhn algorithm and then tokenised before being submitted to Visa and MasterCard networks. This way, your servers are never exposed to sensitive information, removing all PCI compliance requirements from your side.
+The details required to link a card to a program are the 16-digit card number, expiry date, country code and the `programId` of the Program you want to link this card to. The card number is tokenised and transmitted directly from our secure pre-built iFrame to FIDEL API. This way, your servers are never exposed to sensitive information, removing all PCI compliance requirements from your side.
 
-FIDEL never stores the 16-digit PAN (Primary Account Number) entered by the user. It is tokenised instantly and submitted to the card schemes. After this point only the card token is exchanged between your servers, the card schemes and FIDEL API.
+FIDEL never stores the 16-digit PAN (Primary Account Number) entered by the user. To identify the user in a transaction object you should the use the `cardId` property. After this point only the `cardId` is exchanged between your servers, the card schemes and FIDEL API.
 
-After the card is linked successfully, we will monitor any purchase made by this card on any of the program’s locations and send the transaction object to a specified webhook.
+After the card is linked successfully, we will monitor any purchase made by this card on any of the program’s physical or online locations and send the transaction object to a webhook URL specified by you.
 
 <br/>
 
 # Add Card
 
-To add a new card, go to the **API Playground** on the dashboard, choose **Add Card** from the left menu. The method will be set to POST and the endpoint to _/cards_. An editable sample JSON object like the following one will be used to create the card. In order to add a card from the Playground, you’ll need to use one of the available ~testing card numbers~ shown below. Also, provide an expiry date in the future and the **programId** you want to link this card to.
+To add a new card, go to the **API Playground** on the dashboard, choose **Add Card** from the left menu endpoints. The method will be set to POST and the endpoint to **_/cards_**. An editable sample JSON object like the one displayed below will be used to create the card. In order to add a card from the Playground, you’ll need to use one of the available testing card numbers displayed below. Also, provide an expiry date in the future and the `programId` you want to link this card to.
+
+You can use the dropdown menus to automatically set the ids in the request body or copy them to use in your application code without leaving the playground.
 
 <h5>Create sample cards in test mode using the API Playground.</h5>
 
 ![Create card](https://docs.fidel.uk/assets/images/create-card.png "Create card")
 
 <br/>
 
-If the card is successfully linked, the newly created card object is returned in JSON format with the properties shown below. You can also be notified in real-time by creating a webhook with the event `card.link.success`. If the card linking fails we use the event `card.link.error`.
-
-When linking real Visa cards in live mode, if the card number and expiry date are successfully validated, the `card.link.success` event is triggered in real-time by FIDEL API despite the confirmation from Visa only being available in the next 24 hours. For this reason, we assume that all Visa cards that pass validation are successfully linked and we run a daily schedule at 11:00am UTC that triggers `card.link.error` events in case of any errors.
-
-This process is not required for Mastercard cards since we get successful card linking confirmation in real-time.
+If the card is successfully linked, the newly created card object is returned in JSON and displayed in the response body box. You can also use the [Web SDK](/web) to create cards in the test environment using your test API key. If an error occurs on the card creation, you can verify the error message in the HTTP response body.
 
 <h5>JSON Card object</h5>
 
@@ -32,10 +30,10 @@ fileName:card.json
 {
   "items": [
     {
-      "id": "6b9d11af-cd1e-4bc9-8000-78f6bfcd3db3",
-      "accountId": "a3de60c3-849a-4faa-8447-bcd16efb148c",
-      "programId": "60b4f64e-c6f2-4c0b-a00e-b60192632dfd",
-      "cardId": "42b8eb31-3cb9-4171-8077-c6669d9aa7a2",
+      "id": "e3fff00f-ab85-4a0a-b572-08b464ebf67a",
+      "accountId": "a30e933f-cde1-4ac1-9a5e-acd329497a48",
+      "programId": "e3fff00f-ab85-4a0a-b572-08b464ebf67a",
+      "cardId": "e9784e02-6b67-428f-b321-62d9bcdcd9bf",
       "provider": "mastercard",
       "type": "master-card",
       "lastNumbers": "3183",
@@ -58,37 +56,37 @@ fileName:card.json
 <br/>
 
 # Testing Card Numbers
-Note that you can only add cards in test mode. In live mode new cards can only be created using the SDKs and be real issued card numbers. Use the following test card numbers to test card linking in test mode:
+Note that on the Playground you can only create cards in test mode. In live mode new cards can only be linked to programs using the SDKs. Use the following test card numbers to test card linking in test mode, either in the Playground or using the SDKs with the live API key.
 
 <h5>Visa testing card numbers</h5>
 
 ```json
 visa: [
-  '4444000000000001',
-  '4444000000000002',
-  '4444000000000003',
-  '4444000000000004',
-  '4444000000000005',
-  '4444000000000006',
-  '4444000000000007',
-  '4444000000000008',
-  '4444000000000009',
-  '4444000000000010'
+  '4444000000004001',
+  '4444000000004002',
+  '4444000000004003',
+  '4444000000004004',
+  '4444000000004005',
+  '4444000000004006',
+  '4444000000004007',
+  '4444000000004008',
+  '4444000000004009',
+  '4444000000004010'
 ]
 ```
 <h5>Mastercard testing card numbers</h5>
 
 ```json
 mastercard: [
-  '5555000000000001',
-  '5555000000000002',
-  '5555000000000003',
-  '5555000000000004',
-  '5555000000000005',
-  '5555000000000006',
-  '5555000000000007',
-  '5555000000000008',
-  '5555000000000009',
-  '5555000000000010'
+  '5555000000005001',
+  '5555000000005002',
+  '5555000000005003',
+  '5555000000005004',
+  '5555000000005005',
+  '5555000000005006',
+  '5555000000005007',
+  '5555000000005008',
+  '5555000000005009',
+  '5555000000005010'
 ]
 ```

gettingstarted/README.md

@@ -1,22 +1,22 @@
 ## Getting Started
 
-**FIDEL API** helps you collect payment card details in minutes on iOS, Android and Web by using native SDKs. We developed customizable UI using iFrames so you don't have to handle sensitive information on your servers.
+**FIDEL API** helps you collect payment card details in minutes on iOS, Android and Web with the help of native SDKs. We developed customizable UI using an iFrame so you don't have to handle sensitive information on your servers.
 
-Card numbers are instantly tokenised and we return to you a unique token that identify each successfully linked card on your database.
+Card numbers are instantly tokenised and we return to you a unique token that identifies each successfully linked card on your database. You should save the `id` of the card object that is returned inside your user's object. Every transaction we will send to you will have a `cardId` that you can use to identify the user that made that transaction.
 
 <br/>
 
 # Step 1: Create Account
-Before getting started with the integration you need to **create a FIDEL API account** that will give you access to the dashboard, card-linked program configuration, playground environment and API keys.  
+Before getting started with the integration you need to **create a FIDEL API account** that will give you access to the dashboard, card-linked program configuration, playground environment and API keys. You can create a new account by clicking [here](https://dashboard.fidel.uk/sign-up).
 
 <br/>
 
 # Step 2: Get API Key
-Your test API Key is available on the FIDEL dashboard on your account page. You should start by copying the test key that will allow you to test your integration on mobile or web code and create test transactions from the **API Playground**.
+Your test API Key is available on account page of your dashboard. You should start by copying the test key that will allow you to test your integration on a sandbox environment and create test transactions using the **API Playground**.
 
-<h5>Your API keys are shown in your account page.</h5>
+<h5>Your API keys are displayed in your account page</h5>
 
-![API keys](https://docs.fidel.uk/assets/images/api-keys@2x.png "API keys")
+![API keys](https://docs.fidel.uk/assets/images/api-keys.png "API keys")
 
 <br/>
 
@@ -25,29 +25,29 @@ When you're ready to go live with your integration and test with plastic credit/
 <br/>
 
 # Step 3: Install SDKs
-You can find the open-source Web SDK on our [Github page](https://github.com/FidelLimited) and contribute to improve documentation and SDK functionality. Use our pre-built web UI to collect user's card number and link their card to your program without the need of additional security implementations on your server-side code.
+You can use our pre-built web UI to collect user's card number and link cards to your program without the need of additional security implementations on your server-side code.
 
 We are working on two native SDKs for mobile, iOS and Android, that will be available in the next few weeks.
 
 <br/>
 
 <div class="row">
+<div class="column">
+    <a href="/web" class="content">
+        <img src="https://docs.fidel.uk/assets/images/icon-desktop.svg"/>
+        <h2>Web</h2>
+        <h3>Use our pre-built UI to link cards on your website</h3>
+    </a>
+</div>
     <div class="column">
         <a href="/gettingstarted" class="content">
-            <img src="https://docs.fidel.uk/assets/images/get-started.svg"/>
+            <img src="https://docs.fidel.uk/assets/images/icon-mobile.svg"/>
             <h2>Mobile</h2>
-            <h3>Coming soon... We are working on iOS and Android native SDKs</h3>
-        </a>
-    </div>
-    <div class="column">
-        <a href="/web" class="content">
-            <img src="https://docs.fidel.uk/assets/images/sdk-box.svg"/>
-            <h2>Web</h2>
-            <h3>Easily link cards on your website using the Javascript SDK</h3>
+            <h3>Coming soon... We are working on native SDKs for iOS and Android</h3>
         </a>
     </div>
 </div>
 
 <br/>
 
-Please follow the specific [Web SDK](/web) integration guide to learn how to configure and customize the web form to collect card number and expiry date on your website.
+Please follow the specific [Web SDK](/web) integration guide to learn how to configure and customize the pre-built UI to collect card details securely on your website. You should visit the [Programs](/programs), [Cards](/cards), [Transactions](/transactions) and [Webhooks](/webhooks) sections to get an overview of the FIDEL API object structure and description.

home/README.md

@@ -4,15 +4,15 @@
         <a href="/gettingstarted" class="content">
             <img src="https://docs.fidel.uk/assets/images/get-started.svg"/>
             <h2>Get Started</h2>
-            <h3>Integrate card-linked loyalty with our quickstart guide</h3>
+            <h3>Start building card-linked applications with our quickstart guide</h3>
         </a>
     </div>
     <div class="column">
-        <div class="content">
-            <img src="https://docs.fidel.uk/assets/images/sdk-box.svg"/>
-            <h2>Mobile SDKs</h2>
-            <h3>Coming soon... We are working on iOS and Android native SDKs</h3>
-        </div>
+      <a href="/web" class="content">
+            <img src="https://docs.fidel.uk/assets/images/icon-desktop.svg"/>
+            <h2>Web SDK</h2>
+            <h3>Use our pre-built UI to link cards on your website</h3>
+        </a>
     </div>
 </div>
 <div class="row">
@@ -24,18 +24,18 @@
         </div>
     </div>
     <div class="column">
-        <a href="/web" class="content">
-            <img src="https://docs.fidel.uk/assets/images/api-reference.svg"/>
-            <h2>Web SDK</h2>
-            <h3>Easily link cards on your website using the Javascript SDK</h3>
-        </a>
+        <div class="content">
+            <img src="https://docs.fidel.uk/assets/images/icon-mobile.svg"/>
+            <h2>Mobile SDKs</h2>
+            <h3>Coming soon... We are working on native SDKs for iOS and Android</h3>
+        </div>
     </div>
 </div>
 
 <br/>
 
 <div class="info-box">
-FIDEL API is in closed beta under active development . Expect breaking changes and documentation updates before public release.
+FIDEL API is in public beta under active development. Expect breaking changes and documentation updates before final release.
 </div>
 
 <br/>
@@ -61,27 +61,33 @@ Join our developers' Slack channel for API discussions, documentation, roadmap a
 <br/>
 
 # Demo
-The iOS, Android and Javascript SDKs provide you with simple UI to collect your user’s card details securely on the web or in your mobile apps.
+The iOS, Android and Web SDKs provide you with pre-built UI to collect your user’s card details securely on the web or in your mobile apps.
 
-<h5>Preview of web and mobile FIDEL card linking iFrame.</h5>
+<h5>Preview of web and mobile FIDEL card linking UI</h5>
 
 ![Intro demo](https://docs.fidel.uk/assets/images/intro-demo.png "Intro demo")
 
-<h5>Web SDK integration code</h5>
+To see the Web SDK working, please click the the 'Link Card' button below:
+
+<button style="background: #4dadea; border: none; border-radius: 3px; color: #ffffff;" type="submit" onclick="Fidel.openForm()">Link Card</button>
+
+
+<h5>Web SDK integration script</h5>
 
 ```html
 fileName:index.html
-<script type="text/javascript" src="https://please.waitfor.release/v1/fidel.js"
+<script type="text/javascript" src="https://resources.fidel.uk/sdk/js/v1/fidel.js"
     class="fidel-form"
     data-auto-open="false"
-    data-callback="response"
+    data-callback="callback"
     data-key="pk_live_5be54ed6-0c10-48a8-9db0-ca34852fbbfd"
     data-program-id="d1e38621-6f5d-424f-be26-d6fe33d2663a"
     data-title="Link Card"
-    data-sub-title="Earn 1 point for every £1 spent online or in-store"
-    data-logo="https://brand-logo.png"
+    data-subtitle="Earn 1 point for every £1 spent online or in-store"
+    data-company-name="Fidel"
+    data-logo="https://fidel.uk/logo.png"
     data-lang="en"
-    data-button-color="#589144"
+    data-button-color="#4dadea"
     data-button-title="Link Card"
     data-button-title-color="#ffffff">
 </script>