VTEX

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. It offers a wide range of features for product management, payment processing, logistics, and personalized shopping experiences. VTEX is globally used, known for its omnichannel focus and adaptability to businesses of all sizes and sectors.

VTEX Integration Guide

OrkestaPay integrates seamlessly with VTEX to handle payments efficiently. Follow these steps:

1 - Account Setup

Ensure your OrkestaPay account is properly configured.

2 - Copy integration credentials

After registering, go to the Developers section in the side menu. Copy and save the credentials displayed, as you will need them for the plugin configuration.

3 - Webhook Configuration

It is necessary to set up a webhook to notify VTEX of completed payments. To do this, you can follow our Webhooks configuration guide. However, it is important to note that the URL to be entered during the setup is as follows: https://vtex-connector.orkesta.io/webhook/{vtex_account_name}

Where you should replace {vtex_account_name} with your store's account name.

4 - Payment Connector Configuration

4.1 - Gateway Affiliation Configuration

In your VTEX admin portal, go to Store Settings > Payment > Providers. Click “New provider,” search for “Orkesta,” and select it.

Enter the credentials from OrkestaPay: Application key, Application token, and leave Webhook signing secret blank.

• 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 Save.

4.2 - Payment Conditions Configuration

In VTEX admin portal, go to Store Settings > Payment > Settings. Link the OrkestaPay connector to a credit card payment method (supports: American Express, Visa, MasterCard, Diners, Discover, and JCB).

Enable the method and save.

Promotions

OrkestaPay supports interest-free monthly payments, allowing you to configure payment options to suit your business needs. However, availability also depends on the terms set by the bank or payment service provider (PSP) involved.

5 - 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.

5.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

5.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:

5.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

6 - Go live

Update VTEX payment connector with production credentials and disable test mode.