JavaScript Widget is our embeddable JavaScript 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.

Option 1: Card On File Widget

This option is used to obtain a secure credit card token to be sent in via the API at a later time. This option does not process the payment immediately.

Include PaidYET's JavaScript library.

<script src="https://cdn.paidyet.com/paynowv3.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.
```
PaidYET.init('{paypage subdomain}');
PaidYET.renderCOFForm('card-element-cof');
```
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 COF 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
}
```

Optional Data Attributes

To send the email address along to save the card on file you can add a data attribute to the html element that you are using to render the JavaScript widget.

<div id="card-element-cof" data-email="[email protected]"></div>

Option2: Credit Card Payment Widget

This option is used to securely process a credit card payment immediately.

Include PaidYET's JavaScript library.

<script src="https://cdn.paidyet.com/paynowv3.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"></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.
```
PaidYET.init('{paypage subdomain}');
PaidYET.renderForm('card-element');
```
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 Payment');
  }
};
```
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
}
```

Optional Data Attributes

Default Notes Field Value:

To set a default value in the notes field you can add a data attribute to the html element that you are using to render the JavaScript widget.

<div id="card-element" data-note="This is a note about this transaction."></div>

Default Amount Field Value:

To set a default value in the amount field you can add a data attribute to the html element that you are using to render the JavaScript widget.

<div id="card-element" data-amount="1234.56"></div>

Hide Notes Field:

To hide the notes field add a data attribute to the html element that you are using to render the JavaScript widget.

<div id="card-element" data-hidenotes=true></div>

Render Amount Read Only

To make the amount field read only. Set the data attribute amountreadonly to the amount you want to charge in on the element you are using to render the JavaScript widget.

<div id="card-element" data-amountreadonly=1234.56></div>