PayCertify Elements
PayCertify.js
is our main JavaScript project to start building your checkout process. The easiest way to get started with Elements. This provides the capability to collect and process sensitive payment data using customizable UI components.
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 card number, expiration, 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 Parameters
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 |