payvida-calculator-widget
v1.5.0
Published
react-payscript
Downloads
8
Maintainers
tomasgonzalezKeywords
Readme
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="[email protected]" />
<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="[email protected]" />
<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