Create the payment form

Author: Semaka 102 views

To create the payment form you just need to add the following lines of HTML/JavaScript to your page and populating the following variables. This integration method allows you to host Credit Card payments on your own website/platform and still descope you from PCI compliance.

NB: A SSL certificate is required to ensure compatibility with the frame. First you will need to create a Payment key. This will be used by the widget to authenticate the payment in the frame.
NB: When creating a payment key you must specify the redirect success and error urls, if not. You will need to copy a code snippet (see example below) onto your page which will invoke a checkout widget.

Javascript Libraries

					<!– If you do not already use jQuery include it –>
<script type=”text/javascript” src=””></script>
<!– The data-origin attribute value is the origin value returned from the payment key API call –>
<!– Also ensure that the id attribute is set to og-checkout –>
<script type=”text/javascript” src=”” id=”ogcheckout” data-origin=””></script>

HTML payment buttons

					<form id="#payment-form" action="/checkout?confirm=1" style="margin-top: 50px"> <div class="text-center">
<button id="pay-button" class="btn btn-primary btn-sx" type="button" data-payment- key="{{paymentKey}}" data-payment-type=”credit_card”>Credit Card</button>
<button id="pay-button" class="btn btn-primary btn-sx" type="button" data-payment- key="{{paymentKey}}" data-payment-type=”credit_card”>EFT Secure</button>
</div> </form>

Javascript to load form

					<script type="text/javascript"> 
$(function() {
    $('#pay-button').on('click', function() { 
        var paymentKey = $(this).data('payment-key');
        var paymentType = $(this).data(‘payment-type’);
        eftSec.checkout.settings.checkoutRedirect = true; 
        eftSec.checkout.settings.onload = function () {};
            paymentKey: paymentKey,
            paymentType: paymentType, // optional: force payment type
On this page