When choosing payment options during checkout, should the Paypal option go directly to Paypal, or show a “continue to Paypal” link?

I currently have 2 payment options during checkout: Credit Card and Paypal. Currently, clicking on the Credit Card option will reveal a credit card form, and clicking on the Paypal option will take the user to Paypal checkout (on the Paypal site).

I have also seen it where sites such as Netflix, will show a “continue to paypal” link after selecting the Paypal payment method, instead of going straight to Paypal (shown below)

Payment Options

Paypal option selected

Is the “continue to paypal” link helpful to the user, or does it just add an extra step/confusion (because the user isn’t taken straight to Paypal after selecting the Paypal option)?

How is it possible that Google Analytics is showing a high bounce rate (50%) on a cart and checkout page?

The cart and checkout pages are not landing pages so it isn’t possible for that to be the first page in their session. The exit rate is way too low (approximately 15%) which signals to me that the bounces should be counted as exits. Also, it isn’t reasonable to believe they would time out often enough that Google Analytics counts it as a bounce.

Possible thoughts is that it’s an issue with nonInteraction?

This is an ongoing issue I have been trying to correct for the business, any help would be great.

How to group the delivery slots in the checkout?

I’m working on the online grocery shop, flexible delivery option is one of its key strengths. This interaction happens as the step of the checkout process.

I’m thinking of 2 options.

A. The buttons are aligned similar to the calendar view in Outlook, the size of the button represent the length of the timeslot. Each button has the time and the delivery price.

B. The price and short description are placed as subheaders on top of the buttons. The buttons show only the timeslot and have the similar size.

enter image description here

Which would you choose and why?

Checkout system with offline payments

I’m trying to find the best way to handle offline payments (e.g. internet bank transfer) into a site which offers services like courses.

At present there is a course registration form, when successfully completed the user receives a confirmation screen and email which states that payment is required, confirms the amount and bank account details.

I’m concerned that when a user completes this process it may feel as though they have achieved a booking or reservation, regardless of the information that follows.

For management a difficulty is that once the checkout is completed it takes a minimum of 24-48 hours before the payment can be confirmed. Also, the user may choose to not pay immediately (or at all). During this time the list contains unpaid booking requests, and it’s proving hard to manage the attendee list and be sure of who is coming.

I’m wondering if anyone has encountered this problem before and if there is a better way to handle the checkout process.

More information:

The UX objective is to have an easy to use system for a user to create a course booking, where if they choose to pay ‘offline’ it is clearly understood that there is no reservation of a place until the payment has been made.

It could simply be that a standard process like the current one is fine, we just need to work the copy so that it communicates this well.

Another possibility I’ve considered is a system where ‘offline’ payments are completed before the booking form is completed, identified using a unique code sent via email. This might better reflect reality but it would also be pretty unusual and could put people off.

Paper prototype testing on checkout?

I would like to run few iterations of user testing on a checkout re-design. This project is still in the early stage so I would like to take full-advantage of the situation and run testing sessions on paper prototypes. The testing will be therefore focused on the checkout experience, filling forms and so on, which makes me wonder if is it a good idea to test paper prototypes on a so focused aspect of the website.

Do you think is still a good idea? Any tips on how to setup the tasks?

Checkout flow for buying as guest

I’m working on an e-commerce web site and was reading more about the checkout process. I’ve found this answer, talking about the benefits of not asking users to create an account on the web site in order to buy something. Instead, the advice is to let them buy and, later on, try to interact with that user, trying to create an account. This point is very clear to me, but I’m still in doubt on how to best design the initial step, where I need to, first, identify if the user is a new user or if he already has an account.

In my case, the user has 2 options to create a new account: E-mail/password or Facebook login.

When the user clicks on the button to initate the checkout process, I have these options:

  1. Identify: Check if user has an account or if it’s first time buying;
  2. Address: Fill in an address or use one (if avaliable);
  3. Payment: Credit card payments;
  4. Confirm: Screen to show a confirm message (Congrats, your purchase was successful);

The “Identify” step is where I’m in doubt. For example, what would be a good design to ask for the users login credentials or just identify his name/e-mail(?) to get in touch later on?

Option 1

For this, I’m working with this initial mock design:

enter image description here

My concerns with this design would be:

  • I feel like I’m already showing a lot of information all at once;
  • If the user is a new user and just fill his initial data (email and name) do I need to validate his e-mail? For example, a “confirm e-mail” field in order to avoid typos?
  • What if the user doesn’t mind creating a new account?

Option 2

Another option would be to have a button “New user” or “Create an account” and then, based on the option the user selects, the view would change (hide/show the proper form based on his choice).

enter image description here

I feel like the second option is better, the design is a bit cleaner, but it also feels like it adds a next step (e.g. step 1.1) during the checkout process.


Option 3

The third option would be to treat the “New user” and “Create account” as one single case, I mean, do not show the “Create account” option here, just guide throught the “New user” process, and on the confirmation screen asks if the user wants to provide a password to access his information in the future.


Any other advice or cosideration are welcome. Thanks!

Checkout flow for buying as guest

