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=”https://code.jquery.com/jquery-1.12.4.min.js”></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=”https://gateway.switch.tj/ext/checkout/v3/checkout.js” id=”ogcheckout” data-origin=”https://gateway.switch.tj”></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() { 
        $(this).hide();
        $(‘#loader).show();
        var paymentKey = $(this).data('payment-key');
        var paymentType = $(this).data(‘payment-type’);
        eftSec.checkout.settings.checkoutRedirect = true; 
        eftSec.checkout.settings.onload = function () {};
        $('#pay-button').show(); 
        $(‘loader’).hide();
        eftSec.checkout.init({
            paymentKey: paymentKey,
            paymentType: paymentType, // optional: force payment type
        });
    });
}); 
</script>
				
			
On this page