eCommerce

Adding Payment Method VTex Store


VTex! One of the very cool integrations that VTex includes, straight out of the box is that there are many different method payments you can add to your store. In this article, I will be explaining step by step how to setup a payment method in the checkout section of the site. (For this example, we will be associating PayPal as a payment method in the PCI Gateway Module in the VTex Admin Panel)

In order to make a checkout you have to have some sort of payment method your clients can checkout from. By default, it looks something like this:
Unavailable Checkout Method Vtex

So, what if I try and checkout if I don’t have any payment information? Will it still work? What will happen? Well the answer is simple. Nothing Will happen. You will simply get and error. Like this:
Error message payment checkout without configuration

So, we need to configure a payment method for our users. In the VTex admin panel, you should switch from the current module that you currently in to:
Switching modules VTex admin panel

Once you are in the PCI Gateways Module, click on Settings.
go to settings pci gateway vtex

After clicking settings from the PCI Gateway module, you will be taken to PCI Gateway affiliations click on the green plus sign to affiliate payment method.
add gateway affiliation vtex admin panel

You will see a bunch of different options you can select from. This is where you will configure your payment method and where you will be receiving payments from.
Payment connectors gateway affiliation

Select PayPal and you will see something like this:
Setting up account information vtex admin panel

On the left side if what you wish to call this configuration, it is just a simple name you can select for this type of configuration. It is very helpful when you have multiple accounts. On the right side, you have the complete information from your PayPal account. If you are testing your environment then create a Sandbox account by going to https://www.sandbox.paypal.com. Then go to developer.paypal.com and click on accounts in the sidenav.
paypal sandbox configuration

Then click on your business profile and click on profile link.
profile link paypal sandbox account

Now go to the API Credentials tab. This is the information that you will input into your papal account configuration in the VTex Admin panel.
paypal api credentials for vtex payment

When you are done filling in your credentials into your VTex Admin Panel, then you will have to click on the Payment Conditions Tab in your Admin Panel. Now we are going to have to add a payment condition to our store.
add payment condition vtex admin panel

Now select PayPal and fill in the following information:
set VTex payment condition

Once you save your information, you will see the payment type that you just added in your checkout under the payment section.
paypal payment checkout vtex store

And that is how you add a payment method to your VTex store using PayPal.
Keep in mind that any change that you make to your store might take a few minutes to reflect on the site.

Beginner
ReactJS: Loops in JSX
eCommerce
IRCE recap: Experimental retail, ecommerce UX and personas creation
Agile
Top 5 Reasons to Use Agile Development When Building an Ecommerce Website