Prequalification
With the prequalification, you can provide to your users a way to see the financing options available to them with no effect to their credit.
The plugin provides some methods that will help you start the prequalification process without having to interact with our API.
Add the prequalification button
The simplest way to start the prequalification process is by using our prequalification button. The image below is a sample of how it could look on your page (the text Payment as low as ...
was added by the plugin).
You only have to add an element to the page and call the inject
method passing the class name of the element as shown below:
CRDV.plugin.inject("your-class-name");
The element can be a <span>
, <div>
or <p>
and you need to include the data attributes amount
and type
:
<p class="your-class-name" data-amount="1245.67" data-type="redirect"></p>
Also, you can have multiple elements on the page with the same class name:
<p class="your-class-name" data-amount="1245.67" data-type="redirect"></p>
<p class="your-class-name" data-amount="765.43" data-type="redirect"></p>
If you want to open a popup instead of redirecting the user to our website, you can set type
as popup
.
<p class="your-class-name" data-amount="1245.67" data-type="popup"></p>
If you want to show the message without any action associated with it, you can set type
as text
.
<p class="your-class-name" data-amount="1245.67" data-type="text"></p>
Custom messages
You can customize the button message using the data attribute message
:
<p class="your-class-name" data-amount="1245.67" data-type="popup" data-message="Payments from %0 to %1 per month with"></p>
Here are the tokens that you can reference:
Name | Description |
---|---|
%0 | Monthly Payment minimum value |
%1 | Monthly Payment maximum value |
%2 | Finance Period |
Example: Using the inject method
You can use this HTML code to test the inject
method. Just copy/paste this code in a file and save it on your computer.
<!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");
</script>
</body>
</html>
Hiding Credova brand
You can customize the button and hide the Credova brand using the data attribute hide-brand
:
<p class="your-class-name" data-amount="1245.67" data-type="popup" data-hide-brand="true"></p>
Listen for approvals
The plugin exposes the addEventListener
method that you can use to listen for approval events. You must provide a function that will be called every time an event is emitted. This function will receive an object with the event name and the event arguments.
CRDV.plugin.addEventListener(function(e) {
if (e.eventName === CRDV.EVENT_USER_WAS_APPROVED) {
alert("User was approved and publicId is " + e.eventArgs.publicId);
}
});
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.
Example: Listening for approvals
You can use this HTML code to test the addEventListener
method. Just copy/paste this code in a file and save it on your computer.
<!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>
Open the prequalification popup
As an alternative to inject our prequalification button, you can use the prequalify
method to manually open the pre-qualification popup. The method references the amount and returns a promise that you can use to check if the user was approved. It also returns the publicId
that you can use to call our API and get the approval amount.
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");
}
});
Example: Opening the popup
You can use this HTML code to test the prequalify
method. Just copy/paste this code in a file and save it on your computer.
<!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 prequalification 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>