Create the payment form
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>