Integrate the Web SDK
Widget Integration
Step 1
Server to server request to get a unique session id. See here for required fields.
Step 2
Reference the web sdk library in your HTML form.
...
<script type="text/javascript" src="https://pay4.sandbox.payabl.com/hpp/js/payabl_sdk.js"></script>
...
Step 3
Add a HTML placeholder in your html form.
...
<div id="creditcard-placeholder">
<!-- payabl. widget will be inserted here. -->
</div>
...
Step 4
Instantiate payabl. API in your JavaScript code with a Payabl object.
Payabl.initialize()
Payabl.initialize({
sessionId: '538b891512c5aa708899d4d34d07ea5f1890e2d8',
env: 'sandbox',
widgetMode: "modal",
modalPayButtonText: "Pay $1.23",
callback : callbackNotification,
});
Properties
PROPERTY | VALUES | DEFAULT VALUE | DESCRIPTION |
---|---|---|---|
sessionId | N/A | id generated during server to server init api request. See Init section for details. | |
env | sandbox | production | production | sandbox – this is used during the integration phase. production – used to send live cards numbers. |
widgetMode | inline | modal | inline | This controls the display mode the the credit card. The “inline” mode embed seamlessly the credit card form into the page. The “modal” mode shows a modal form with credit card form and submit button. See screenshots section for an example. |
modalPayButtonText | “Pay” | This is used together with “modal” mode to customize the text of the button. See screenshots section for an example. | |
callback | javascript function | N/A | After the payment is completed this is used to post the result back to the merchant website javascript. See callback section for details. |
Step 5
Optional step to set CSS styles. Set this in your JavaScript code.
Payabl.setStyle()
// Example
let styles = `
#cvc_code_wrapper { background-color :GhostWhite;}
#ccn_wrapper { background-color :GhostWhite;}
#exp_month_year_wrapper { background-color :Azure;}
#card_container { display: block;}
#cvc_code { color: blue;}
#ccn { color: blue;}
#exp_month_year { color: blue;}
::placeholder {
color: blue;
opacity: 1; /* Firefox */
}
.pc21-pay-button {
background-color: #FFA822;
color: black;
}
`;
Payabl.setStyle(styles);
Step 6
Render Widget. This will embed the credit card form in the browser. Please note that when using “modal” mode this will render the payment form in the customers browser and there is no need for the final step.
Payabl.create()
Payabl.create(document.getElementById('creditcard-placeholder'));
Final Step
Submit Payment by calling createPayment method. Add an event listener to a button. If you use “inline” mode this step is required.
Payabl.createPayment
let pay_button = document.getElementById("submitButton");
pay_button.addEventListener("click", Payabl.createPayment, false);
- Please make sure to add code to prevent double click of the createPayment button.
Callback
Example callback response:
{
"status":"APPROVED",
"metadata":{
"errorcode":"0",
"type":"capture",
"errormessage":"",
"orderid":"payabl-Test",
"transactionid":"213548331"
}
}
Key | Value | Description |
---|---|---|
status | APPROVED | Action generated by payment gateway. *includes metadata |
DECLINED | Action generated by payment gateway. *includes metadata | |
ERROR | Any action that occurs within the wed sdk module. *may not include metadata | |
CANCELLED | Action that occurs when customer cancelled the transaction. *may not include metadata |
Key | Sub Key |
---|---|
metadata | errorcode |
type | |
errormessage | |
orderid | |
transactionid |
Screenshots
Modal mode view.
Full example
window.onload = function() {
Payabl.initialize({
sessionId: 'e0c3d40275f17ec6145e43a38e63f793e709aa71', // REQUIRED. Received during server-side authentication
env: 'sandbox',
widgetMode: "inline",
modalPayButtonText: "Pay 1.23",
callback: callbackNotification,
});
let styles = `
#cvc_code_wrapper { background-color :GhostWhite;}
#ccn_wrapper { background-color :GhostWhite;}
#exp_month_year_wrapper { background-color :Azure;}
#card_container { display: block;}
#cvc_code { color: blue;}
#ccn { color: blue;}
#exp_month_year { color: blue;}
::placeholder {
color: blue;
opacity: 1; /* Firefox */
}
.pc21-pay-button {
background-color: #FFA822;
color: black;
}
`;
Payabl.setStyle(styles);
Payabl.create(document.getElementById('creditcard-placeholder'));
// FINAL STEP, submit payment
let pay_button = document.getElementById("submitButton");
pay_button.addEventListener("click", Payabl.createPayment, false);
function callbackNotification(res) {
console.log("Merchant received callback");
console.log(res);
var x = document.getElementById("payment-form");
x.style.display = "none";
var result = document.getElementById("callbackResult");
result.className = "jumbotron jumbotron-fluid";
result.style.backgroundColor = "green";
result.style.width = "100%";
result.style.height = "100%";
let span_el = document.createElement('h2');
span_el.className = "callbackSpan";
let info_site = " <p>*Merchant-generated message* </p>";
if (res.status === "APPROVED") {
result.style.backgroundColor = "green";
span_el.innerHTML = info_site + "Payment Successful";
} else {
result.style.backgroundColor = "orange";
span_el.innerHTML = info_site + "Payment failed. Please provide a new session";
}
result.appendChild(span_el);
}
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Merchant Store</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Custom styles for this template -->
<link rel="stylesheet" href="storeFront.css">
</head>
<body>
<section>
<div class="container">
<div class="row align-items-center">
<div class="col-lg-9 order-lg-1">
<div class="">
<h2 class="display-4">Complete your payment</h2>
<div class="form-row">
<label>
Amount : $1.23
</label>
</div>
<div class="form-row">
<label>
Payment Information
</label>
</div>
<hr>
<div id="callbackResult"></div>
<form action="/charge" method="post" id="payment-form">
<div class="form-row"></div>
<div id="creditcard-placeholder" class="bckColorCardButton">
</div>
<button type="button" class="btn btn-primary" id="submitButton">Pay $1.23</button>
</form>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/merchantStore.js"></script>
<!-- powercash_sdk.js sdk-->
<script type="text/javascript" src="https://pay4.sandbox.powercash21.com/iframes/js/payabl_sdk.js"></script>
</body>
</html>
/*!
* Start Bootstrap - One Page Wonder v5.0.7 (https://startbootstrap.com/template-overviews/one-page-wonder)
* Copyright 2013-2019 Start Bootstrap
* Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-one-page-wonder/blob/master/LICENSE)
*/
body {
font-family: 'Lato';
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Catamaran';
font-weight: 800 !important;
}
.btn-xl {
text-transform: uppercase;
padding: 1.5rem 3rem;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.1rem;
}
.bg-black {
background-color: #000 !important;
}
.rounded-pill {
border-radius: 5rem;
}
.navbar-custom {
padding-top: 1rem;
padding-bottom: 1rem;
background-color: rgba(0, 0, 0, 0.7);
}
.navbar-custom .navbar-brand {
text-transform: uppercase;
font-size: 1rem;
letter-spacing: 0.1rem;
font-weight: 700;
}
.navbar-custom .navbar-nav .nav-item .nav-link {
text-transform: uppercase;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.1rem;
}
header.masthead {
position: relative;
overflow: hidden;
padding-top: calc(7rem + 72px);
padding-bottom: 7rem;
background: linear-gradient(0deg, #ff6a00 0%, #ee0979 100%);
background-repeat: no-repeat;
background-position: center center;
background-attachment: scroll;
background-size: cover;
}
header.masthead .masthead-content {
z-index: 1;
position: relative;
}
header.masthead .masthead-content .masthead-heading {
font-size: 4rem;
}
header.masthead .masthead-content .masthead-subheading {
font-size: 2rem;
}
header.masthead .bg-circle {
z-index: 0;
position: absolute;
border-radius: 100%;
background: linear-gradient(0deg, #ee0979 0%, #ff6a00 100%);
}
header.masthead .bg-circle-1 {
height: 90rem;
width: 90rem;
bottom: -55rem;
left: -55rem;
}
header.masthead .bg-circle-2 {
height: 50rem;
width: 50rem;
top: -25rem;
right: -25rem;
}
header.masthead .bg-circle-3 {
height: 20rem;
width: 20rem;
bottom: -10rem;
right: 5%;
}
header.masthead .bg-circle-4 {
height: 30rem;
width: 30rem;
top: -5rem;
right: 35%;
}
@media (min-width: 992px) {
header.masthead {
padding-top: calc(5rem + 1px);
padding-bottom: 1rem;
}
header.masthead .masthead-content .masthead-heading {
font-size: 6rem;
}
header.masthead .masthead-content .masthead-subheading {
font-size: 4rem;
}
}
.bg-primary {
background-color: #ee0979 !important;
}
/*
.btn-primary {
background-color: #ee0979;
border-color: #ee0979;
}*/
.btn-primary:active,
.btn-primary:focus,
.btn-primary:hover {
background-color: green !important;
border-color: green !important;
}
.btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(238, 9, 121, 0.5);
}
.btn-secondary {
background-color: #ff6a00;
border-color: #ff6a00;
}
.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary:hover {
background-color: #cc5500 !important;
border-color: #cc5500 !important;
}
.btn-secondary:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 106, 0, 0.5);
}
/*
* Custom CSS classes
*/
.pc21-fields {
background-color: #193bd4 !important;
}
.bckColorCardButton {
padding-top: 15px;
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}
Our Technical Support team is there to help you:
Email: [email protected]
Available Monday – Friday between 09:00 and 17:00 CET/CEST
Updated 4 months ago