checkout (JS API v2)
Version 2 API only.
checkout
Method Signature |
CheckoutHandoffResult checkout(String checkoutMethod, opts); |
Description |
Hands off the customer's cart into the UltraCart checkout. If the merchant has upsells configured then the customer will be shown those upsells. Then the customer will see the inprogress screen and if the payment is successful the receipt. If there are any errors then the customer is going to be redirect back to the page specific as a parameter and the errors will be appended as query string parameters. |
Parameters |
String checkoutMethod – one of the different types of checkout constants: CHECKOUT_GOOGLE, CHECKOUT_PAYPAL, CHECKOUT_ULTRACART (default). This parameter instructs UltraCart whether to process the checkout internally or hand it off to Google or PayPal. |
 |
opts – see Making an Asynchronous Call |
Result |
CheckoutHandoffResult – Inspect the errors array on the handoff object. If there are any errors you'll need to display them to the customer first and have them correct them before they can continue. If there are no errors then there will be a redirectToUrl populated. You will need to change the browser's window location to this URL to successfully hand off the browser. |
Unlike the v1 api call checkoutHandoff, the checkout method does not take a redirect url. The current page is submitted as the redirect url. So, if something goes wrong (i.e. credit card declined), the customer will be taken back to this page. Your page should handle these errors gracefully. At the bottom of this page is a section giving an example for handling errors.
Example Code
Comment: Below is example code attached to the "submit my order" button. It does a final email validation, and then submits the cart.
/** * updates the cart and hands off to the checkout. */ function finalizeOrder(checkoutMethod) { // this flag prevents users from clicking the finalize button more than once if (!finalizing) { // set to prevent multiple submissions finalizing = true; // reset any errors jQuery('.field_container_error').removeClass('field_container_error'); // if email is required, then validate it, and warn if errors if (businessRules.emailRequired) { // keep it simple. server side does the exhaustive email check. var email = jQuery('#email').val(); if (!email || email.indexOf('@') < 0) { alertEmailRequired(); // show an alert box, etc. finalizing = false; return; } // same for the confirmation email. if (businessRules.requireEmailConfirm) { var emailConfirm = jQuery('#emailConfirm').val(); if (!emailConfirm) { alertEmailConfirmRequired(); // show an alert box, etc. finalizing = false; return; } else if (email != emailConfirm) { alertEmailConfirmMismatch(); // show an alert box, etc. finalizing = false; return; } // email confirmation is not stored by the cart. // save it to cookie for page reloads or customer will have to re-enter createCookie('checkout_emailConfirm', emailConfirm, 1); } } //document.getElementById('pleaseWait').scrollIntoView(); // change the button to a spinner jQuery('#finalizeLink').html("<img src='images/ajax-loader.gif' alt='Please Wait' title='Please Wait' />"); if (!checkoutMethod || checkoutMethod == ultraCart.checkouts.CHECKOUT_ULTRACART) { // unless this is set somewhere else, make sure we have the default set. ultraCart.getCart().paymentMethod = 'Credit Card'; } // save all the field elements one last time ultraCart.saveFieldElements(function () { // when the save finishes, initiate the checkout. do it asynchronously ultraCart.checkout(checkoutMethod || ultraCart.checkouts.CHECKOUT_ULTRACART, {async:true, onComplete:function(result) { // if the post is accepted, redirectToUrl will be populated. This doesn't mean everything was successfully, // only that basic validation passed. If there's any error, then the 'please wait' page will redirect back to this page // and the error parameter will be displayed. By using ultraCart.checkout(), the default error parameter name of 'ucError' is used. // see handleCheckoutErrors() if (result.redirectToUrl) { ultraCart.util.postGet(result.redirectToUrl); // post instead of redirect to discourage back button use. // if the validation failed, then show errors and reset the finalize button. } else if (result.errors) { finalizing = false; jQuery('#finalizeLink').html("<img src='images/finalizeOrder.gif' alt='Finalize Order'/>"); renderErrors(result.errors); // ?? this else block should never execute. } else { finalizing = false; } }}) }); } }
Handling Checkout Errors
After basic validation passes, if something goes wrong, the customer will be taken back to your checkout page. So your page must look for validation errors and display them upon loading. The code below is a reference example for doing this. It is using jQuery. If you aren't familiar with jQuery(document).ready(), you'll need to read up on jQuery first.
jQuery('document').ready(function() { // standard jQuery ajax code jQuery(document).ajaxStart( function() { jQuery('.ajaxLoad').show(); }).ajaxStop(function() { jQuery('.ajaxLoad').hide(); }); jQuery('#finalizeLink').click(function() { finalizeOrder(); }); // initialize the ultraCart object. Do this as soon as possible so the ajax methods can begin executing. ultraCart.init(merchantCartConfig); // this is a helper method. you could call it anything. it just separates out all the merchant specific code, such as special gui rendering, ads, etc. merchantOnReady(); // HERE IS WHERE ERROR ARE HANDLED! AT THE END OF THE ready() block handleCheckoutErrors(); // if there were any. }); /** * checks for any errors returned from the finalize method and displays them */ function handleCheckoutErrors() { // as a standard, any functions that update the gui and use UltraCart data are named renderXXX. This is a weak convention, and you may deviate from it if desired. // notice we're checking for the ucError parameter. Those are the error messages. renderErrors(ultraCart.util.getParameterValues('ucError')); } /** * This function wraps many remote calls to display any errors returned from the server. * @param errors - string array of error messages */ function renderErrors(errors) { if (typeof errors == 'undefined' || errors == null) return false; if (!errors.length) return false; if (errors.length == 0) return false; var html = '<ul>'; for (var i = 0; i < errors.length; i++) { html += '<li>' + errors[i] + '</li>'; } html += '</ul>'; jQuery('#error_messages').html(html); jQuery('#error_container').show(); document.getElementById('error_container').scrollIntoView(); return true; }