Follow this step-by-step guide to deploy our onvirtual.cards demo application. This guide covers the following steps:
- Creation of Innovator Account
- Selection of Payment Model
- Configuration of Payment Model
- How to fetch Profile IDs and API Keys
- Downloading source code for demo app from Github - onvirtual.cards
- Configuring demo app - onvirtual.cards
- Deploying demo app - onvirtual.cards
- Using demo app - onvirtual.cards
1 Create innovator account
Open an innovator account at https://portal.weavr.io/register
The next 3 screens offer a quick tour about Weavr.
2 Select payment model
Next up, choose a payment model. Weavr currently offers three payment models - you can find more information about the payment models here.
For this onvirtual.cards demo, please select "Business Purchasing". Note that currently, you can only choose one payment model for every innovator account. If you need a different payment model, you will need to open a new innovator account (or contact us for assistance).
3 Configure payment model
Now follow the configuration wizard to fill in details about the application that you're building.
Start by giving a name to your application, and an email address that we should contact in case of technical support.
On the Corporate Identity profile screen, fill in a URL for email verification.
As part of our due diligence we need to verify that any end-user email address entered is valid. To do this, we send an email (using your brand and style as designed by you) including a randomly generated verification code to your end-user. The verification email includes a link to your application, as entered on this screen, so that the verification will happen through your user experience. So on this screen, you need to enter your URL. Note: it is fine to enter a fake (but correct syntax) URL at this stage. It can be updated later on.
Next choose the currencies that you want to operate in. Please choose EUR.
On the virtual card profile screen, fill in:
- Choose the currencies you want to issue cards in. Please choose EUR.
- Card Type: Virtual. Plastic will be coming soon.
- Card Brand: Mastercard. Other brands will be coming soon.
For the Transfer transaction, you can set cardholder fees. These fees are revenues that you earn from your customers.
That's it! Configuration is now complete.
4 Fetch profile IDs and API keys
Now you need to write down some information from the configuration, which will be used in the API calls from your application.
By clicking on GET API KEY, take note of the following details:
- Application Id - Shared Key - Secret Key - Corporate Identity Profile Id - Managed Account Profile Id - Managed Card Profile Id - Transfer Profile Id
5 Download source code for demo
We are now going to clone the source code from our github repository using:
git clone https://github.com/weavr-io/onvirtual.cards.git
6 Configure and build demo app
The demo app onvirtual.cards is made up of 2 parts:
- A front-end implemented in Vue.js
- A lightweight back-end (Nginx proxy) used to hide sensitive application data
Copy the file
cp .env.example .env
.env using your favourite text editor. Fill in the parameters noted in Step 4 above.
APPLICATION_ID= SHARED_KEY= CORPORATES_PROFILE_ID= MANAGED_ACCOUNTS_PROFILE_ID= MANAGED_CARDS_PROFILE_ID= TRANSFERS_PROFILE_ID=
Install npm dependencies:
In your application, you can have a different application structure but we strongly recommend to keep the Secret Key safely in your back-end.
The back-end stores the SECRET_KEY. In the
proxy folder you need to create a configuration file which includes the SECRET_KEY.
cd proxy export SECRET_KEY=$SECRET_KEY$ envsubst < default.conf.template > default.conf docker build . -t weavr-demo-app-proxy
7 Deploy demo app
Deploy locally using hot reload on
npm run dev
proxy folder, launch the docker container:
cd proxy docker run -p 81:80 -d weavr-demo-app-proxy
8 Use demo app
You can access the demo app at the following URLs: