Reference
Public methods exposed by the plugin.
config({object})
Configures the plugin.
Parameters
| Name | Type | Required? | Notes |
|---|---|---|---|
| environment | CRDV.Environment | Yes | The desired environment (e.g. CRDV.Environment.Sandbox or CRDV.Environment.Production) |
| store | string | Yes | The store code |
| minAmount | number | No | The minimum financing amount configured for the store. The default value is 50.00. |
| maxAmount | number | No | The maximum financing amount configured for the store. The default value is Number.MAX_VALUE. |
| type | string | No | The type of display can be set to modal or popup. The default value is popup. The type of display is only applicable to desktop users. On mobile, the application is required to open a new tab. |
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, zinitial-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
| Name | Type | Required? | Notes |
|---|---|---|---|
| classNames | string | Yes | The class names set on the elements |
Data parameters
| Name | Type | Required? | Constraints | Notes |
|---|---|---|---|---|
| data-amount | string | Yes | Cannot be lower or higher than the minimum/maximum configured | The amount of the product |
| data-type | string | Yes | redirect, popup or text | Use redirect to redirect the user to our website, popup to keep the user on your page or text to show the message without any action associated with it |
| data-message | string | No | Custom message |
See the table below for the tokens that you can reference on the data-message parameter.
| Name | Description |
|---|---|
| %0 | Monthly Payment minimum value |
| %1 | Monthly Payment maximum value |
| %2 | Finance Period |
Returns
| Type | Nullable? | Notes |
|---|---|---|
| Promise | No | The 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
| Name | Type | Required? | Notes |
|---|---|---|---|
| element | HTML element | Yes | The element |
Data parameters
| Name | Type | Required? | Constraints | Notes |
|---|---|---|---|---|
| data-amount | string | Yes | Cannot be lower or higher than the minimum/maximum configured | The amount of the product |
| data-type | string | Yes | redirect, popup or text | Use redirect to redirect the user to our website, popup to keep the user on your page or text to show the message without any action associated with it |
| data-message | string | No | Custom message. See the table below for the tokens that you can reference. |
Custom message tokens
| Name | Description |
|---|---|
| %0 | Monthly Payment minimum value |
| %1 | Monthly Payment maximum value |
| %2 | Finance Period |
Returns
| Type | Nullable? | Notes |
|---|---|---|
| Promise | No | The 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
| Name | Type | Required? | Constraints | Notes |
|---|---|---|---|---|
| amount | number | Yes | Cannot be lower or higher than the minimum/maximum configured | The amount of the product |
Returns
| Type | Nullable? | Notes |
|---|---|---|
| Promise | No | The promise completes when the user finishes or close the popup. |
The promise also returns an object with the properties:
| Name | Type | Nullable? | Notes |
|---|---|---|---|
| approved | boolean | No | |
| publicId | string | Yes | Public 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
| Name | Type | Required? | Notes |
|---|---|---|---|
| publicId | string | Yes | The Public ID returned by our API |
Returns
| Type | Nullable? | Notes |
|---|---|---|
| Promise | No | The 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
| Name | Type | Required? | Notes |
|---|---|---|---|
| listener | function | Yes | Function 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>