The aim of the library to start accepting payments using iframe integrated to a merchant site.
There are 3 simple steps required to setup the payment form at your website.
Refer to beGateway API or API of your payment service processor how to acquire a payment token.
Simply it can be done with cURL but you are free to use beGateway PHP or Ruby libraries.
curl https://checkout.begateway.com/ctp/api/checkouts \
-u 361:b8647b68898b084b836474ed8d61ffe117c9a01168d867f24953b776ddcb134d \
-H 'Content-type: application/json' \
-d '
{
"checkout": {
"order": {
"amount": 500,
"currency": "EUR",
"description": "Demo payment"
},
"settings": {
"customer_fields": {
"hidden": [
"address"
],
"read_only": []
},
"language": "en",
"decline_url": "http://www.example.com/decline",
"fail_url": "http://www.example.com/fail",
"notification_url": "http://www.example.com/notify",
"success_url": "http://www.example.com/success"
},
"transaction_type": "payment"
}
}
'beGateway resonds with JSON message like:
{
"checkout": {
"redirect_url": "https://checkout.begateway.com/checkout?token=2dace3c57d96d64a0026364c7bd26c627e7a96d8fef8e129d45b2ebd2864db1c",
"token": "2dace3c57d96d64a0026364c7bd26c627e7a96d8fef8e129d45b2ebd2864db1c"
}
}Now you will add the following JavaScript/HTML lines of code to your page and populate the variables as follows:
type- iframe type:inlineoroverlayid- element id where to stick to show an inline iframe or bring up an overlay one when the element is clickedurl- a value of theredirect_urlvariable in a JSON response from the step 1style- optional CSS to pass to iframe. You can re-define any CSS class of iframe and design the payment form in own style. Example:style: ".shop-name { display:none; } body#iframe #request .submit-button { background-color: white; }"size- optional iframe window size{width} X {height}. By default 320px X 480px
<script type="text/javascript" src="https://js.begateway.com/begateway-1-latest.min.js"></script>
<script type="text/javascript">
var options = {
type: '{type}',
id: '{element id}',
url: "{redirect_url}",
style: "{css}",
size: { width: {width}, height: {height} }
}
var pf = new BeGateway(options);
pf.buildForm();
</script>Now let's see it in action. Here is a HTML example where iframe is overlay:
<!DOCTYPE html>
<html>
<head>
<title>Overlay iFrame payment form</title>
<script type="text/javascript" src="https://js.begateway.com/begateway-1-latest.min.js"></script>
</head>
<body style="width: 70%; margin: 10px auto;">
<h1>Test shop</h1>
<p>
T-Shirt 5 EUR
</p>
<a href="#" id="paymentLink">Buy it</a>
<script type="text/javascript">
var options = {
type: 'overlay',
id: 'paymentLink',
url: "https://checkout.begateway.com/checkout?token=2dace3c57d96d64a0026364c7bd26c627e7a96d8fef8e129d45b2ebd2864db1c",
style: "",
size: { width: 320, height: 480 }
}
var pf = new BeGateway(options);
pf.buildForm();
</script>
</body>
</html>Here is an example of inline iframe:
<!DOCTYPE html>
<html>
<head>
<title>Inline iFrame payment form</title>
<script type="text/javascript" src="https://js.begateway.com/begateway-1-latest.min.js"></script>
</head>
<body style="width: 70%; margin: 10px auto;">
<h1>Test shop</h1>
<p>
T-Shirt 5 EUR
</p>
<div id="paymentForm"></div>
<script type="text/javascript">
var options = {
type: 'inline',
id: 'paymentForm',
url: "https://checkout.begateway.com/checkout?token=2dace3c57d96d64a0026364c7bd26c627e7a96d8fef8e129d45b2ebd2864db1c",
style: "",
size: { width: 350, height: 350 }
}
var pf = new BeGateway(options);
pf.buildForm();
</script>
</body>
</html>When a payment is completed, beGateway redirects a customer to URLs as follows:
success_urlif the payment was successfuldecline_urlif the payment was declinedfail_urlif an error occured during payment process
See beGateway API or API of your payment service processor to know more details.
Additionally webhook notification
is posted to notification_url