Securely accept payment methods

This tutorial documents the step-by-step process of saving a payment method by:

1. Accessing/documenting the GET /payments/credit-card-iframe-url endpoint to retrieve the payments frame.
2. Documenting the process of using the ID retrieved in Step 1 to access and save the credit card via the POST /payment-methods/credit-card endpoint.

Retrieve the payments iframe

The first step is to get an authentication token, to do this follow the Authentication Tutorial.

Example Request:

GET /payments/credit-card-iframe-url?buttonTextColor=000000&buttonBackgroundColor=ffffff&inputUnderlineColor=ffffff

Example Response:

{
  "data": {
    "url": "https://dev10.clubautomation.com/i4go/user-card-form?ca_token=d8ff8db6f222d06b59cc5339761c8b0acf2035e1&button_bgcolor=ffffff&button_textcolor=000000"
  },
  "success": true,
  "error": null,
  "formErrors": null
}

Setup:

The response URL will need to be loaded into its own HTML iframe of the parent page and the resulting form data consumed with a postMessage data packet. This allows safe cross-site communication and a more unified user experience than opening the URL in a new window. (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage)

To do this you will need two steps:

1. Embed an iframe in the page to hold the content of the URL in the API response. The iframe can be added dynamically when the API request completes. Consider styling the iframe to look like a modal dialog window when it becomes visible. See Example below

   

   Things to note

   • Be aware that you must set an additional parameter to that url: parentUrl
   • parentUrl must be the full url of your page including parameters
   • Example: https://customer.com/signup?name=tom&state=CA

   function addIframe() {
     const iframe = document.createElement('iframe')
     iframe.setAttribute(
       'src',
       IFRAMEURL + '&parentUrl=' + window.location.href
     )
     const iframeParent = document.querySelector('#IFRAME CONTAINER') // your iframe container element element ID here
     iframeParent.appendChild(iframe)
   }

2. Create a function that will process the data sent through postMessage after a user has submitted their credit card information in the iframe.

   • We suggest you do a few things for security purposes
   • Verify the domain of the message is clubautomation.com (In the example below this is done on line 5, make sure to replace the http://XYZ.clubautomation.com with your Club Automation URL.)
   • Verify the data is the type you expect i.e. that the response is Success(In the example below this is done on line 9.)

   function assignListeners() {
     window.addEventListener(
       'message',
       function(event) {
         if (event.origin !== 'http://XYZ.clubautomation.com') {
           return
         }
         var data = event.data
         if (data.i4go_response === 'SUCCESS') {
           window.messageReceived = true
           //USE DATA HERE
         }
       },
       false
     )
   }

   Data from above has the information needed for the rest of the APIs. i4go_uniqueid, cc_number, i4go_expirationyear, and i4go_expirationmonth. Those will be used as i4goUniqueId, maskedCardNumber, cardExpirationYear, and cardExpirationMonth