PayCertify Elements

PayCertify.js is our main JavScript project to start building your checkout process. The easiest way to get started is with Elements, that provides the capability to collect and process sensitive payment data using customizable UI components. Because all sensitive information is handled by PayCertify.js, it features simple PCI compliance.

Elements includes features like:

  • Uses responsive design
  • Card data formatting out-of-the-box
  • Fully customizable styling

Card Element

The Card Element lets you grab card information all within one Element. It includes inputs for number, expiry, CVC, and postal code.

<h1>PayCertify Elements</h1>

<form id="payment-form" action="/action" method="post">
  <div id="container"></div>
</form>
<script src='https://js.paycertify.com/paywith/v1/paycertify.js'></script>
// instanciate the PayCertify plugin
const paywith = PayCertify('064BDCCB1F7A8835A468081753A633CA0B679FBC');

// create the elements instance
const elements = paywith.elements();

// You can override the default styling by passing a `style` object
// to the card element during its creating
const style = {
  button: {
    color: 'red'
  }
};

// create a element of type card and pass the amount to be charged
// you can find the whole list of accepted parameters here
const cardElement = elements.create('card', { style: style }, { amount: 10 });

// mount the card into a element with #container and
// stores its reference on a variable
const cardData = cardElement.mount('#container');

// handle the form subimission
const paymentForm = document.getElementById('payment-form');
paymentForm.addEventListener('submit', async function(event) {
  event.preventDefault();

  try {

    // create a payment using the data provided
    // on the card element
    const result = await paywith.charges.create(cardData)

    // handle the result
    // check the response data here
    if(result.success) {
      //do whatever you need with the result
      paymentForm.submit();
    }
  } catch (err) {
    // handle here the validation error.
    console.error('err', err);
  }

});

Card Element Paramenters

Parameter Type Length Presence Description Example
amount number 0.01-9999999 Required Total transaction amount 3.56
transaction_id string 1-255 Required A merchant assigned identifier (your transaction ID) my-order-id-0001
first_name string 1-255 Conditional[3] Customer’s first name John
last_name string 1-255 Conditional[3] Customer’s last name Doe
email string 1-255 Optional Customer’s email [email protected]
mobile_phone string 11-15 Optional Customer’s phone in E.164 format +11231231234
street_address_1 string 1-255 Optional Billing address first line (street address) 59 N Santa Cruz Avenue
street_address_2 string 1-255 Optional Billing address second line (suite, apt, etc) Suite M
city string 1-255 Optional Billing address city Los Gatos
state string 2 Optional Billing address state abbreviation, ISO 3166-2 format. CA
country string 2 Optional Billing address country abbreviation, ISO 3166-1 alpha-2 format. US
zip string 2-255 Optional Billing address postal code 95030
shipping_street_address_1 string 1-255 Optional Shipping address first line (street address) 59 N Santa Cruz Avenue
shipping_street_address_2 string 1-255 Optional Shipping address second line (suite, apt, etc) Suite M
shipping_city string 1-255 Optional Shipping address city Los Gatos
shipping_state string 2 Optional Shipping address state abbreviation, ISO 3166-2 format. CA
shipping_country string 2 Optional Shipping address country abbreviation, in ISO 3166-1 alpha-2 format. US
shipping_zip string 2-255 Optional Shipping address postal code 95030

Response Fields

Parameter Type Length Description Example
transaction.id uuid 36 This transaction’s ID 41f00869-d7b3-413e-9476-9ef1a8bc2f28
transaction.merchant_id uuid 36 The user’s merchant ID 41f00869-d7b3-413e-9476-9ef1a8bc2f28
transaction.user_id uuid 36 The user’s ID 41f00869-d7b3-413e-9476-9ef1a8bc2f28
transaction.processor_id uuid 36 The processor’s ID 41f00869-d7b3-413e-9476-9ef1a8bc2f28
transaction.merchant_transaction_id string 1-255 The merchant assigned identifier my-order-id-0001
transaction.updated_at datetime - Last time this transaction was updated, on ISO 8601 UTC 2018-02-16T16:33:40+00:00
transaction.created_at datetime - Time that transaction was created, on ISO 8601 UTC 2018-02-16T16:33:40+00:00
transaction.events[].id uuid 36 This event’s ID 41f00869-d7b3-413e-9476-9ef1a8bc2f28
transaction.events[].success boolean - If the event was a successful event or not true
transaction.events[].event_type string 4-10 The type of event being performed auth, capture, sale, void, refund
transaction.events[].amount number 0.01-9999999 Total event amount 3.56
transaction.events[].processor_code string 2-10 The processor response code 00
transaction.events[].processor_message string 1-255 A human readable message from the processor APPROVAL V12341
transaction.events[].processor_transaction_id string 1-255 A processor assigned identifier 00000000143242
transaction.events[].updated_at datetime - Last time this event was updated, on ISO 8601 UTC 2018-02-16T16:33:40+00:00
transaction.events[].created_at datetime - Time that event was created, on ISO 8601 UTC 2018-02-16T16:33:40+00:00