react-payscript
React client for payscript
Installation
Npm
npm install react-payscript --saveYarn
yarn add react-payscriptUMD
<script src="https://unpkg.com/react-payscript@latest/dist/index.js"></script>Usage
Module
import React from 'react';import { Form, Group, Input, CreditCard, Button } from 'react-payscript'; const Example = () => { function onProcessing(e) { console.log("Processing", e); } function onSuccess(e) { console.log("Success", e); } function onError(e) { console.log("Error", e); } return ( <Form apitoken="xxxxxxx-xxxxx-xxxx-xxxx-xxxxxxx" payscripttoken="xxxxxxxxxxxxxxxxxxxxxxxxxx" gateway="xxxxx" onProcessing={onProcessing} onSuccess={onSuccess} onError={onError} styles={{ 'theme': 'ready!' }} > <Group> <CreditCard label="Card" /> <Input label="Name" id="name" placeholder="Card holder's name" required /> </Group> <Group> <Input label="Email" id="email" placeholder="example@email.com" /> <Input label="Phone" id="phone" placeholder="(123) 456-7890" /> <Input label="Street" id="street" placeholder="Card billing street" required /> <Input label="Zip" id="zip" placeholder="Card billing zip code" required /> <Input label="Custom 1" id="custom_1" placeholder="Custom 1" /> <Input label="Long Custom text example" id="custom_2" placeholder="Custom 2" /> </Group> <Button label="PayScript $25" /> </Form> )}; export default Example;UMD
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>React Payscript</title> </head> <body> <main></main> <!-- JSX --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script> <!-- React --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> <!-- React DOM --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> <!-- React-Payscript --> <script src="https://unpkg.com/react-payscript@latest/dist/index.js"></script> <!-- Script --> <script type="text/babel" data-plugins="transform-react-jsx,transform-do-expressions,transform-object-rest-spread" > const { Form, Group, Input, CreditCard, Button } = reactPayscript; class Example extends React.Component { onProcessing(e) { console.log("Processing", e); } onSuccess(e) { console.log("Success", e); } onError(e) { console.log("Error", e); } render() { return ( <Form apitoken="xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx" payscripttoken="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" gateway="xxxxx" onProcessing={this.onProcessing} onSuccess={this.onSuccess} onError={this.onError} styles={{ 'theme': 'ready!' }} > <Group> <CreditCard label="Card" /> <Input label="Name" id="name" placeholder="Card holder's name" required /> </Group> <Group> <Input label="Email" id="email" placeholder="example@email.com" /> <Input label="Phone" id="phone" placeholder="(123) 456-7890" /> <Input label="Street" id="street" placeholder="Card billing street" required /> <Input label="Zip" id="zip" placeholder="Card billing zip code" required /> <Input label="Custom 1" id="custom_1" placeholder="Custom 1" /> <Input label="Long Custom text example" id="custom_2" placeholder="Custom 2" /> </Group> <Button label="PayScript $25" /> </Form> ); } } ReactDOM.render(<Example />,document.querySelector("main")); </script> </body></html>Options
Form
- apitoken: string
- payscripttoken: string
- gateway: string
- onProcessing: function
- onSuccess: function
- onError: function
- styles: json
Group
- No params
Input
- label: string
- id: string !important
- placeholder: string
- required: boolean
CreditCard
- label: string
Button
- label: string
Conventional
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>React Payscript</title> </head> <body> <main></main> <!-- JSX --> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script> <!-- React --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js"></script> <!-- React DOM --> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js"></script> <!-- Payscript --> <script type="text/babel" data-plugins="transform-react-jsx,transform-do-expressions,transform-object-rest-spread" > class Example extends React.Component { constructor(props) { super(props) this.onProcessingCallback = this.onProcessingCallback.bind(this); this.hostRequest = this.hostRequest.bind(this); this.onSuccessCallback = this.onSuccessCallback.bind(this); this.onErrorCallback = this.onErrorCallback.bind(this); this.onFieldError = this.onFieldError.bind(this); } onProcessingCallback(e) { console.log("Processing") } onSuccessCallback(e) { console.log("Success") console.log(e) /* Example - uncomment to assign payscript card token and session token to variables */ const TcToken = e.detail.cardToken const SStoken =e.detail.sessionToken /* Example - uncomment to invoke function to process the card with the card token and session token properties */ this.hostRequest(TcToken, SStoken) } onErrorCallback(e) { console.log("Error") console.log(e.detail) } onFieldError(e) { console.log(e); } hostRequest(TcToken, SStoke) { /* EXAMPLE uncomment this var data for a one-time credit card sale and store customer card. NOTE: cardholder name field must be present and required on form. */ var data = "ResponseType=json&storecard=1&TransType=Sale&CardToken="+ TcToken +"&SessionToken=" + SStoken + "&apitoken=" + apitoken + "&amount=1.11" /* EXAMPLE uncomment to send the request data to the payment gateway for processing */ let http = new XMLHttpRequest(); let url = 'http://localhost:8090/ws/encgateway2.asmx/ProcessCreditCard'; http.open("POST", url, true); /* EXAMPLE - Send the proper header information along with the request */ http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); http.send(data); http.onreadystatechange = function() { if (http.readyState === 4) { if (http.status === 200) { alert(http.responseText) payScript.removeForm(); payScript.setContent("<h3> create your custom content here! </h3>"); } else { console.log('failed'); alert(http.responseText) } } } } componentWillMount(){ const script = document.createElement("script"); script.src = "http://localhost:8090/public/payscript.js"; script.async = true; document.body.appendChild(script); } componentDidMount() { var apitoken = null; window.onload = function () { /* these are the Payscript callbacks */ payScript.onProcessing = this.onProcessingCallback; payScript.onSuccess = this.onSuccessCallback; payScript.onError = this.onErrorCallback; var fieldStyles = 'payscript-field'; /*CREDIT CARD FIELDS */ payScript.addField('payscript_field_cardNumber', 'cardNumber', 'credit-card-input payscript-card-input', true, this.onFieldError, 'Card Number'); payScript.addField('payscript_field_cardExpire', 'cardExpire', fieldStyles, true, this.onFieldError, 'MM/YY'); payScript.addField('payscript_field_cardholderName', 'cardholderName', fieldStyles, false, this.onFieldError, 'Card Holder'); payScript.addField('payscript_field_cardVerification', 'cardVerification', fieldStyles, false, this.onFieldError, 'CVV'); payScript.addField('payscript_field_cardZip', 'cardZip', fieldStyles, false, this.onFieldError, 'Card billing zip code'); payScript.addField('payscript_field_cardStreet', 'cardStreet', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_cardStreet2', 'cardStreet2', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_cardCity', 'cardCity', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_cardState', 'cardState', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_cardCountry', 'cardCountry', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_email', 'cardEmail', 'payscript-field', false, this.onFieldError, 'Email address'); /*END CREDIT CART FIELDS */ /*CUSTOMER FIELDS */ payScript.addField('payscript_field_custStatus', 'custStatus', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custFirstName', 'custFirstName', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custLastName', 'custLastName', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custEmail', 'custEmail', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custTitle', 'custTitle', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custCompany', 'custCompany', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custDepartment', 'custDepartment', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custStreet1', 'custStreet1', fieldStyles, false, this.onFieldError, 'Card Address'); payScript.addField('payscript_field_custStreet2', 'custStreet2', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custCity', 'custCity', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custState', 'custState', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custZip', 'custZip', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custCountry', 'custCountry', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custMobilePhone', 'custMobilePhone', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custDayPhone', 'custDayPhone', fieldStyles, false, this.onFieldError, '(123) 456-7890'); payScript.addField('payscript_field_custNightPhone', 'custNightPhone', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custFax', 'custFax', fieldStyles, false, this.onFieldError); payScript.addField('payscript_field_custDob', 'custDob', fieldStyles, false, this.onFieldError, 'j'); payScript.addField('payscript_field_custSsn', 'custSsn', fieldStyles, false, this.onFieldError, 'k'); payScript.addField('payscript_field_custDln', 'custDln', fieldStyles, false, this.onFieldError, 'l'); payScript.addField('payscript_field_custDlnSt', 'custDlnSt', fieldStyles, false, this.onFieldError, 'm'); /*END CUSTOMER FIELDS */ /*CHECK FIELDS */ payScript.addField('payscript_field_checkAccount', 'checkAccount', fieldStyles, false, this.onFieldError, 'a'); payScript.addField('payscript_field_checkRouting', 'checkRouting', fieldStyles, false, this.onFieldError, 'b'); payScript.addField('payscript_field_checkAccountType', 'checkAccountType', fieldStyles, false, this.onFieldError, 'c'); payScript.addField('payscript_field_checkAccountKind', 'checkAccountKind', fieldStyles, false, this.onFieldError, 'd'); payScript.addField('payscript_field_checkOwnerName', 'checkOwnerName', fieldStyles, false, this.onFieldError, 'e'); payScript.addField('payscript_field_checkBankCity', 'checkBankCity', fieldStyles, false, this.onFieldError, 'f'); payScript.addField('payscript_field_checkMICR', 'checkMICR', fieldStyles, false, this.onFieldError, 'g'); payScript.addField('payscript_field_checkRawMicr', 'checkRawMicr', fieldStyles, false, this.onFieldError, 'h'); payScript.addField('payscript_field_checkNumber', 'checkNumber', fieldStyles, false, this.onFieldError, 'i'); payScript.addField('payscript_field_custStatus', 'custStatus', fieldStyles, false, this.onFieldError, 'estatus') /*END CHECK FIELDS */ /*CUSTOM FIELDS */ payScript.addField('payscript_field_custom1', 'meta', fieldStyles, false, this.onFieldError, "Mothers Name"); payScript.addField('payscript_field_custom2', 'meta', fieldStyles, false, this.onFieldError, "Fathers Name"); /*END CUSTOM FIELDS */ payScript.addStyle('http://smarttec.com.do/payscript/public/leo.css'); /* these are the unique tokens for this Payscript instance. Do not modify */ apitoken = '56B73FDC-8857-1B35-A24A-C565F24F6EAA'; var payscripttoken = 'ed1efeeb3847e623088702d25ad6121ed8415fa7'; var gateway = '10001'; var vendor = '706' payScript.init(gateway, apitoken, payscripttoken, vendor); }; } render() { return ( <form id="payscript_form"> <div className="payscript-container"> <div className="payscript-box"> <div className="_1tu41si"> <div className="payscript-group"> <div className="payscript-credit-card"> <label className="payscript-label"> <span>Card</span> <div className="payscript-card-container sc-bdVaJa ixTfPP"> <div className="payscript-card-field sc-bwzfXH iaLzsl" id="field-wrapper"> <img className="payscript-card-image sc-htpNat dcxtLi" src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNTc2IDM3NyIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5wbGFjZWhvbGRlcjwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9InBsYWNlaG9sZGVyIj4gICAgICAgICAgICA8cGF0aCBkPSJNNTI3LjkzMzc5MywzNzYuOTk4MjggTDQ4LjA2NjIwNjksMzc2Ljk5ODI4IEMzNS40MjM0ODAzLDM3Ny4xMDM5NjggMjMuMjU2NTg2NCwzNzIuMTg3ODkgMTQuMjQyMzI4MSwzNjMuMzMxNjE4IEM1LjIyODA2OTc1LDM1NC40NzUzNDYgMC4xMDQ5MTcxMDIsMzQyLjQwNDQwNyAwLDMyOS43NzQ0OTQgTDAsNDcuMjI1NDU1NCBDMC4xMDQ5MTcxMDIsMzQuNTk1NTQyNSA1LjIyODA2OTc1LDIyLjUyNDYwNCAxNC4yNDIzMjgxLDEzLjY2ODMzMTkgQzIzLjI1NjU4NjQsNC44MTIwNTk4NSAzNS40MjM0ODAzLC0wLjEwNDAxODI5NiA0OC4wNjYyMDY5LDAuMDAxNjY5NDg2NDYgTDUyNy45MzM3OTMsMC4wMDE2Njk0ODY0NiBDNTQwLjU3NjUyLC0wLjEwNDAxODI5NiA1NTIuNzQzNDE0LDQuODEyMDU5ODUgNTYxLjc1NzY3MiwxMy42NjgzMzE5IEM1NzAuNzcxOTMsMjIuNTI0NjA0IDU3NS44OTUwODMsMzQuNTk1NTQyNSA1NzYsNDcuMjI1NDU1NCBMNTc2LDMyOS45NzI5MTMgQzU3NS42NzI3ODYsMzU2LjE5NTY2MyA1NTQuMTg0MjczLDM3Ny4yMTg4NTcgNTI3LjkzMzc5MywzNzYuOTk4MjggWiIgaWQ9InNoYXBlIiBmaWxsPSIjRThFQkVFIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBzdHJva2U9IiM3NTc1NzUiIHN0cm9rZS13aWR0aD0iMjAiIHg9IjQxOCIgeT0iNTgiIHdpZHRoPSI5MSIgaGVpZ2h0PSI2MyIgcng9IjMwIj48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSI1MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzc1NzU3NSIgeD0iNDEzIiB5PSIyMDgiIHdpZHRoPSIxMDciIGhlaWdodD0iNDAiIHJ4PSI4Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjNzU3NTc1IiB4PSIyOTMiIHk9IjIwOCIgd2lkdGg9IjEwNyIgaGVpZ2h0PSI0MCIgcng9IjgiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiM3NTc1NzUiIHg9IjE3MyIgeT0iMjA4IiB3aWR0aD0iMTA3IiBoZWlnaHQ9IjQwIiByeD0iOCI+PC9yZWN0PiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+" /> <label className="sc-bxivhb lifJiC" data-max="9999 9999 9999 9999 9999"> <div id="payscript_field_cardNumber" /> </label> </div> </div> </label> </div> <label className="payscript-label"> <span>Expiration</span> <div id="payscript_field_cardExpire" /> </label> <label className="payscript-label"> <span>CVV</span> <div id="payscript_field_cardVerification" /> </label> <label className="payscript-label"> <span>Name</span> <div id="payscript_field_cardholderName" /> </label> </div> <div className="payscript-group"> <label className="payscript-label"> <span>Email</span> <div id="payscript_field_email" /> </label> <label className="payscript-label"> <span>Phone</span> <div id="payscript_field_custDayPhone" /> </label> <label className="payscript-label"> <span>Street</span> <div id="payscript_field_custStreet1" /> </label> <label className="payscript-label"> <span>Zip</span> <div id="payscript_field_cardZip" /> </label> <label className="payscript-label"> <span>Custom 1</span> <div id="payscript_field_custom1" /> </label> <label className="payscript-label"> <span>Long Custom text example</span> <div id="payscript_field_custom2" /> </label> <label className="payscript-label"> <span> payscript_field_checkAccount </span> <div id="payscript_field_checkAccount" /> </label> <label className="payscript-label"> <span> payscript_field_checkRouting </span> <div id="payscript_field_checkRouting" /> </label> <label className="payscript-label"> <span> payscript_field_checkAccountType </span> <div id="payscript_field_checkAccountType" /> </label> <label className="payscript-label"> <span> payscript_field_checkAccountKind </span> <div id="payscript_field_checkAccountKind" /> </label> <label className="payscript-label"> <span> payscript_field_checkOwnerName </span> <div id="payscript_field_checkOwnerName" /> </label> <label className="payscript-label"> <span> payscript_field_checkBankCity </span> <div id="payscript_field_checkBankCity" /> </label> <label className="payscript-label"> <span> payscript_field_checkMICR </span> <div id="payscript_field_checkMICR" /> </label> <label className="payscript-label"> <span> payscript_field_checkRawMicr </span> <div id="payscript_field_checkRawMicr" /> </label> <label className="payscript-label"> <span> payscript_field_checkNumber </span> <div id="payscript_field_checkNumber" /> </label> <label className="payscript-label"> <span> payscript_field_custDob </span> <div id="payscript_field_custDob" /> </label> <label className="payscript-label"> <span> payscript_field_custSsn </span> <div id="payscript_field_custSsn" /> </label> <label className="payscript-label"> <span> payscript_field_custDln </span> <div id="payscript_field_custDln" /> </label> <label className="payscript-label"> <span> payscript_field_custDlnSt </span> <div id="payscript_field_custDlnSt" /> </label> <label className="payscript-label"> <span> payscript_field_custStatus </span> <div id="payscript_field_custStatus" /> </label> </div> <div className="payscript-pay-content"> <div className="payscript-outcome"> <div className="payscript-error _xqnadn"> <div className="payscript-error-item alert-payscipt" id="error-payscript"> </div> </div> </div> <button className="payscript-button" id="payscript_submit" type="button">Submit</button> </div> </div> </div> </div> </form> ) } } ReactDOM.render(<Example />,document.querySelector("main")); </script> </body></html>Result
License
MIT © PAYSCRIPT