mikegrassotti/plaid.html

## plaid.html

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Plaid Demo Application</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6954312/686646/css/fonts.css"/>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
  <link rel="stylesheet" type="text/css" href="https://demo.plaid.com/styles/style.css">
  <link rel="shortcut icon" href="favicon.ico"/>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</head>
<body>

<div class="logo">
  <div class="title">Plaid Link Demo</div>
  <div class="subtitle">Explore Plaid and Plaid Link.</div>
</div>

<div class="container">
  <div class="explainer">
    <form class="launchform" id="launchform" action="">
      <div class="toggle product">
        <div class="radiobutton">
          <input type="radio" name="product" id="auth" value="auth" checked>
          <label for="auth"><span></span>Plaid Auth</label>
        </div>
        <div class="radiobutton">
          <input type="radio" name="product" id="connect" value="connect">
          <label for="connect"><span></span>Plaid Connect</label>
        </div>
      </div>

      <div class="toggle mode">
        <div class="radiobutton">
          <input type="radio" name="mode" id="sandbox" value="sandbox" checked>
          <label for="sandbox"><span></span>Sandbox Mode</label>
        </div>
        <div class="radiobutton">
          <input type="radio" name="mode" id="live" value="live"><label for="live">
          <span></span>Live Mode</label>
        </div>
      </div>

      <div class="launchbutton">
        <input type="submit" class="button-primary" id="button" onsubmit="openLink(form)"
               value="Link Account with Plaid">
        <div class="subtext">This will launch Plaid Link.</div>
      </div>
    </form>
  </div>
</div>
<div class="container">
  <div class="explainer">
    <h2>What is Plaid?</h2>
    <p><a href="https://plaid.com">Plaid</a> helps developers build applications that interact with banks. Our
      infrastructure allows for simple and secure bank account linkages.</p>
    <p><a href='https://plaid.com/auth'>Auth</a> helps developers authorize and set up ACH payments in seconds by
      providing verified account and routing numbers. No need for users to know account or routing number, and no
      micro-deposits.</p>
    <p><a href='https://plaid.com/connect'>Connect</a> provides developers with a high-context stream of transactional
      data across a user's credit, debit, checking, and savings accounts.</p>

    <h2>What is Plaid Link?</h2>
    <p><a href='https://plaid.com/docs/link'>Plaid Link</a>  is a single-line drop-in module that
      offers a secure, elegant authentication flow for all institutions that Plaid supports.
      <a class="open-code-link" id="open-code-link">Checkout a sample integration.</a></p>
    <div id="code-section" class="code-section">
      <p class="code-section-text">Just drop the following HTML snippet into your web app to get started:</p>
    <pre>
      <code class="html">&lt;form id="link-form-id" method="GET">&lt;/form&gt;
&lt;script
  src="https://cdn.plaid.com/link/stable/link-initialize.js"
  data-client-name="Client Name"
  data-form-id="link-form-id"
  data-key="test_key"
  data-product="auth"
  data-env="tartan"&gt;
&lt;/script&gt;</code>
    </pre>
    </div>

    <h2>Demo Application</h2>
    <p>This demo allows you to connect a bank account using <a href="https://blog.plaid.com/plaid-link/">Plaid Link</a>, and
      collect account-level data from either <a href="https://plaid.com/auth">Plaid Auth</a> or <a
        href="https://plaid.com/connect">Plaid Connect</a>. You can do this using either <a
        href="https://plaid.com/docs#sandbox" title="Plaid API Sandbox credentials">test credentials</a> (Sandbox Mode)
      or live bank accounts (Live Mode).</p>
  </div>
</div>

<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>
<script type="text/javascript">
  'use strict';

  var currentlySelectedProduct;
  $(document).ready(function() {
    $('#launchform').on('submit', function(e) {
      e.preventDefault();

      var mode = $('input[name=mode]:checked', this).val();
      var product = $('input[name=product]:checked', this).val();

      currentlySelectedProduct = product;

      // Open Link in the specified mode (sandbox or live) with the specified product (auth or connect).
      handlers[mode][product].open();
    });

    $('#open-code-link').on('click', function(e) {
      e.preventDefault();

      $('#code-section').toggle()
    })
  });

  var createPlaidHandlerForProduct = function(key, product) {
    if (product !== 'connect' && product !== 'auth') {
      throw new Error('Invalid product');
    }

    return Plaid.create({
      clientName: 'Plaid Demo',
      env: 'tartan',
      product: product,
      key: key,
      onSuccess: function(token) {
        window.location = '/accounts.html?public_token=' + token + '&product=' + currentlySelectedProduct;
      },
    });
  };

  var handlers = {
    sandbox: {
      auth: createPlaidHandlerForProduct('test_key', 'auth'),
      connect: createPlaidHandlerForProduct('test_key', 'connect'),
    },
    live: {
      auth: createPlaidHandlerForProduct('76589eeee668a81308beca8d3499d0', 'auth'),
      connect: createPlaidHandlerForProduct('76589eeee668a81308beca8d3499d0', 'connect'),
    },
  };
