WooCommerce is one of the most popular platforms for developing e-commerce sites. With PixelPay as Payment Gateway you can easily accept credit and debit card payments in a WooCommerce store.
Note: Our Plugin does not support WooCommerce block based checkout. Currently, this functionality is under active development, which prevents us from making improvements while it is in this phase. Therefore, we recommend that you continue to use the shortcode-based checkout. Once WooCommerce completes development of the block-based checkout functionality, we will evaluate the possibility of revising our Plugin to incorporate this enhancement.
Plug-in: PixelPay WooCommerce Payment Gateway
Imagen 1: Plugin PixelPay WooComerce.
Step 1
Login to the administrative panel of the website and click on “Plugins”.
Type “PixelPay” in the search box and install the PixelPay plugin for WooCommerce.
Image 2: Install plugin.
At the end of the installation you must activate the plugin by clicking on the “Activate” button.
Image 3: Activate plugin.
NOTE:
In case you do not have the WooCommerce plugin installed, you need to add and activate it.
Image 4: Installing and activating WooCommerce plugin.
Step 2:
Log into your account on the PixelPay platform according to your service and go to the 'Preferences' section, followed by 'Api Options'.
In the section you will find the Key ID and Secret Key, which you should take note of because they will be entered in a form detailed in Step 6.
With these keys the merchant will be able to accept payments on the WordPress website.
Image 5: Key ID and Secret Id in API Options. https://www.pixelpay.app/admin/settings/app
NOTE:
The Secret Key value must be converted to an MD5 hash, the following application is recommended to perform this conversion: MD5 Hash Generator.
ℹ️ In the following links you will find more information about:
- Extract Key ID in API Options:
https://www.pixelpay.app/admin/settings/app
- MD5 hash:
https://www.md5hashgenerator.com/
Step 3:
To continue, it is necessary to know to which domain the transactions will be redirected.
When you log into your PixelPay account, you will find the domain in the address bar.
Example: https://{dominio}/admin/dashboard
As shown in the following image, the domain in this case is:pixelpay.app
Image 6: Finding domain.
NOTE:
Domain does not include the prefix http o https.
Step 4:
In the sidebar, click on the “Settings” section under “WooCommerce”. Then, you need to click on the “Payments” tab.
Image 7: Payment adjustment.
Step 5:
Find the “PixelPay” option in the “Payment Methods” list.
Click on the “Manage” button to access the Plugin configuration.
Image 8: Manage plugin.
Step 6:
Enter the keys extracted from Step 2and the domain extracted in Step 3 in the corresponding fields. Then save the changes.
Image 9: Enter Key, Secret Key and Endpoint.
NOTE:
The domain does not include the http o https. prefix.
Including the prefix in the PixelPay Endpoint Domain box will generate an error.
Step 7:
Check the plugin operation by going through the whole payment process in the web store.
At the moment of checkout, you will see PixelPay enabled as a payment method.
Image 10: PixelPay payment method.
Once the PixelPay payment method is selected and the order is placed, the PixelPay payment window will appear.
Image 11: Confirmation of payment.
Using Inline Payments
*Check the availability of this service with your bank's account agent.
From the plugin configuration, enable the “Activate tokenization” option. This payment method will allow customers to make their payments without any redirection, since the checkout process will be done from the website.
Image 12: Activate tokenization.
View from the checkout - Login user
This payment method also allows customers to be able to store their cards securely following PCI DSS standards.
Image 13: Payment form for logged in user.
View from the checkout - User without login
If the customer is not logged in, he will not be able to store his cards, but he will always be able to perform his transactions.
An alert will be displayed informing the customer that if they log in, they will be able to save their card.
Image 14: Payment form for user not logged in.
Card storage
In order for the customer to store his card, he must select the option “Save Card”, once he has logged in, and when he makes the payment, it will be stored automatically.
Image 15: Save card.
When the customer tries to make another purchase, the stored card will appear as follows:
Image 16: Saved card payment.
Comments
0 comments
Please sign in to leave a comment.