Documentation

HPWD OpenCart Extension Documentation

Doc: HP Quick Checkout with Social Login

HP Quick Checkout is an OpenCart extension to increase customer checkout speed compared to the default opencart checkout feature, this extension is also equipped with a login feature using social media such as Facebook or Google.

Pre Install

Please follow pre install section here if you haven't proceed one before: https://hpwebdesign.io/pre-install
After completing the above steps, you can proceed with the installation as follows:

NB: You can disable base theme modification after installation.

Installation

1. After purchasing Module HP Quick Checkout, you will get a file with the name XXXX.ocmod.zip format.

2. Navigate to page Extension → Extension Installer, then upload the file with the name XXXX.ocmod.zip earlier.

NOTE
On OC 2.x
Make sure the upload process until there is a success message: Success: The extension has been installed!
If an error message appears: … is using the same ID code as the one you are trying to upload!
It means you have uploaded the same file before. So you don't have to re-upload it.
For the Update Process:
there will be a file override of the old file. Click the Continue button to continue the upload process.

3. Access menu Extensions → Modifications. Then click the Refresh button at the top right, as shown in the following image.

Refresh Mods – HP Social Login OpenCart

4. Access the module page. Extension → Module / Extension → Extension, filter for Module (OC →= 2.3.0.x). Click Install and Edit HP Quick Checkout. At this point you will see the settings page HP Quick Checkout or the shop validation page (if not previously validated). The same page can be accessed via the Admin Menu (HP Web Design → HP Quick Checkout).

5. Store Validation

Every purchase of the premium opencart extension on HP Web Design will be validated for a license when you want to use it on the website, this validation is carried out in connection with the license per purchase limit. Articles about the validation process can be read at the link https://hpwebdesign.io/how-to-get-license-key

6. General tab

Status : To activate the module.
Available Country : The country that the user can choose when filling in the address (please select at least 1 country for checkout).
Color Scheme : Cart and checkout page color theme that can be customized with the website theme.
Show Coupon Codes : To display a list of coupons on cart and checkout pages.
Checkout Success Checkout : Please activate it to get a better and more informative successful order page feature.

7. Tab Fields

8. Coupons tab

9. Shipping Methods tab

You can enable or disable the available shipping here (enable at least 1 shipping method for your needs during checkout process).

10. Payment Methods tab

You can activate or deactivate the available payment methods here (enable at least 1 payment method for your needs during the checkout process).

10. Facebook and Google Tabs

To activate the Facebook and Google login features, there are quite a lot of configurations done, please follow the explanation below.

Settings Login / Register Facebook

1. Go to the link https://developers.facebook.com/apps/

2. Click the button Create App

3. Select Consumer.

4. Fill Display Name with the name of the website you are using.

5. Click the Set Up button on Facebook Login.

6. Select Platform Web and enter your URL web.

7. Go to page Settings on Facebook Login.

8. Fill in the Form Valid OAuth Redirect URIs with :

https://{your domain}/index.php?route=checkout/checkout

setting OAuth redirect URI on hp social login opencart

9. Open the Basic page via the menu Settings > Basic. Fill in everything according to your web information except Namespace (optional).

10. Go to the App Review page > Permissions and Features. Click Get Advanced Access for public_profile and email. If you already Get Advanced Access it will appear as below.

11. Buat App Mode ke Live.

12. Copy App ID and App Secret, so you can see App Secret press button Show</strong >.

13. Return to the HP Social Login settings page and paste App ID and App Secret which you copied earlier. Don't forget to set Status so that On.

Settings Login / Register Google

1. Go to the link https://console.developers.google.com/apis/dashboard.

2. If you don't have a Project, click Select Project.

3. Click New Project, then fill in the data. If you have clicked the Create button.

4. Go to page Credentials then click Create Credentials. Select OAuth Client ID.

5. Select Web application in Application type and fill in URIs with :

For OpenCart 2.3 and OpenCart 3:

https://{your domain}/index.php?route=hp_qcheckout/hp_qcheckout_social_login/google


For OpenCart 4.0.2.3
https://{your domain}/index.php?route=extension/hpqcint/hp_qcheckout/google

Then press the button Create.

6. Copy Client ID and Client Secret.

7. Go back to the HP Social Login settings page and paste Client ID and Client Secret. Don't forget to set Status so that On.

This is how to configure HP Quick Checkout. That's all from us, hopefully useful. If there are difficulties, don't hesitate to ask us for further technical support.

Was this article helpful?

Yes No

0 out of 0 found this helpful