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.

Card On File Request

In order to use PaidYET's secure card widget to get a card on file, you will need to follow these steps:

  1. Include PaidYET's JavaScript library.
    <script src="https://cdn.paidyet.com/paynowv3.js"></script>
    
  2. 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>
    
  3. 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');
    
  4. 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
    }
    

Credit Card Payment

To use PaidYET’s secure card widget to receive a payment, you will need to follow these steps:

  1. Include PaidYET's JavaScript library.
    <script src="https://cdn.paidyet.com/paynowv3.js"></script>
    
  2. 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>
    
  3. 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-cof');
    
  4. 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
    }