Custom Javascript in Forms

asked on April 6, 2021

I am trying to interface an online CC processing application with a LF Cloud forms process. The goal is to have a button that shows 'Pay Now' if the end user selects to pay by CC. The button then triggers javascript function code which opens their application in a popup and passes various variables into their fields. I have the onClick button created and the Javascript entered. (I can provide the code if needed.) The problem is the error that appears at the top of the form. (See error message below.) I am pretty new to HTML and Javascript but I did work with the developers of the CC application. I'm also not sure if this is something that can be done without working with the LF developers.

---------------------------------

"\n \n \n \n\n

\n \n

\n \n\n \n

\n\n\n","isRecaptcha":false,"recaptchaSiteKey":"6LcyLkoUAAAAALelAYFEKpMYcMiUD1NHjhjCB79D","isReadOnly":false,"isLocked":false,"isProcessEnabled":true,"isDraftAllowed":false,"actionButtons":{"Submit":"Submit"},"comment":null,"listReadOnlyFields":"F00000001:ASx1hAeM9ezq45OKQ3Dnmc+R9V1Npstngpy6cVjm/9c6fBeeQhc5N808Jw7QXFoSrLk8EOFzgYcF2CkKutxqWizV5pRp31dSBp1CCPZhzBo/oCkq3X2TC5M/osO6O54SuXd8Sy8weixu5j3MoZpi5FdlizYkqFoa6Kpz9L5WHzxaNZsSrhTFtu+KsopkstFOpmZYWhKQZHPflKNUQDztgKk=","readOnlyFieldsTrace":{},"repeatableReadOnlyFieldsSetting":{},"draftInfo":null,"tenantConfigurations":{"uploadFileSizeMaxPerFile":"26214400","formFieldsVariablesLimit":"500","formFieldRulesLimit":"100"},"backendRowCountFromXML":null,"isDraft":false,"submissionId":"ad0200fd-93c6-40f5-a0c9-2f230365fcde","creationLevel":0},"links":{"PublicPortalDraftExists":{"type":"DraftExists","id":"ad0200fd-8949-4e50-b29a-8b1eecb0ac06","self":"http://bpm1.service.consul/bpm/API/a/FormsTask/ad0200fd-8949-4e50-b29a-8b1eecb0ac06/PublicPortalDraftExists"}},"actions":{"FormsInfo":"http://bpm1.service.consul/bpm/API/a/FormsTask/ad0200fd-8949-4e50-b29a-8b1eecb0ac06/FormsInfo"},"self":"http://bpm1.service.consul/bpm/API/a/Forms/Processes/Processes/ad0200fd-8949-4e50-b29a-8b1eecb0ac06/FormsInfo"},"links":{"self":"http://bpm1.service.consul/bpm/API/a/Forms/Processes/Processes/ad0200fd-8949-4e50-b29a-8b1eecb0ac06/FormsInfo"},"linkmap":{}}; LF.isFormPreview = false; if (LF.FormsInfo && LF.FormsInfo.data && LF.FormsInfo.data.props) { LF.FormsInfo = LF.FormsInfo.data.props; } var datetimeformat = 'M/D/YYYY h:mm:ss a'; var dateformat = 'M/D/YYYY'; var userToday = ''; var submissionPageCheck = true; var AnswersInt = AnswersInt || {}; AnswersInt.BaseURI = ''; AnswersInt.Visible = ''; AnswersInt.GroupId = ''; var utcOffset = ''; AnswersInt.Visible = false; LF.isAuthenticated = true; //$('html').addClass('lf-responsive');

--------------------

FromImage.JPG (150.07 KB)

| Download

0 0

replied on April 6, 2021

Ryan,

Are you sure this approach will work? Trying to interact with a form/iFrame that is hosted on another domain is almost assuredly going to throw a cross-origin error in the browser and not be allowed unless the CC form/iFrame uses some type of event listener that allows for that communication.

Can you share which payment vendor you are working with?

1 0

View 2 previous replies

replied on April 6, 2021

Hey Cliff,

Thanks for the reply. I really don't know if it will work. The vendor is SnapPay. Would the payment vendor need to have the event listener and is that security risk?

0 0

replied on April 6, 2021

Yes, the payment vendor would have to support event listener(s) and then provide instructions on how to trap those events in Forms to allow you to securely pass those values. I have not done any research on SnapPay but we are currently going through UAT testing to deploy CardConnect via an iFrame to allow secure credit card processing in Cloud. If you are interested I could post the links to the Card Connect API and iFrame resources that would allow you to do the same thing.

1 0

replied on April 6, 2021

That would be awesome. Thanks again. I figured it would be more than just passing the values. We figured since LF forms would not be passing any CC information, only a dollar amount, account ID, merch ID, customer name, and description of charge. The SnapPay dialogue window would handle the secure connection with the CC information.

0 0

replied on April 8, 2021

Ryan,

Sorry for the delay in responding! Yes, separating Laserfiche from the actual card transaction is vital to limit the PCI risk exposure.

I would assume that you will have to go through the same certification process that we went through to partner with Fiserv. You are welcome to PM me at cprimmer@mpecm.com if you have questions on the process. Here are the links to the Fiserv CardPointe Hosted iFrame Tokenizer, CardPointe API, and developer documentation;

https://developer.cardconnect.com/hosted-iframe-tokenizer

https://developer.cardconnect.com/cardconnect-api?lang=json

https://developer.cardconnect.com/guides/cardpointe-gateway

1 0

replied on April 8, 2021

Perfect. Will do. Thanks again.

0 0

Question

Question

Replies

Sign in to reply to this post.