Secure Checkout buttons (.js)

How to setup and use secure Checkout buttons (QorCharge.js)

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=""></script>

<!-- include a style for the payment button -->
    /* 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;

<!-- include a button tag with options -->
<button id="chkout-btn" class="button pbCharge_open"
    data-name="Demo Store" 
    data-type="checkout">Pay Now (CC)

QorCharge button options

data-action 1
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-returnreturn url for transaction approved results for direct charge (required if data-action is omitted)
data-errorreturn url for transaction error results for direct charge (required if data-action is omitted)
data-nameyour store / merchant name
data-imgimage (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-keythis key identifies your account when communicating with backend
data-idthe merchant id assigned by QorCommerce or your merchant service provider (MSP)
data-trxnidtransaction id of the charge (this is your unique transaction reference) - this is optional
data-orderidorder 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-amntamount of the charge
data-billing 1collect billing details : true/false - default is false
data-zip 2accept zip code while collecting payment details: true/false - default is true for 'checkout', default is false for 'ach'
data-typesupport for additional payment types: checkout (default), ach, donate (donations) - default is checkout
data-blurclose / cancel layover if customer clicks outside of form - default is false
data-effect 1set the overlay effect fade in, slide in: fade, slide - default is fade in


1 - next version - stay tuned
2 - 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)