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="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 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-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 1 | collect billing details : true/false - default is false |
data-zip 2 | 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 1 | set 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.
Updated over 3 years ago