Reference

Public methods exposed by the plugin.

config({object})

Configures the plugin.

Parameters

NameTypeRequired?Notes
environmentstringYesThe desired environment
storestringYesThe store code
minAmountnumberNoThe minimum financing amount configured for the store. The default value is 300.00.
maxAmountnumberNoThe maximum financing amount configured for the store. The default value is Number.MAX_VALUE.

You can use the Environment enum to set the environment. The available values are Staging, Sandbox, and Production.

Usage sample

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRDV</title>
</head>
<body>
<script src="https://plugin.credova.com/plugin.min.js"></script>
<script>
CRDV.plugin.config({ environment: CRDV.Environment.Sandbox, store: "ARV000" });
</script>
</body>
</html>

inject(classNames)

Injects the pre-qualification button in the elements which have all of the given class names.

You must call the config method before using it.

Parameters

NameTypeRequired?Notes
classNamesstringYesThe class names set on the elements

Data parameters

NameTypeRequired?ConstraintsNotes
data-amountstringYesCannot be lower or higher than the minimum/maximum configuredThe amount of the product
data-typestringYesredirect or popupUse redirect to redirect the user to our website or popup to keep the user on your page
data-messagestringNoCustom message

See the table below for the tokens that you can reference on the data-message parameter.

NameDescription
%0Monthly Payment minimum value
%1Monthly Payment maximum value
%2Finance Period

Returns

TypeNullable?Notes
PromiseNoThe promise completes when the button is injected in all the elements

Usage sample

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRDV</title>
</head>
<body>
<p class="credova-button" data-amount="1245.67" data-type="redirect"></p>
<p class="credova-button" data-amount="1245.67" data-type="popup" data-message="Payments from %0 to %1 per month with"></p>
<script src="https://plugin.credova.com/plugin.min.js"></script>
<script>
CRDV.plugin.config({ environment: CRDV.Environment.Sandbox, store: "ARV000" });
CRDV.plugin.inject("credova-button");
</script>
</body>
</html>

injectButton(element)

Injects the pre-qualification button in the element.

You must call the config method before using it.

Parameters

NameTypeRequired?Notes
elementHTML elementYesThe element

Data parameters

NameTypeRequired?ConstraintsNotes
data-amountstringYesCannot be lower or higher than the minimum/maximum configuredThe amount of the product
data-typestringYesredirect or popupUse redirect to redirect the user to our website or popup to keep the user on your page
data-messagestringNoCustom message. See the table below for the tokens that you can reference.

Custom message tokens

NameDescription
%0Monthly Payment minimum value
%1Monthly Payment maximum value
%2Finance Period

Returns

TypeNullable?Notes
PromiseNoThe promise completes when the button is injected in the element

Usage sample

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRDV</title>
</head>
<body>
<p id="credova-button" data-amount="1245.67" data-type="redirect"></p>
<script src="https://plugin.credova.com/plugin.min.js"></script>
<script>
CRDV.plugin.config({ environment: CRDV.Environment.Sandbox, store: "ARV000" });
const button = document.getElementById("credova-button");
CRDV.plugin.injectButton(button);
</script>
</body>
</html>

prequalify(amount)

Opens the pre-qualification popup.

You must call the config method before using it.

Parameters

NameTypeRequired?ConstraintsNotes
amountnumberYesCannot be lower or higher than the minimum/maximum configuredThe amount of the product

Returns

TypeNullable?Notes
PromiseNoThe promise completes when the user finishes or close the popup.

The promise also returns an object with the properties:

NameTypeNullable?Notes
approvedbooleanNo
publicIdstringYesPublic ID that you can use to call our API and get the approval amount

Usage sample

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRDV</title>
</head>
<body>
<button id="the-button">Open pre-qualification popup</button>
<script src="https://plugin.credova.com/plugin.min.js"></script>
<script>
CRDV.plugin.config({ environment: CRDV.Environment.Sandbox, store: "ARV000" });
var theButton = document.getElementById("the-button");
theButton.addEventListener("click", function(e) {
e.preventDefault();
CRDV.plugin.prequalify(1245.67).then(function(res) {
if (res.approved) {
alert("User was approved and publicId is " + res.publicId);
} else {
alert("User was not approved");
}
});
});
</script>
</body>
</html>

checkout(publicId)

Opens the checkout popup.

You must call the config method before using it.

Parameters

NameTypeRequired?Notes
publicIdstringYesThe Public ID returned by our API

Returns

TypeNullable?Notes
PromiseNoThe promise completes when the user completes or close the popup.

The promise also returns a boolean value showing if the user completed the process.

Usage sample

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRDV</title>
</head>
<body>
<button id="checkout-button">Open checkout popup</button>
<script src="https://plugin.credova.com/plugin.min.js"></script>
<script>
CRDV.plugin.config({ environment: CRDV.Environment.Sandbox, store: "ARV000" });
var checkoutButton = document.getElementById("checkout-button");
checkoutButton.addEventListener("click", function(e) {
e.preventDefault();
CRDV.plugin.checkout("the-public-id").then(function(completed) {
if (completed) {
console.log("Checkout was completed");
} else {
console.log("Checkout was closed");
}
});
});
</script>
</body>
</html>

addEventListener(listener)

Listen for events.

Parameters

NameTypeRequired?Notes
listenerfunctionYesFunction that will be called every time an event is emitted

The listener function will receive an object with the event name and the event arguments.

You can use the EVENT_USER_WAS_APPROVED variable to check if the event is an approval. The eventArgs property will contain the publicId that you can use to call our API and get the approval amount.

Usage sample

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CRDV</title>
</head>
<body>
<p class="credova-button" data-amount="1245.67" data-type="redirect"></p>
<script src="https://plugin.credova.com/plugin.min.js"></script>
<script>
CRDV.plugin.config({ environment: CRDV.Environment.Sandbox, store: "ARV000" });
CRDV.plugin.inject("credova-button");
CRDV.plugin.addEventListener(function(e) {
if (e.eventName === CRDV.EVENT_USER_WAS_APPROVED) {
alert("User was approved and publicId is " + e.eventArgs.publicId);
}
});
</script>
</body>
</html>