Skip to content

Appendix D. How To Setup Payment Gateways

This appendix mentions the payment gateways setup in WooCommerce, and how's the operation in WcBot shopping cart. WcBot supports PayPal, Braintree credit card and Strip credit card payment gateways. The following sections mention its setup.

PayPal

The following sections shows how to obtain settings from PayPal to input those values to WooCommerce, how's the WcBot shopping cart looks and how the order handling after the payment.

Setup WooCommerce

Login to PayPal portal, then go to Profile screen:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Go to NVP/SOAP API screen:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Obtain the API username, password and signature:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

On the other-side, login to your WooCommerce admin, and go to Settings:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Go to PayPal checkout settings:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Copy & paste the values from PayPal to WooCommerce:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

WcBot shopping cart payment

WcBot has built-in shopping cart and payment. Below is the WcBot shopping cart window and payment screen. It retrieves all payment settings from your WooCommerce site. Below is the look of the payment screen:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

The customer pay with PayPal:

When PayPal successful, it returns to WcBot. WcBot creates an WooCommerce order and displays the order details as below:

Order handling in WooCommerce

Login to WooCommerce and go to order list:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

WooCommerce Order details:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

It hyperlinks to PayPal transaction details:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Braintree Credit Card

Although Braintree is acquired by PayPal in 2013, the setup is little bit easily than PayPal. The following sections show the steps to copy the settings from Braintree to WooCommerce, WcBot payment and order handling in WooCommerce.

Setup WooCommerce

Login to Braintree portal:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Go to API Keys Settings:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Obtain the ID values:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Now go to WooCommerce settings:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Copy & paste the keys from Braintree:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

WcBot shopping cart payment

When the customer pay with Braintree in WcBot:


If payment successful, WcBot displays Order Received screen:


Order handling in WooCommerce

Login to WooCommerce and go to order list:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

WooCommerce Order details:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Login to Braintree, directly search the transaction no.:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

The transaction details:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Stripe Credit Card

Stripe settings are similar to Braintree. The following sections show the steps to copy the settings from Stripe to WooCommerce, WcBot payment and order handling in WooCommerce.

Setup WooCommerce

Login to Stripe portal:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

After logged-in, go to API screen and obtain the tokens:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Now login to your WooCommerce and go to settings screen. And paste the tokens from Stripe:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

WcBot shopping cart payment

When the customer pay with Stripe in WcBot:


When the customer clicks the "Paid By Stripe" buttton, Stripe's payment screen popups:


If payment successful, WcBot displays Order Received screen:


Order handling in WooCommerce

Login to WooCommerce and go to order list:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

WooCommerce Order details:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

When clicking the transaction no. in WooCommerce, it opens Stripe transaction details automatically:


(Click here to enlarge the screenshot. When finish, click browser 'Back' to return)

Comments