Introduction
The custom implementation of the “Buy now” process that is described in this article – will make it possible to immediately register and/or log in – to be able to pay and download a file – regardless of the user’s account settings.
If you want support to implement the changes for you then feel free to create a support ticket about this.
Screen recordings
Scroll down to the bottom of this article for videos that show how the process can work.
Recommended reading
- Configuring Stripe for online payments
- Price Calculator for RM files
- Configuring multiple RF licences
For Rights Managed licencing
Site configuration
The below instructions require the price calculator to have been properly configured if you licence Rights Managed files.
Go to Site configuration, Preview page settings and open the section Buttons & links. Scroll to the Quotation settings and select the radio button “Show always but for RM files only”, and select the option “Use price calculator instead of form, with prices (RM only)”.
Changes to the price calculator for guests
By default the setting Use price calculator instead of form, with prices (RM only) will display the calculator with a Submit button. Clicking that button collects the user’s input and it will create a quote request in backoffice. You will also receive a staff member e-mail notification.
For this implementation however, we want to give the user the opportunity to immediately log in and go to the cart page to buy the file for the price that was shown. And if the user doesn’t have an account yet then we’ll let the user register and log in immediately. For this to work we’ll add a button to the dialog with the label “Buy now”.
Add the button
Open code editor template #87 (Calculator script) and edit the xscalculatorhandler function. The full example code is available in the file buynow-xscalculatorhandler.txt. The below snippet only shows how the button is added:
if(o.quotemode) {
// add Buy now button
$("<li><a class='button buynow'>Buy now</a></li>").appendTo($("#saveButtonContainer .colorbuttons"));
// change text of standard button
$("#calcDialogSend > span").html("Contact me");
$("#pricecalculator .buynow").off("click").on("click",function(e){
e.preventDefault();
o.buynow(); // see full implementation for details
});
}
Change the instruction text
It’s also a good idea to change the description that shows at the top of the calculator to explain that the user can either be contacted about a purchase, or that the user can immediately buy the file for the price shown. That can be done in script (xscalculator), for example:
if(p.quote.mode) {
$("#pricecalccontainer #calculatortitle").html("Calculate price");
$("#pricecalccontainer #calculatorsubtitle").html("<p>Add your help text here.</p>");
}
For Royalty Free licencing
Default / Single RF implementation
Both the default RF and the Multi RF implementation require the xsbuynow object to be added to preview script template #86 in the code editor. You can load this object from the example file xsbuynow.txt. Select this file in the list and click on View code, then on Copy & close and then paste the code into the editor.
The single RF implementation needs to override the add to cart button on the preview page. To do this, add this function to the xspreviewhandler object (available in onrfcartbutton-buynow.txt):
onrfcartbutton(filedata) {
if($(".preview.guest1").length!==0) {
xsbuynow.file(filedata);
} else {
cart.additem(filedata.tid, "preview", filedata.sizeid, 0);
}
}
Multi RF function
If you use the Multi RF function then load template #86 (previews script) into the code editor. The xsmultirf = {} object must be replaced with the version that you can find in the code samples list: click on Load example – then find and select xsmultirf-buynow.txt. Click on View code and then click on Copy and close. Find the xsmultirf object and replace it with the code that you just copied.
As described above, you also need to add the xsbuynow object that you load from example xsbuynow.txt.
Multi RF can be enabled via Site configuration > Metadata & Rights > section Collection file size settings > checkbox Use multiple pricing option for RF images.
See videos 1 and 5 for examples.
The “Buy now” intermediate page
Load template #804 “Buy now page” in the code editor. A full example can be loaded from the file buynow-page-example.txt. The example has the HTML, CSS and Javascript needed to make it all work. It is advised to use the example “as is” and to then make changes if needed only after you have tested the available example code.
The Buy now page has two forms. The first one lets users log in after which the file is automatically added to the cart with the price calculator data that the user selected, after which the cart page will load.
New user form
The second form lets a new user enter minimal information (e-mail, first- and lastname and country) to have an account created and to automatically log in the new user.
If the form does not have a password field, then a temporary password is created that the user will have to change if he/she wants to log in at a later date (also see paragraph about temporary passwords below). If you want to let the user choose their password, then add the password field to the form (see screen recording #5).
Note that when a new user account is created, this account will be immediately enabled with the permission settings that you have configured for new user accounts. The user will however not receive and activation e-mail, regardless of how this is configured in backoffice.
Optional fields
The fields e-mail, first name, last name and country are required in the new user form. In addtion to the optional password field, you can furthermore add the following optional fields: VAT, organisation/company name, Address line 1 and 2, city and zip code.
The Buy now page needs to have script to validate the input of any of the optional fields. You’ll find the below function at the top of the page. Note that this function is called always, even if the form does not have any optional fields. In that case let newaccountvalid simply return the value true.
var xsbuynow = {
newaccountvalid() {
// do validation of optional fields here, true if all is ok or false to prevent form submission
return true;
}
};
Why the cart page loads first
After logging in, the cart page loads first, and the user will have to confirm his/her order to proceed to the payment page. The cart page loads first because a returning user may still have other files in his/her cart, but also because certain things are not known until after the user has logged in. E.g. the user may have price agreements or a discount, the user may have to pay VAT, there may be country based restrictions on the file et cetera.
Order permissions
Note that the user’s permissions are ignored if you use this function. I.e. the cart will load requiring online payment and requiring the user to use the price calculator, regardless of how the user’s account is configured. This affects the current cart/order only. Emptying the cart or confirming/finalizing the order will reset the user’s permissions to how the user’s account is configured.
Temporary password
When the cart page loads after a new user was just added and a temporary password was automatically created for this user, then you can display the password with a link to copy it to the clipboard. To do this, you can add some script to the xscart.beforecart() function in template #43. You’ll find the example in file temporary-password-message.txt. If the user ever logs in with the temporary password then he/she will be taken to a page where the user must choose a new password.
Note that a temporary password is created only if you don’t add the password field to the form.
Cart page attributes
The cart page body element has the data attributes data-buynow and data-tempass. The latter has a value if a temporary password was just created as explained above.
The attribute data-buynow has a value of 0: no Buy now process, 1: from RM price calculator, 2: multi RF or 3: single RF
Hiding or overriding the Add to order button
It is advised to either hide the “add to order” buttons for guests, or to display the preview page or modal if the “add to order” button is clicked.
Hiding the button can be simply achieved by adding this CSS to code editor template #2:
.guest1 .buttons .order {
display:none;
}
To override the cart/order button for guests you can add the function onthumbnailbutton to your xsthumbs object in template #42.
For example (also see screen recording #5):
var xsthumbs = {
onthumbnailbutton(btn, data) {
// return true if click is handled here, otherwise return false for normal click handler
// example: if guest then display preview if cart button is clicked
let handled=false;
if($("body").hasClass("guest1")) {
if(data.bx===1) {
$("#"+data.tid+" .filepreview").click();
handled=true;
}
}
return handled;
}
};
And then hide the button on preview pages only with this CSS in template #2:
.guest1 .previewtools .order {
display:none;
}
Video clips
The below screen recordings show examples of how the process can work.
Note that the first three clips don’t have audio.
The last clip does have text-to-speech audio, and it shows how the price calculator can be configured to let a logged in user buy a file immediately – even though the user’s account is not configured for paying online.
You can enlarge the clips with the button in the bottom right corner of the player.
