# Getting Started

# Set up Poynt Collect

  1. Include the Poynt Collect script on your page by doing this
<script
  type="text/javascript"
  src="https://poynt.net/snippet/poynt-collect/bundle.js"
  async
  defer
></script>
1
2
3
4
5
6

or this

<script>
  const poyntCollect = document.createElement("script");
  poyntCollect.src = "https://poynt.net/snippet/poynt-collect/bundle.js";
  poyntCollect.async = true;
  poyntCollect.onload = () => {
    // put the upcoming collect initialization steps and create transaction steps here
  };
  document.head && document.head.appendChild(poyntCollect);
</script>
1
2
3
4
5
6
7
8
9
  1. Create an instance of Poynt Collect with the following Javascript (You can find the api-key under Business Profile in Poynt HQ)
var collect = new PoyntCollect("<api-key>", "<applicationId>");
1
  1. To add the credit card form to you page, create an empty DOM container with a unique ID and pass the ID to poynt collect For example:
<html>
  <head></head>
  <body>
    <div id="card-element">
      <!-- Credit card form iFrame will be inserted here -->
    </div>
    <button>Pay</button>
  </body>
</html>
1
2
3
4
5
6
7
8
9
  1. Once your page has loaded, use your PoyntCollect instance to mount the iFrame to your container
collect.mount("card-element", document, options);
1

# Create a Transaction

​ To process a transaction directly use this flow. ​ Add an event listener for when your customer clicks your submit button and use collect.createTransaction to create a transaction with the amount specified ​

var button = document.querySelector("button");
button.addEventListener("click", event => {
  event.preventDefault();
  collect.createTransaction({
    amount: 1050
  });
});
1
2
3
4
5
6
7

# Create a Token

​ To create a token and store it for later use ​

var button = document.querySelector("button");
button.addEventListener("click", event => {	
  event.preventDefault();
  collect.createToken();
});
1
2
3
4
5

# Methods

# collect.mount Parameters

  • domElementId (string): string referencing DOM element where the payment form is added by Poynt
  • document
  • options (object): options for customization of payment form ​ An example of the options object: ​
    const options = {
          iFrame: {
          width: "500px",
          // height: "400px",
          border: "1px",
          borderRadius: "4px",
          boxShadow: "0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08)"
        },
        style: {
          theme: "default", // basic default theme,
          // theme: "customer", (alternative default theme)
        },
        displayComponents: {
          firstName: false, // toggle these to true if you wish to show the forms
          lastName: false,
          emailAddress: false,
          submitButton: false, 
          showEndingPage: true // controls ending page,
          labels: false 
        }, 
        fields: {
          emailAddress: customerEmail,
          firstName: firstName,
          lastName: lastName
         },
         additionalFieldsToValidate: ["firstName", "lastName", "zip"] // which fields to validate,
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27

# Passing in custom css

Say you would like to pass in custom css values over using default. Below is an example of what you can configure and play around with. ​ Poynt collect uses a library called react-payment-inputs found here: ​ https://github.com/medipass/react-payment-inputs#styles

const options = {
  amount: 2000, // just hardcode amount to 123 for now
  customCSS: {
  iFrame: {
    width: "397px",
    height: "150px",
    border: "0"
  },
  fieldWrapper: {
    base: `margin-bottom: 1rem;`
  },
  inputWrapper: {
    base: `
      border-color: green;
    `,
    errored: `
      border-color: maroon;
    `,
    focused: `
      border-color: unset;
      box-shadow: unset;
      outline: 1px solid blue;
      outline-offset: 0px;
    `
  },
  input: {
    base: `
      color: green;
    `,
    errored: `
      color: maroon;
    `,
    cardNumber: `
      font-family: Roboto, Open Sans, Segoe UI, sans-serif;
      width: 17rem;
    `,
    expiryDate: `
      font-family: Roboto, Open Sans, Segoe UI, sans-serif;
      text-transform: uppercase;
      width: 5rem;
    `,
    cvc: `
      font-family: Roboto, Open Sans, Segoe UI, sans-serif;
      width: 3rem;
    `
  },
  errorText: {
    base: `
      color: maroon;
      position: absolute;
      margin-top: 60px;
      margin-left: 5px;
      font-family: Roboto, Open Sans, Segoe UI, sans-serif;
    `
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

# collect.createTransaction

  • amount (Number): the total amount in cents to be charged.
  • emailAddress (string): if you want to collect the email outside of our iFrame, pass it in here

To get the transaction returned from collect.createTransaction, refer to event listeners

# collect.createToken

Call this method to exchange the card details for a token.

To get the token returned from collect.createToken, refer to event listeners

# Event Listeners

# ready

To guarantee that Poynt Collect is ready, listen to this event

collect.on("ready", event => {
  // handle ready event, proceed.
});
1
2
3

# transaction_created

To add an event listener for the returned transaction data

collect.on("transaction_created", function(transaction) {
  // your process for storing or saving the transaction data
});
1
2
3

# transaction_declined

To add an event listener for the declined transactions

collect.on("transaction_declined", function(transaction) {
  // your process for handling declines
});
1
2
3

# token

To add an event listener for the token data after calling createToken

collect.on("token", function(token) {
	// save this token for future use
});
1
2
3

# error

To add a listener to get notified for any errors on the form

collect.on("error", event => {
  // handle error event
});
1
2
3
Last Update: 8/25/2020, 6:04:43 PM