I’m working on an e-commerce web site and was reading more about the checkout process. I’ve found this answer, talking about the benefits of not asking users to create an account on the web site in order to buy something. Instead, the advice is to let them buy and, later on, try to interact with that user, trying to create an account. This point is very clear to me, but I’m still in doubt on how to best design the initial step, where I need to, first, identify if the user is a new user or if he already has an account.

In my case, the user has 2 options to create a new account: E-mail/password or Facebook login.

When the user clicks on the button to initate the checkout process, I have these options:

  1. Identify: Check if user has an account or if it’s first time buying;
  2. Address: Fill in an address or use one (if avaliable);
  3. Payment: Credit card payments;
  4. Confirm: Screen to show a confirm message (Congrats, your purchase was successful);

The “Identify” step is where I’m in doubt. For example, what would be a good design to ask for the users login credentials or just identify his name/e-mail(?) to get in touch later on?

Option 1

For this, I’m working with this initial mock design:

enter image description here

My concerns with this design would be:

  • I feel like I’m already showing a lot of information all at once;
  • If the user is a new user and just fill his initial data (email and name) do I need to validate his e-mail? For example, a “confirm e-mail” field in order to avoid typos?
  • What if the user doesn’t mind creating a new account?

Option 2

Another option would be to have a button “New user” or “Create an account” and then, based on the option the user selects, the view would change (hide/show the proper form based on his choice).

enter image description here

I feel like the second option is better, the design is a bit cleaner, but it also feels like it adds a next step (e.g. step 1.1) during the checkout process.


Option 3

The third option would be to treat the “New user” and “Create account” as one single case, I mean, do not show the “Create account” option here, just guide throught the “New user” process, and on the confirmation screen asks if the user wants to provide a password to access his information in the future.


Any other advice or cosideration are welcome. Thanks!

How to add custom checkout field in user details mail template

I need to add custom field from my checkout page to email templates. I already added custom input at checkout page and it shows up in mails but it shows up after products table and I would like it to show up in customer details. I can’t find right hook to place it there. Code for my custom field:

// Hook in add_filter('woocommerce_checkout_fields', 'custom_override_checkout_fields');  // Our hooked in function - $  fields is passed via the filter! function custom_override_checkout_fields($  fields) {    //New input   $  fields['billing']['OIB'] = array(     'label'     => __('OIB', 'woocommerce'),     'placeholder'   => _x('OIB', 'placeholder', 'woocommerce'),     'required'  => true,     'class'     => array('form-row-wide'),     'clear'     => true   );    return $  fields; }  /**  * Update the order meta with field value  */ add_action('woocommerce_checkout_update_order_meta', 'my_custom_checkout_field_update_order_meta');  function my_custom_checkout_field_update_order_meta($  order_id) {   if (!empty($  _POST['OIB'])) {     update_post_meta($  order_id, 'OIB', sanitize_text_field($  _POST['OIB']));   } }   /**  * Display field value on the order edit page  */ add_action('woocommerce_admin_order_data_after_billing_address', 'my_custom_checkout_field_display_admin_order_meta', 10, 1);  function my_custom_checkout_field_display_admin_order_meta($  order) {   echo '<p><strong>' . __('OIB') . ':</strong> ' . get_post_meta($  order->id, 'OIB', true) . '</p>'; }   /* To use:  1. Add this snippet to your theme's functions.php file 2. Change the meta key names in the snippet 3. Create a custom field in the order post - e.g. key = "OIB" value = 134852145798 4. When next updating the status, or during any other event which emails the user, they will see this field in their email */ add_filter('woocommerce_email_order_meta_keys', 'my_custom_order_meta_keys');  function my_custom_order_meta_keys($  keys) {   $  keys[] = 'OIB'; // This will look for a custom field called 'OIB' and add it to emails   return $  keys; }  //Micanje Checkout polja add_filter('woocommerce_billing_fields', 'bbloomer_move_checkout_email_field', 10, 1);  function bbloomer_move_checkout_email_field($  address_fields) {   $  address_fields['billing_email']['priority'] = 25;   $  address_fields['OIB']['priority'] = 26;   $  address_fields['billing_phone']['priority'] = 27;   $  address_fields['billing_country']['priority'] = 28;   return $  address_fields; }  // Custom validacija za OIB add_action('woocommerce_checkout_process', 'custom_validate_OIB'); function custom_validate_OIB() {   $  is_correct = preg_match('/^[0-9]{11}$  /', $  _POST['OIB']);   if ($  _POST['OIB'] && !$  is_correct) {     wc_add_notice(__('OIB se sastoji od <strong>11 brojki</strong>.'), 'error');   } } 

I use NP Quote Request plugin which has it’s own email templates. I think that one of these hooks at the bottom of email template php file controls customer details.

do_action('woocommerce_email_after_order_table', $  order, $  sent_to_admin, $  plain_text);  do_action('woocommerce_email_order_meta', $  order, $  sent_to_admin, $  plain_text);  do_action('woocommerce_email_confirmation_messages', $  order, $  sent_to_admin, $  plain_text);  do_action('woocommerce_email_customer_details', $  order, $  sent_to_admin, $  plain_text, $  email);   try {     do_action('woocommerce_email_footer'); } catch (Exception $  ex) { } 

Any help on which hook I should target or what I should do would be great. Thanks.