E-Store Manage Orders Part Ib: Add Order Online
- This tutorial covers how your public users add an e-store order online.
- In order to add an order online, you MUST have integrated your website with our CRM using either our e-Store WordPress Plug-In or our Pages feature. See our tutorials on configuring the WordPress Plug-Ins or on configuring Pages for how to enable the e-store web integration. Additionally, you must have completed all back-end e-Store configurations and added products to your e-Store. See our e-Store tutorials for more information.
- Users can complete the upgrade/downgrade of a membership either as a logged in user (individuals only; organizations cannot create a public profile log-in) or as a guest (non-logged in check out) (both individuals and organizations can use guest checkout).
- There is the option to turn off logged-in checkout and only have users check out as a guest while checking out (see the Cart/Guest Check Out tab section of our WordPress Plugins Configurations Part I: General Tab (Plug-Ins) / Pages Configurations and Settings Part Part II: Configurations (Pages) for details).
- Please Note: in this tutorial, we have presented images of our two demo sites, one using our WordPress plug-in (the top image) and one using Pages (the second image); your site may differ slightly in appearance due to your configurations/settings. However, the check out flow/process will be mostly the same in all cases.
- To place a new e-Store order, your user should navigate to the e-Store tab/page on your website
PLUG-INS
PAGES
- On the resulting screen, your users will see all of your ACTIVE e-Store products listed (Please Note: There is no way to prevent e-store products from showing online except to inactivate them). Please refer to this tutorial on how to add/edit products.
PLUG-INS
PAGES
- Users can search for the product/item they want to purchase by typing the product name, if they know it, and/or by searching by category.
PLUG-INS
PAGES
- After filling out the search box or search category drop down, the user must click the Search button. To clear the search box or the search category drop down, users can click the Reset button.
PLUG-INS
PAGES
- Every product will have its selling price, member price (if you have special pricing for your members), and product description.
PLUG-INS
PAGES
- To view the full description, the user can click on the Read More link to open a pop up window with the full description.
PLUG-INS
PAGES
- To purchase an item, the user should start by adding the item to their order. In the WordPress Plug-In, the user will select quantity and then click Add; in Pages, the user will click the Add button and then adjust quantity in the order pane on the right.
PLUG-INS
PAGES
- If the item has custom fields/needs custom information (such as size or color), the user will need to fill in those fields as well.
PLUG-INS
PAGES
- If the user wants to add two of the same item but with different custom settings (for example, two of the same t-shirt but one sized medium and one sized extra large, the user should add the two items to the order separately/as two separate items (rather than selecting quantity 2, they would select quantity 1, select the size, and add, then repeat these steps).
- The user can continue adding items to the order in this way until they have selected all of the items they want. If they want to remove an item from the order, they can delete the item/product by clicking on the trash can icon in the order summary.
PLUG-INS
PAGES
- Once the user has selected all of the items they want to add to the order, they can click the Add to Cart and Continue Shopping button to continue shopping (to add a donation, membership, and/or event registration) (if you have enabled the shopping cart option) or the Checkout button to be taken straight to the checkout page. Please Note: in plug-ins, the user will first have to click the Proceed button at the top of the page and then fill in their personal information (and shipping address if shipping address is required for the item) before being presented with the Add to Cart/Checkout buttons.
PLUG-INS
PAGES (Add to Cart and Continue Shopping if cart/profile is enabled)
PAGES (if cart is disabled)
-
To check out, if the user has added the item to the cart, they should click on the cart icon to be taken to the check out page. If the user selected Checkout in the previous step, they will be taken directly to the check out page. In Pages, the appearance of the checkout page and the steps to checkout will vary greatly depending on if you have the cart turned off or on, if you have public profiles turned on or off, and if the user has selected to proceed to the cart checkout page or to the direct checkout page.
PLUG-INS (direct checkout)
PLUG-INS (cart check out)
PAGES (direct checkout )
If Profiles are Enabled (users get this pop-up)
PAGES (cart checkout)
-
In Pages, if using the direct checkout option and public profiles are enabled and the user did not log in prior to clicking the checkout button, the user will be prompted to log-in or checkout as a guest. If they opt to check out as a guest, then they will be prompted to indicate if they are checking out as an individual or an organization. In using the cart check out option (and profiles are enabled), then the individual/organization toggle is in the personal information section. In Plug-Ins, the checking out as an individual or organization prompt is in the personal information section on the page after user clicks Proceed (before adding to cart or opting to go to the direct checkout page).
PLUG-INS
PAGES (direct check out)
PAGES (cart checkout) - The user will have the option to delete/remove items from the cart by clicking the trashcan icon. Please Note: there is no delete option in pages direct checkout.
PLUG-INS (direct check out)
PLUG-INS (cart check out)
PAGES (cart check out)
- The user can also add a discount/coupon code.
PLUG-INS (direct check out)
PLUG-INS (cart check out)
PAGES ( direct checkout)
PAGES ( Cart checkout and direct checkout when cart and profiles are turned off)
- If you have enabled the Optional Donation on Checkout option, the user can add an optional donation (if there is not already a donation in the cart). Please Note: there is no option for Optional donation in pages for direct checkout, only for cart check out.
PLUG-INS (direct check out)
PLUG-INS (cart check out)
PAGES (cart checkout)
- In all checkout flows, the user will have the option to choose to Pay Later (if you have activated the pay later option within your system) or to pay now.
PLUG-INS (direct check out)
PLUG-INS (cart check out)
PAGES (Direct Checkout)
PAGES (cart checkout and direct check out when cart and profiles turned off)
- Otherwise, credit cart/payment information will be required to complete the transaction. If the user is using a browser that has the digital wallet feature (Chrome, Edge, or Safari) and has enabled Digital Wallet, the Digital Wallet (Apple Pay, Google Wallet, Microsoft Wallet/Pay) will show as a payment option as well as direct credit card entry.
Please Note: To present Apple Pay as payment option, first you have to enable it. To know how to enable Apply Pay as payment option, please read the tutorial How to enable Apple Pay as Payment option.
PLUG-INS
PAGES (cart checkout and direct check out when profiles and cart turned off)
- The user can check the Add This Card on file and Set as Default checkbox to save their credit card information on file to be used for future payments/transactions (so they don't have to enter it again in future). Please Note: no credit card information is saved inside CRM. We save only a randomly assigned unique identifier; all credit card numbers are stored in Stripe, which is encrypted, so your users should feel confident saving their credit card number on file.
PLUG-INS
PAGES (direct check out)
PAGES (cart checkout and direct checkout when cart and profiles turned off)
- Finally, the user should click the checkout button to complete the transaction.
PLUG-INS
PAGES (direct checkout)
PAGES (cart check out and direct checkout when cart and public profiles turned off)
- If the user entered mode of payment as Credit Card and the card issuer requires "Strong Customer Authentication" (referred to as SCA or PSD2 authentication), a box will pop up asking the user to initiate the authentication process. SCA is a new requirement for credit cards issued by European banks or for credit card transactions taking place on European websites for the card holder to authenticate an online purchase by indicating they are the ones who has initiated/authorized the transaction (see this explanation of SCA from Stripe for more information).
- The user will need to click the authenticate button and then completes the validation process. Once they do (and authentication is completed successfully), the transaction will finish saving automatically.
- If the card holder fails to authenticate the transaction within the specified time frame or denies the transaction, a authentication failed message will appear on the screen. User will need to try to process payment again or make the donation using some other form of payment.
- After the transaction has finished being processed, the user will see a confirmation page. In the Plug-Ins, you can customize this thank you screen; in Pages you cannot.
PLUG-INS
PAGES
Comments
0 comments
Article is closed for comments.