CyberSource is a company that offers several solutions to help manage payments in your store. Among them are a gateway and anti-fraud, both with integrations available at VTEX.
If you want more information about integrating Cybersource anti-fraud into your store, go to Setting up CyberSource anti-fraud.
To use the Cybersource IO gateway in your store, the following actions are required:
- Install Cybersource IO applications (VTEX IO CLI)
- Create authentication keys in Cybersource (Cybersource environment)
- Perform Cybersource app settings (Admin VTEX)
- Configure Cybersource gateway (Admin VTEX)
- Configure payment conditions (Admin VTEX)
- Configurar o Device Fingerprint (opcional)
- Configure merchant fields (optional)
Installing Cybersource IO apps
The following Cybersource apps must be installed in your store account:
- vtex.cybersource-ui
- vtex.cybersource
- vtex.cybersource-payer-auth
If you intend to use Cybersource's anti-fraud system, but want to transact payments on a non-Cybersource gateway, you will need to install the vtex.cybersource-fraud app.
Learn more about installing applications on a VTEX account in Installing an app.
Creating authentication keys in Cybersource
After installing the apps, you must create authentication keys in the Cybersource environment.
Settings configured in an environment external to VTEX may be discontinued or modified without prior notice. Please check your Cybersource account for the latest information.
Follow the steps below:
- Access Cybersource's EBC panel (Enterprise Business Center) with your data.
- In the side navigation menu, select Payment Configuration > Key Management.
- Click Generate Key.
- In REST APIs, select the REST - Shared Secret option.
- Click Generate Key.
- Click Download key or copy the key information using the copy function located in front of the Key and Shared Secret fields.
Setting up Cybersource IO app
Once you have obtained the available authentication keys, it is time to configure the Cybersource IO app in the Admin.
Follow the steps below to configure the Cybersource IO app:
- In the VTEX Admin, go to Apps > Installed Apps > Cybersource, or type Cybersource in the search bar at the top of the page.
- On the Admin Settings tab, fill in or select the fields below:
Setting up Cybersource gateway
To configure the Cybersource gateway, follow the steps below:
- In the VTEX Admin, go to Store Settings > Payment > Providers, or type Providers in the search bar at the top of the page.
- On the provider's screen, click the
New Provider
button. - Type Cybersource IO in the search bar and click on the provider's name.
- In Provider Authorization, it is not necessary to fill in the App key and App token fields.
- If you wish to modify the identification name to be displayed for the Cybersource gateway on the VTEX Admin screen, enter the information in the Name field in Basic Information.
- In Payment Control, select whether you want to activate the provider in a test environment by clicking Enable test mode.
- In the Automatic settlement field, select one of the following options:
Setting up payment condition
To process credit card payments through Cybersource, follow the steps below:
- In the VTEX Admin, go to Store Settings > Payment > Settings or type Settings in the search bar at the top of the page.
- In the Payment Conditions tab, click on the + button.
- Click on the name of the desired credit card.
- Fill the Condition name field with a name of your choice for identification.
- Activate the condition in the Status field.
- In Process with provider select the Cybersource - IO option.
- If you want to use an anti-fraud system, select the Use anti-fraud solution option and choose your preferred provider.
- If you wish, you can also configure special payment conditions.
- Click Save.
If you have previously created credit card payment conditions for other gateways (including the legacy Cybersource provider), you can set those conditions to Inactive. In-progress transactions initiated from that provider will still be processed by that provider, even if it is inactive. Only new transactions will be processed by the new Cybersource IO provider. If you need to revert to your previous provider for any reason, simply set their payment conditions to Active and the Cybersource IO payment conditions to Inactive.
Setting up Cybersource IO Device Fingerprint (optional)
Device Fingerprint is an identifier that acts in payment processing to improve fraud risk analysis.
By collecting non-sensitive data, Device Fingerprint identifies and analyzes the security level of the device used to perform a given transaction. It also analyzes transactions previously performed with that device.
Each store must have only one Device Fingerprint registered. Check if you have already registered the Device Fingerprint in another connector, before proceeding with the steps below.
To configure Cybersource IO Device Fingerprint, follow the steps below:
- In the VTEX Admin, go to Store Settings > Storefront > Checkout, or type Checkout in the search bar at the top of the page.
- Click on the icon of the desired website.
- In the blue options menu located at the top of the page, click on Chode.
- In Files, click checkout5.custom.js.
- Enter the code below into the text field and click
Save
.
function addsDeviceFingerPrint() { if (!window.vtex) return; if (window.vtex.deviceFingerprint) return; $.ajax({ type: 'get', async: true, url: rootPath() + '/api/sessions?items=*' }).then(function(response) { var ORG_ID = "{{ORG_ID}}"; var MERCHANT_ID = "{{MERCHANT_ID}}"; console.log('session', response); window.vtex.deviceFingerprint = response.id; var sessionId = response.id || "CYBERSOURCE"; var script = document.createElement("script"); script.type = "text/javascript"; script.src = `https://h.online-metrix.net/fp/tags.js?org_id=$\{ORG_ID\}&session_id=$\{MERCHANT_ID\}$\{sessionId\}`; document.head.appendChild(script); var noScript = document.createElement("noscript"); var iframe = document.createElement("iframe"); iframe.style = "width: 100px; height: 100px; border: 0; position: absolute; top: -5000px;"; iframe.src = `https://h.online-metrix.net/fp/tags?org_id=$\{ORG_ID\}&session_id=$\{MERCHANT_ID\}$\{sessionId\}`; noScript.appendChild(iframe); document.body.appendChild(noScript); })}
Setting up merchant fields (optional)
Additionally, you can define custom fields that will be included in orders forwarded from VTEX to Cybersource.
See below how to create these fields:
- In the VTEX Admin, go to Aplicativos > Installed Apps > Cybersource, or type Cybersource in the search bar at the top of the page.
- On the Merchant Defined Fields tab, under Merchant Defined Information, you can insert fields following the following rules:
Examples:
Value entered in Admin under Merchant Defined Information | Simulated scenario | Result |
---|---|---|
`969{{Reference | PAD | 9:0}}` |
{{OrderId}}-01 | Where OrderId is 124578 | 124578-01 |
{{MiniCart.Buyer.LastName}},{{MiniCart.Buyer.FirstName}} | Where Buyer is John Doe | Doe,John |