</script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<title>Plaid Demo Application</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6954312/686646/css/fonts.css"/>
	<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
	<link rel="stylesheet" type="text/css" href="https://demo.plaid.com/styles/style.css">
	<link rel="shortcut icon" href="favicon.ico"/>
	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
	<script>hljs.initHighlightingOnLoad();</script>
	</head>
	<body>

	<div class="logo">
	<div class="title">Plaid Link Demo</div>
	<div class="subtitle">Explore Plaid and Plaid Link.</div>
	</div>

	<div class="container">
	<div class="explainer">
	<form class="launchform" id="launchform" action="">
	<div class="toggle product">
	<div class="radiobutton">
	<input type="radio" name="product" id="auth" value="auth" checked>
	<label for="auth"><span></span>Plaid Auth</label>
	</div>
	<div class="radiobutton">
	<input type="radio" name="product" id="connect" value="connect">
	<label for="connect"><span></span>Plaid Connect</label>
	</div>
	</div>

	<div class="toggle mode">
	<div class="radiobutton">
	<input type="radio" name="mode" id="sandbox" value="sandbox" checked>
	<label for="sandbox"><span></span>Sandbox Mode</label>
	</div>
	<div class="radiobutton">
	<input type="radio" name="mode" id="live" value="live"><label for="live">
	<span></span>Live Mode</label>
	</div>
	</div>

	<div class="launchbutton">
	<input type="submit" class="button-primary" id="button" onsubmit="openLink(form)"
	value="Link Account with Plaid">
	<div class="subtext">This will launch Plaid Link.</div>
	</div>
	</form>
	</div>
	</div>
	<div class="container">
	<div class="explainer">
	<h2>What is Plaid?</h2>
	<p><a href="https://plaid.com">Plaid</a> helps developers build applications that interact with banks. Our
	infrastructure allows for simple and secure bank account linkages.</p>
	<p><a href='https://plaid.com/auth'>Auth</a> helps developers authorize and set up ACH payments in seconds by
	providing verified account and routing numbers. No need for users to know account or routing number, and no
	micro-deposits.</p>
	<p><a href='https://plaid.com/connect'>Connect</a> provides developers with a high-context stream of transactional
	data across a user's credit, debit, checking, and savings accounts.</p>

	<h2>What is Plaid Link?</h2>
	<p><a href='https://plaid.com/docs/link'>Plaid Link</a> is a single-line drop-in module that
	offers a secure, elegant authentication flow for all institutions that Plaid supports.
	<a class="open-code-link" id="open-code-link">Checkout a sample integration.</a></p>
	<div id="code-section" class="code-section">
	<p class="code-section-text">Just drop the following HTML snippet into your web app to get started:</p>
	<pre>
	<code class="html"><form id="link-form-id" method="GET"></form>
	<script
	src="https://cdn.plaid.com/link/stable/link-initialize.js"
	data-client-name="Client Name"
	data-form-id="link-form-id"
	data-key="test_key"
	data-product="auth"
	data-env="tartan">
	</script></code>
	</pre>
	</div>

	<h2>Demo Application</h2>
	<p>This demo allows you to connect a bank account using <a href="https://blog.plaid.com/plaid-link/">Plaid Link</a>, and
	collect account-level data from either <a href="https://plaid.com/auth">Plaid Auth</a> or <a
	href="https://plaid.com/connect">Plaid Connect</a>. You can do this using either <a
	href="https://plaid.com/docs#sandbox" title="Plaid API Sandbox credentials">test credentials</a> (Sandbox Mode)
	or live bank accounts (Live Mode).</p>
	</div>
	</div>

	<script src="https://cdn.plaid.com/link/stable/link-initialize.js"></script>
	<script type="text/javascript">
	'use strict';

	var currentlySelectedProduct;
	$(document).ready(function() {
	$('#launchform').on('submit', function(e) {
	e.preventDefault();

	var mode = $('input[name=mode]:checked', this).val();
	var product = $('input[name=product]:checked', this).val();

	currentlySelectedProduct = product;

	// Open Link in the specified mode (sandbox or live) with the specified product (auth or connect).
	handlers[mode][product].open();
	});

	$('#open-code-link').on('click', function(e) {
	e.preventDefault();

	$('#code-section').toggle()
	})
	});

	var createPlaidHandlerForProduct = function(key, product) {
	if (product !== 'connect' && product !== 'auth') {
	throw new Error('Invalid product');
	}

	return Plaid.create({
	clientName: 'Plaid Demo',
	env: 'tartan',
	product: product,
	key: key,
	onSuccess: function(token) {
	window.location = '/accounts.html?public_token=' + token + '&product=' + currentlySelectedProduct;
	},
	});
	};

	var handlers = {
	sandbox: {
	auth: createPlaidHandlerForProduct('test_key', 'auth'),
	connect: createPlaidHandlerForProduct('test_key', 'connect'),
	},
	live: {
	auth: createPlaidHandlerForProduct('76589eeee668a81308beca8d3499d0', 'auth'),
	connect: createPlaidHandlerForProduct('76589eeee668a81308beca8d3499d0', 'connect'),
	},
	};
	</script>
	</body>
	</html>