Collect.js Sandbox Implementation Overview

Please use this guide as a supplemental resource for utilizing Astra's VGS vault when creating cards.

We recommend you first review this Getting Started guide from VGS before proceeding: https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/js/index

Documentation Resources:

• https://docs.verygoodsecurity.com/vault/developer-tools/vgs-collect/js/index

• https://www.verygoodsecurity.com/docs/vgs-collect/js/integration#integration-guide

• https://www.verygoodsecurity.com/docs/api/collect/#api-formusecname

Sandbox Variables:

Card Creation:

Please review the VGS Documentation Resources listed above before reviewing the following implementation examples.

Initialize the VGS form using Astra’s vault details and cname.  Example implementation snippet:

const vgsForm = window.VGSCollect.create('tntq1zbqvgz', 'sandbox', () => {}).useCname('secure.api-sandbox.astra.finance');

Invoke this resource similar to how the POST /v1/cards endpoint is used (except in this case sensitive card form field data is bound to front-end input form fields).  The User’s access_token must be used to authenticate the request.

❗We recommend that the access_token used for this purpose be created with a 300 second expiration (by specifying expires_in when generating the token).

Example form submission snippet (note the /v1/cards resource and Authorization header are specified):

document.getElementById("collect-form").addEventListener('submit', (e) => {

  e.preventDefault();

  vgsForm.submit('/v1/cards', 

  {

    headers: {

      Authorization: Bearer ${accessToken}

    },

  }, (status) => {

    if (status === 200) {

      console.log("success");

    }

  }, (error) => {

    console.log(error);

  });

});