JavaScript Widget
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.The contents of the event objectfunction callback(e) { if (e.success) { alert('Successful COF Request'); } };
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.The contents of the event objectfunction callback(e) { if (e.success) { alert('Successful Payment'); } };
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>
Updated 3 months ago