How do I upgrade my custom intergration?

What will this do? 

We’re making your checkout experience even smoother (yes, even smoother!) with the option to pre-fill customer data, streamlining identity verification! 

To do this, we’ve gotta flip the script! The javascript that is!

Please note: This only applies to you if you're using a custom integration. 

How do I do this? 

The main difference is in the April Checkout.init() section, after

email: "[e-mail]", // optional 

with four new lines of code added! 

customerFirstName: "John", // optional 
customerMiddleName: "", // optional 
customerLastName: "Doe", // optional 
customerResidentialAddress: "283 Clarence Street, Sydney NSW 2000", // optional 

But in order to make sure it's done correctly it may be best to completely copy over the whole script. 

So, lets go!

First up, navigate to wherever your april.js code is located, it should look a little something like this 

<div id="april-cont"></div>
<script src="https://www.meetapril.com/js/v1/checkout.js"></script>
<script>
AprilCheckout.init({
publicKey: "live_pk_xxxxxxxxxxxxxxxxxxxxx",
email: "[e-mail]", // optional 
hidePayLaterOption: false, // optional (default false), can pass (true or false), it will show/hide the BNPL option in the payment form 
hideFullPayOption: false, // optional (default false), can pass (true or false), it will show/hide the Full payment option in the payment form 
paymentToken: function(token) {
// Once the checkout is complete this function will be called.
// You may use the `token` on server side in order the complete the transaction.
}
});
AprilCheckout.render({
elementId: "april-cont",
currency: "AUD",
amount: 15000, // should be in cents (integer)
showPayNow: true, // Optional, enables Pay Now button for pay by card option 
showPayPlanSubmit: true, // Optional, enables Submit Payment Plan button for split payments option 
});
AprilCheckout.errorHandler(function (err) {
// Handle errors 
});
AprilCheckout.eventHandler(function (event) {
// Handle events 
});
</script>

Then replace it with this! 

<div id="april-cont"></div>
<script src="https://www.meetapril.com/js/v1/checkout.js"></script>
<script>
AprilCheckout.init({
publicKey: "live_pk_xxxxxxxxxxxxxxxxxxxxx",
email: "[e-mail]", // optional 
customerFirstName: "John", // optional 
customerMiddleName: "", // optional 
customerLastName: "Doe", // optional 
customerResidentialAddress: "283 Clarence Street, Sydney NSW 2000", // optional 
hidePayLaterOption: false, // optional (default false), can pass (true or false), it will show/hide the BNPL option in the payment form 
hideFullPayOption: false, // optional (default false), can pass (true or false), it will show/hide the Full payment option in the payment form 
paymentToken: function(token) {
// Once the checkout is complete this function will be called.
// You may use the `token` on server side in order the complete the transaction.
}
});
AprilCheckout.render({
elementId: "april-cont",
currency: "AUD",
amount: 15000, // should be in cents (integer)
showPayNow: true, // Optional, enables Pay Now button for pay by card option 
showPayPlanSubmit: true, // Optional, enables Submit Payment Plan button for split payments option 
});
AprilCheckout.errorHandler(function (err) {
// Handle errors 
});
AprilCheckout.eventHandler(function (event) {
// Handle events 
});
</script>

That's it! 

If you need more detailed instructions, you can find them here

And if you need any assistance, shoot us an email to [e-mail]