[GUIDE] How to set up checkout options and payment methods?

Table of Contents

Modal Checkout

Modal checkout is our default standard checkout method, which includes all the necessary features. However, it only supports a limited number of payment gateways. The payment gateways available with modal checkout include popular ones like Stripe, PayPal, 2Checkout, Authorize.net, PayUbiz, DPO, IPay88, Onepay, OnepayATM, PayUMoney, PayUlatam, Mercado Pago, and Billplz. 

Notice: Please TURN OFF the WooCommerce checkout function, if you decide to USE the Modal Booking Method for the checkout page. Go to Theme Options > Booking Options > WooCommerce  Options to turn it off

Note for Deposit Options: Traveler theme offers deposit options exclusively for modal checkout and does not currently support deposit functionality for WooCommerce checkout.

Because Modal checkout refers to the built-in checkout system provided by Traveler theme so customers have the option to pay a deposit amount for their bookings. On the other hand, if you choose to use WooCommerce checkout with Traveler theme, the deposit functionality is not available.

Creating a checkout page

  1. Create a new checkout page by going to the Pages > Add News
  2. Add the title of the new checkout page, “Checkout Modal“, for example
  3. Set the Page Template on the Page Attributes to Checkout and Publish it
Checkout Image 1

Creating Payment Success Page

  1. Create a new payment success page by going to Pages> Add News
  2. Add the title of the new checkout page, “Booking Success“, for example
  3. Set the Page Template on the Page Attributes to Payment Success and Publish it
Checkout Image 2

Setting up Booking Page

  1. Go to Theme Settings> Page Options to set up the page for checkout and payment booking success
  2. For the Select Page for Checkout, select the page “Checkout Modal
  3. For the Select Page for successfully booking, select the page “Booking Success
Checkout Image 3

To fix the issue of the checkout page not displaying properly, please make sure that Cart Page and Checkout Page need to keep it blank on WooCommerce Settings

  • Go to the WooCommerce > Settings > Advanced tabs
  • Scroll down to the Page Setup, find the Cart Page and Checkout Page to keep it blank that means the cart page and checkout page of WooCommerce must be empty
 
Note: the checkout of the membership package uses Modal Checkout only
Checkout Image 17

How to add Payment Gateways for Modal Checkout

  1. Go to Theme Settings>Extension> Plugin to add more multiple payment gateways
  2. On the Theme Settings > Payment Options, fill in all the necessary information of each payment gateways
Checkout Image 9

Paypal Options

This method allows your users to book a service and pay instantly using their PayPal account. To enable this method, all you need to do is enable PayPal and enter your PayPal information. If you enter the wrong information, the client will not be able to make a reservation anymore.

Payment Options Paypal Image 1

How to get Paypal Client ID and Paypal Client Secret

Note: The ID&Secret of Sandbox mode is different with ID&Secret of Live mode. Kindly generate in the right mode (sandbox or live mode) for your work. The Live mode requires PayPal Business Account

Payment Options Paypal Image 3
  • Choose the App Type of your Paypal account
Payment Options Paypal Image 4
  • Copy your Client ID and Secret Key on Theme Settings > Payment Options > Paypal
Payment Options Paypal Image 5

Stripe Options

This payment method lets your users book a service and pay for it using their Stripe account right away. To enable this method, you just need to enable Stripe and enter some necessary information such as your Stripe Secret Key, enabling Sandbox Mode, and providing your Stripe Test Secret Key for Sandbox mode. If you enter the wrong information, the client will not be able to make a reservation anymore.

To get the Publishable Key and the Secret Key from Stripe, you need an account at Stripe (www.stripe.com)

  • Now that you have logged in to Stripe, the dashboard opens. In the left menu, first click on “Developers” and then on “API keys
Checkout Image 12
  • Once you have clicked on “API keys“, the page with the API keys opens. Under Standard Keys you will see the Publishable Key and above the Secret Key there is a button “Reveal live key token“. Now click on it to display the secret key.
Checkout Image 13
  • To switch Stripe to the Sandbox (Test Payments) mode or Live (Real Payments) mode, click on “View test data” in the left menu. Note that Sandbox and Live Mode have different keys
