VTEX
  • 19 Jun 2024
  • 3 Minutes to read

VTEX


Article summary

What is VTEX?

VTEX is an e-commerce platform and cloud commerce solution that allows businesses to create and manage highly customized and scalable online stores. This platform offers a wide range of features and tools for product management, payment processing, logistics, and personalized shopping experiences. VTEX is used around the world and is known for its focus on omnichannel and the ability to adapt to the needs of businesses of all sizes and industries.

VTEX Integration Guide

To integrate OrkestaPay with the VTEX platform, you need to follow the following steps:

1 - Register an account

You need to have an OrkestaPay merchant account to carry out the integration.

2 - Copy integration credentials

Once you have registered your account, go to the Developers section found as an option in the side menu. 

You need to copy and save the credentials shown on the screen, later you will have to enter them in the plugin's configuration screen.

OrkestaPay (9)(1)(3)

3 - Payment Connector Configuration

3.1 - Gateway Affiliation Configuration

Within your VTEX merchant management portal, select the Store Settings > Payment > Providers option.

Click on the top button "New provider" and enter the name "Orkesta" in the search engine of the modal window and select the only result that is shown from the list.

Providers(1)

The payment connector configuration screen will be displayed where you must enter the data obtained from the OrkestaPay portal:

  • Application key: Place the "Client ID" obtained in the OrkestaPay portal

  • Application token: Place the "Client Secret" obtained in the OrkestaPay portal

  • Webhook signing secret: Leave blank for the moment

Click on the Save button.

Providers (1)(1)

Connector Mode

If you want to perform integration testing, enable the "Enable test mode" option. It is valid that the mode of the connector and the keys entered correspond to the desired mode of operation.

3.2 - Payment Conditions Configuration

Within your VTEX merchant management portal, select the Store Settings > Payment > Settings option .

Click the green top-right button to link the OrkestaPay connector to a credit card payment method. Currently supported: American Express, Visa, Master Card, Diners, Discover and JCB.

Settings

The following screen will be displayed where you must select the previously configured connector and enable the payment method by activating the Status toggle, then click on the Save button.

Settings (1)(1)

Interest-free months

OrkestaPay supports MSI, that is, you can make the configuration you consider necessary for your business without problems.

4 - Google Tag Manager (GTM) Setup

In order for your VTEX store to work properly with OrkestaPay, an additional configuration is required that is managed through Google Tag Manager.

Once inside the Container and selected the Workspace (the one that comes by default can be used), you will have to configure a Trigger and a Label.

4.1 - Configure Trigger

  • Select Event Type: Custom Event

  • Event Name: .*

  • Check checkbox for the Use a regular expression that matches

  • Select the Certain Custom Events option for the This trigger is triggered in

  • Configure condition: Event -> contains -> payment

4.2 - Configure Label

  • Tag Type: Custom HTML

  • Add Next Script

  • Link Previously Configured Trigger

<script type="text/javascript" src="https://checkout.orkestapay.com/script/orkestapay.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        vtexjs.checkout.getOrderForm().done(function (orderForm) {
            var credentials = { merchant_id: 'REPLACE_VALUE', public_key: 'REPLACE_VALUE', is_sandbox: true };
            var orkestapay = initOrkestaPay(credentials);
            orkestapay.getDeviceInfo().then(function (result) {
                window.vtex.deviceFingerprint = result.device_session_id;
            });
        });
    });
</script>

IMPORTANT

You must replace the value of the credentials: merchant_id, public_key and is_sandbox

The result will look something like this:

Captura de pantalla 2024-06-04 a la(s) 1.30.23 p.m.

4.3 - Configure Google Tag Manager in VTEX

Once the configuration process in the Google Tag Manager is finished, it will be necessary to copy the GTM Container ID within the VTEX store, for this we will follow the following steps:

  1. Log in to Storefront > Checkout

  2. Click the configure button (gear icon)

  3. On the next screen, select the Checkout tab

  4. Capture the GTM container ID (which is formatted like this GTM-XXXXXX)

  5. Click Save

5 - Go live

To start transacting, you need to set up production credentials in the VTEX payments connector that we saw in step 3 and disable test mode.


Was this article helpful?

What's Next