VGS Collect.js

Demo of the payment form using VGS Collect to capture card data and Stripe Payment Element for alternative payment methods.
Explore the docs »

This demo application demostrates a payment form that:

• Uses VGS Collect to securely capture and tokenize card details (card number, expiration date, CVC).
• Utilizes Stripe Payment Element to support alternative payment methods while disabling the card payment option within Stripe.

This approach is ideal for businesses that want to capture card data outside of Stripe (using VGS) while still offering popular digital wallets and alternative payment options through Stripe.

Run application locally

Prerequisites

• Node v20+
• Stripe Account
• VGS Vault

1. Disable cards payment method for Stripe Payment Element

The demo application uses Automatic Payment Detection for Payment Element, to configure Stripe to exclude the card payment option and only show alternative payment methods open the Stripe's Dashboard and navigate to settings. Click on Cards method and turn it off.

2. Setup environment variables

Setup Stripe env variables

Go to the server/node folder and rename the .env.example file into .env file and replace values:

STRIPE_PUBLISHABLE_KEY=<replace-with-your-publishable-key>
STRIPE_SECRET_KEY=<replace-with-your-secret-key>
STRIPE_WEBHOOK_SECRET=<whsec_...>

You will need a Stripe account in order to run the demo. Once you set up your account, go to the Stripe developer dashboard to find your API keys.

Setup VGS env variables

Go to the client/react-cra folder and rename the .env.example file into .env file and replace values:

• VITE_VGS_VAULT_ID - VGS vault identifier you want to send card data to.
• VITE_VGS_VAULT_ENV - VGS vault environment.

VITE_VGS_VAULT_ID=
VITE_VGS_VAULT_ENV=

3. Start server

Navigate to the server/node folder, install dependencies and start the server:

cd server/node
npm install
npm start

4. Start client

To run the React client locally install the dependencies and start React application:

cd client/react-cra
npm install
npm start

5. Open and test application

The sample will run in the browser at http://localhost:3000.

Card number test values:

Field	Value
Card Number	4111 1111 1111 1111
Exp. Date	05/2030
CVC/CVV	Any 3 digits

When the user fills in their card details, an app is using VGS Collect to tokenize the card fields. Once you have the VGS token, you can send this token to your PSP (Payment Service Provider) instead of sending raw card details (not shown in the demo). The PSP then uses this token to process the payment.

If the user selects an alternative payment method, Stripe Payment Element will capture the necessary data for that method during form submission. Let Stripe handle the payment confirmation and user redirection based on the success or failure of the transaction.