Checkout Image 14

Go to Theme Options > Payment Options > Stripe to enter your Stripe’s account information

  • Return URL: your domain url, such as https://modmixmap.travelerwp.com/
  • Input Key in the sandbox if you are using Test mode or disable Sandbox mode to use key in Live mode.

Stripe secret API keys start with either sk_live_ (for live keys) or sk_test_ (for test keys). Similarly, Stripe publishable API keys start with pk_live_ or pk_test_

2Checkout Options

This payment method allows your users to book a service and pay right away using the Authorize.net system. To enable this method, you just need to turn on 2Checkout and enter some private information such as your Account Number, Public Key, and Private Key. You also can enable Test Mode to test the payment.

To get the Public Key and the Private Key from 2Checkout, you need an account at 2Checkout website and copy these key on Theme OPtions > Payment Options > TwoCheckout

Here is the video to show you how to install and add payment gateways for your site. And go to Theme Settings > Booing Options to set up more options right here

WooCommerce Checkout

WooCommerce checkout is the alternative checkout method, which has fewer functions but is able to integrate a payment gateway from the WooCommerce system. With some unique payment gateway, customers will use WooCommerce Checkout only.

The limitation of WooCommerce Checkout

  1. Use WooCommerce only for the checkout function. Other WooCommerce functions are not supported
  2. WooCommerce Checkout uses the WooCommerce email template (not the Traveler email template). Therefore, it does not provide these partner-related emails
  3. Cannot cancel WooCommerce order from customer-side
  4. Tax and booking fees are not supported
  5. Cannot set a specific payment gateway for the specific item
  6. Coupon code is not applied on WooCommerce checkout page
  7. Guest Name field is not showed up on WooCommerce checkout page
Checkout Image 23

To turn on the WooCommerce checkout function, navigate to Theme Options > Booking Options > WooCommerce Options to turn it on then setup these required page

Or, you can run WooCommerce > Status > Tools > Create default WooCommerce pages – Create pages if you have not setup any WooCommerce Page

Creating Cart Page

  1. Create a new cart page by going to the Pages> Add News
  2. Add the title of the new cart page, “Cart”, for example
  3. Insert the shortcode to the page [woocommerce_cart] like the image below
  4. Set the Page Template on the Page Attributes to Default Template and Publish it

Creating Checkout Page

  1. Create a new checkout page by going to the Pages> Add News
  2. Add the title of the new checkout page, “Checkout Woo”, for example
  3. Insert the shortcode to the page [woocommerce_checkout] like the image below
  4. Set the Page Template on the Page Attributes to Default Template and Publish it
Checkout Image 29

Creating My Account Page

  1. Create a new my acount page by going to the Pages> Add News
  2. Add the title of the new my account page, “My Account”, for example
  3. Insert the shortcode to the page [woocommerce_my_account] like the image below
  4. Set the Page Template on the Page Attributes to Default Template and Publish it

Setting up Booking Page

  1. Go to the WooCommerce>Settings>Advanced to set up the page for the checkout process
  2. Scroll down to the Page Setup, find the Cart Page, Checkout Page and My Account Page to select the page to display.
  3. For the Cart Page, choose the ” Cart “
  4. For the Checkout Page, choose the ” Checkout Woo “
  5. For the My Account Page, choose the” My Account ” and click Save Changes to finish it
Checkout Image 22

Here is the video to show you how to set up WooCommerce

How to add Payment Gateways for WooCommerce Checkout

  • Go to the WooCommerce> Settings> Payments to enable the payment method you want. There are 3 different payment methods for you to choose from, which are Direct Bank Transfer, Check Payments, and Cash on Delivery
  • And Click Manage to edit the basic information of each payment method
Checkout Image 24
  • Click Discover Other Payment Providers to choose your payment gateways
Checkout Image 25
  • You can choose other payment providers for your site and download it
Checkout Image 26
  • Go to Plugin > Add News > Upload Plugin to add the file you’ve just downloaded
Checkout Image 27
  • On Payments, you can see the installed payment method right there
Checkout Image 28

$79