//insert your app ID
var appId = "{{your-client-id}}";
document.addEventListener("DOMContentLoaded", function () {
// initialize materialize collapsible
var collapsibleElement = document.querySelector(".collapsible");
var collapsibleInstance = M.Collapsible.init(collapsibleElement);
// initialize materialize material box
var materialBox = document.querySelectorAll(".materialboxed");
var instances = M.Materialbox.init(materialBox);
});
// show shipping address if different
function showMe() {
var box = document.getElementById("same");
var vis = box.checked ? "block" : "none";
document.getElementById("shipping-address").style.display = vis;
}
// close address section on "next" click
function closeAddress() {
var elems = document.querySelector(".collapsible");
var instances = M.Collapsible.init(elems);
instances.close(1);
}
// open submit section on "next" click
function openSubmit() {
var elems = document.querySelector(".collapsible");
var instances = M.Collapsible.init(elems);
instances.open(2);
}
function openPlaid() {
WePay.set_endpoint("stage");
document.getElementById('bank_popup');
response = WePay.bank_account.create({
'client_id': appId,
'email': document.getElementById("email").value,
"options": {
"avoidMicrodeposits": true
}
},
function(data) {
console.log(data);
//close checkout section
var elems = document.querySelector('.collapsible');
var instances = M.Collapsible.init(elems);
instances.close(2);
//display the response for testing -- remove in production
var node = document.createElement('div');
node.innerHTML = ("bank_account_id: " + data["bank_account_id"]);
document.getElementById('token').appendChild(node);
//show complete message
document.getElementById('complete-screen').style.display = "block";
}
);
};
// credit card iframe styling
var custom_style = {
"styles": {
"base": {
"color": "grey",
"border": "1px solid grey",
"border-top": "none",
"border-right": "none",
"border-left": "none",
"font-weight": "200",
"font-family": "Arial",
"padding": "0px",
"margin-bottom": "5px",
":focus": {
"border": "2px solid #4db6ac",
"border-top": "none",
"border-right": "none",
"border-left": "none"
},
"::placeholder": {
"text-transform": "lowercase",
"color": "#D3D3D3",
"font-size": "17px"
}
},
"invalid": {
"color": "#CD5C5C",
"border-color": "#CD5C5C"
},
"valid": {
"color": "#4db6ac",
"border-color": "#4db6ac"
},
"labels": {
"base": {
"color": "gray",
"font-family": "Arial",
"font-size": "13px",
"font-weight": "1",
"text-transform": "lowercase",
"padding": "0px",
"padding-left": "0px"
}
},
"errors": {
"invalid": {
"color": "#CD5C5C"
}
}
}
};
var options = {
custom_style: custom_style
};
//credit card iframe configs
WePay.set_endpoint("stage");
var iframe_container_id = "iframe-element";
var creditCard = WePay.createCreditCardIframe("iframe-element", options);
if (creditCard.error_code) {
console.log("error", creditCard);
}
document
.getElementById("submit-credit-card-button")
.addEventListener("click", function (event) {
creditCard.tokenize(
{
"client_id": appId,
"user_name": document.getElementById("zip").value,
"email": document.getElementById("email").value,
"address": {
"postal_code": document.getElementById("zip").value
}
},
function (response) {
if (response.error) {
// error will have error message which explains why submitToken is not be able to generate token
console.log(response);
} else {
// response will has credit card token if all the user information are valid
console.log(response);
}
// display the response on the page for testing purposes; do not launch with this section
var node = document.createElement('div');
node.innerHTML = JSON.stringify(response);
document.getElementById('token').appendChild(node);
}
)
});
!
