Why our secure Checkout buttons (QorCharge.js)?

QorCharge provides flexible payment field forms that can be easily placed on a merchant’s site or ISV's application site to accept secure payments and achieve PCI SAQ-A eligibility. This can be accomplished in minutes by adding the custom code to a merchant’s payment page. Using a combination of javascript and iFrames QorCharge manages, controls and validates unique form tokens, session tokens, and card tokens to ensure the security and integrity of the customer’s card data and transaction processing.

QorCharge Session Tokens

QorCharge.js uses a combination of unique form identifiers and session tokens that are generated when a payment page is loaded for the client. These tokens are stored with the temporary QorCharge card token when it is created and are authenticated by our platform prior to processing the actual card data held in our temporary storage. Any transaction request sent to our platform where the card token is used as a replacement for the actual card data must include the session token.

Setup and Configuration

<!-- include qor-charge.js -->
<script src="https://secure.qorcommerce.io/qorCharge/qor-charge.js"></script>

<!-- include a style for the payment button -->
<style>
    /* Custom style for payment button */
    .button {
      background-color: #4CAF50; /* Green */
      border: none;
      border-radius: 7px;
      color: white;
      padding: 12px 25px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
    }
</style>

<!-- include a button tag with options -->
<button id="chkout-btn" class="button pbCharge_open"
    data-name="Demo Store" 
    data-img="https://secure.qorcommerce.io/qorCharge/imgs/storefront.png"
    data-key="01dffeb784c64d098c8c691ea589eb82" 
    data-id="887728202" 
    data-trxnid="" 
    data-amnt="15.99"
    data-type="checkout">Pay Now (CC)
</button>

QorCharge button options

parameter	description
data-action ¹	make sure that the form submits to your own server-side code - this is optional, for if you omit this attribute this will create a charge directly
data-return	return url for transaction approved results for direct charge (required if data-action is omitted)
data-error	return url for transaction error results for direct charge (required if data-action is omitted)
data-name	your store / merchant name
data-img	image (128x128) to be used at top of form for checkout and ach - you can pass a URI to your image (https://...) or a base64 img (ex. data:image/png;base64,iVBORw...)
data-key	this key identifies your account when communicating with backend
data-id	the merchant id assigned by QorCommerce or your merchant service provider (MSP)
data-trxnid	transaction id of the charge (this is your unique transaction reference) - this is optional
data-orderid	order id of the charge (this is your order id reference) - this is optional, for if you omit this attribute an order id will be generated for you and returned in the result
data-amnt	amount of the charge
data-billing ¹	collect billing details : true/false - default is false
data-zip ²	accept zip code while collecting payment details: true/false - default is true for 'checkout', default is false for 'ach'
data-type	support for additional payment types: checkout (default), ach, donate (donations) - default is checkout
data-blur	close / cancel layover if customer clicks outside of form - default is false
data-effect ¹	set the overlay effect fade in, slide in: fade, slide - default is fade in

📘
¹ - next version - stay tuned
² - zip collection is required for CNP transactions, unless approved

Here are some payment button examples you may want to use, you can easily copy and paste any of these into your site or payment forms. You may also just style a button with these ideas.

Donate Now

Pay Now (ACH)

Pay Now (CC)