Pinch CaptureJs Bank Account Sample

by dkarzon

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
</head>
<body>
    <style type="text/tailwindcss">
        .input {
            @apply h-12 w-full rounded-xl border-coolGrey-tint placeholder-coolGrey-light text-coolGrey-shade focus:border-2 focus:border-oceanPurple-light;
        }
        .btn {
            @apply rounded-full px-6 py-[15px] flex items-center whitespace-nowrap;
        }
        .btn > svg {
            @apply mr-3;
        }
        .btn-primary {
            @apply font-bold text-white bg-oceanPurple-light hover:bg-oceanPurple focus:bg-oceanPurple-dark active:bg-oceanPurple-dark disabled:bg-coolGrey-tint disabled:cursor-default disabled:text-coolGrey-light;
        }
    </style>

    <script src="https://cdn.getpinch.com.au/capturejs/pinch.capture.v2.js" integrity="sha384-hglYFSKC4AMA/rAQOGB3OiA8u5ri5F4qNMGgw4I+fggDSlTmPyREcj1J+VGnkAX8" crossorigin="anonymous"></script>

    <div class="w-full align-center">
        <div
            class="w-full max-w-md p-6 my-8 mx-auto overflow-hidden text-left align-middle bg-white shadow-xl rounded-2xl opacity-100 scale-100">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-3xl text-coolGrey-shade">
                    Add Bank Account
                </h3>
            </div>
            <div class="relative overflow-hidden flex flex-col">
                <div class="inset-0 block translate-x-0">
                    <div class="flex flex-col flex-wrap">
                        <div class="mb-5">
                            <label for="BankAccountName" class="label block text-coolGrey-shade mb-1.5">Account Name</label>
                            <input type="text" name="BankAccountName" id="BankAccountName" class="input" />
                        </div>
                        <div...

JavaScript

function handleSubmit() {
  // Setup CaptureJs
  var capture = Pinch.Capture({
    publishableKey: "pk_test_IPA27NRmeTfCawt00h1Zbt9vitpZEPMH"
  });
  
  // Tokenise Credit Card
  capture.createToken({
    sourceType: "bank-account",
    bankAccountName: document.getElementById("BankAccountName").value,
    bankAccountRouting: document.getElementById("BankAccountRouting").value,
    bankAccountNumber: document.getElementById("BankAccountNumber").value
  }).then(function (result) {
    console.log("Client received token: " + result.token);
    document.getElementById("tokenResult").textContent = "Token created! " + result.token;
    document.getElementById("submitButton").disabled = true;
    // result.token is a string containing the token
    // that can be sent to your own API to then make a call to the Pinch API for either
    // a Payments endpoint or to create a Payment Source
  });
}

tailwind.config = {
  theme: {
    extend: {
      colors: {
        oceanPurple: {
          light: '#6746C3',
          DEFAULT: '#311B92',
          dark: '#000063'
        },
        coolGrey: {
          tint: '#DCE5EB',
          light: '#A0B7C2',
          shade: '#242F34'
        },
        error: {
          shade: "#64220E",
          dark: '#A73817',
          DEFAULT: '#DF6741',
          light: '#FF976D',
          tint: '#FFEAE2'
        },
        white: {
          DEFAULT: '#fff'
        }
      }
    }
  }
};