JavaScript Widget is our embeddable credit card field plugin that allows the merchant to provide a seamless payment experience to a customer without taking the liability of handling or storing sensitive cardholder information. It can be added in a few simple lines of code.

How to implement the Javascript Widget

Include PaidYET's JavaScript library.

<script src="https://cdn.paidyet.com/paynowv5.js"></script>

Create HTML placeholder where you want the credit card fields to appear, then implement a method to trigger the payment processing. A button with an onclick event handler is shown in the following example.
```
<div id="card-element-cof"></div>
<div id="card-errors"></div>
<button onclick="PaidYET.processPayment(callback);">Process</button>
```
Initiate the card fields for a credit card payment. The {paypage subdomain} string should be replaced with the subdomain of your paypage. The JSON settings object is required. Configurable parameters that can be sent with the settings object are listed below.
```
PaidYET.init('{paypage subdomain}');
PaidYET.renderForm(settings);
```
Add a callback function to handle the results. The name of this function should be the same of that which is passed into PaidYET's processPayment` function in step 2 above. The logic and operations within your callback function are dependent on the needs of your implementation.
```
function callback(e) {
  if (e.success) {
    alert('Successful Request');
  }
};
```
The contents of the event object e in the context of your callback function are as follows:
```
{
  success: Boolean,
  token: String, 
  type: String, 
  cc_last4: String
}
```

Sandbox

PaidYET.setSandbox(true);

Settings

This is a JSON object used to configure how the widget works on your page. These settings should be sent in a JSON key value format.

Field	Type	Required	Description	Default
element	string	Yes	The string ID of the HTML element that the credit card form should be inserted into.
mode	string	No	This configured whether the widget will securely tokenize a credit card for processing later or process a sale transaction on the credit card immediately. Possible Values: -sale: Process a sale transaction for a determined amount on the customers credit card. -cardonfile: Securely tokenize a credit card. The unique token can be used to charge the customers credit card at a later time. The token can be sent in via our REST API.	sale
amount	decimal	No	This field is used to send in a default amount that will appear in the credit card form. If the hideamount field is true, this field should be sent to determine the amount charged on the customers credit card. This field is ignored if the mode is cardonfile.
note	string	No	A string value sent along with the credit card transaction. This value will show up in the reports with the transaction.
fname	string	No	First name of the cardholder
lname	string	No	Last name of the cardholder
email	string	No	Email address of the cardholder
hideamount	boolean	No	Hide the amount field from showing on form. If this field is hidden and you are processing a credit card, you will need to send in a default amount using the amountfield.	false
hidenotes	boolean	No	Hide the notes field from showing on the form.	false
hidezip	boolen	No	Hide the zip field from showing on the form. If zip is required and this field is true, use the zip field to send in a value.	false
style	object	No	This is a JSON object used to style the elements of the widget.

Style Object

Field	Description	Example
paddingTop	The amount of empty space at the top of the widget	'7px'
paddingBottom	The amount of empty space at the bottom of the widget	'7px'
paddingLeft	The amount of empty space at the left of the widget	'7px'
paddingRight	The amount of empty space at the right of the widget	'7px'
borderRadius	The amount of rounding on the border corners of the input fields	'7px'
borderWidth	The width of the border around the input fields	'7px'
borderColor	The color in hex code of the border around the input fields	'#ececec'
display	The css display value. (none, inline, block, inline-block, etc)	'inline-block'
boxShadow	The boxshadow css added to all form fields	'inset 0 0 0 0 rgba(10, 10, 46, .161), 0 3px 1px rgba(228, 229, 234, .75)'
Form Fields	The following fields are for styling individual form fields. These are nested JSON objects that can be sent to style the individual field.	Possible elements: borderSize borderColor width maxWidth
cvv	The styling that just pertains to the cvv field.	{ 'borderSize': '3px', 'borderColor': '#ececec', 'width': '80px', 'maxWidth': '80px' }
cardnumber	The styling that just pertains to the cardnumber field.	{ 'borderSize': '3x', 'borderColor': '#ececec' }
cardexp	The styling that just pertains to the cardexp field.	{ 'width': '80px' }
amount	The styling that just pertains to the amount field.	{ 'width': '180px' }
note	The styling that just pertains to the note field.	{ 'borderSize': '8px' }

Example

 
PaidYET.init('demo');
var settings = {
            amount: '1.00',
            element: "card-element-cof",
            hidenotes: true,
            hidezip: false,
						style: {
              paddingTop: '7px',
              paddingBottom: '7px',
              paddingLeft: '7px',
              paddingRight: '7px',
              borderRadius: '2px',
              borderWidth: '7px',
              borderColor: '#efefef',
              cvv: {
                display: 'none',
                paddingTop: '7px',
                paddingBottom: '17px',
                paddingLeft: '17px',
                paddingRight: '17px',
                borderRadius: '12px',
                borderWidth: '17px',
                borderColor: '#32a852',
              }
					}
        };
PaidYET.renderForm(settings);