DyScan Web Integration Guide

Integration

Pre-flight list

Please follow the instructions below and send the results to Dyneti's contact person.

  • Create or reuse a subdomain dedicated for sending card data processing requests to your API, e.g. api-card-transaction.yourcompanyname.com. Send us the name of this subdomain.

  • Setup the Dyneti proxy DNS record for your subdomain (described below)

  • Send us info about any endpoints that will deal with the card data:

    • endpoint name, e.g. /transaction

    • endpoint request format, e.g. json

    • name of the field that will carry card data, e.g. card_number, card_data.number

    • any other comments that are worth to mention

  • Send us your API's final address that the request is supposed to reach, e.g. api.yourcompanyname.com

Dyneti proxy setup

You need to add a CNAME record for your API subdomain that will point to our proxy. This way, our tokenized data can be transformed to real data on the way to your API. This process is required under PCI-DSS compliance. The CNAME record may look like this:

api-card-transaction.yourcompanyname.com CNAME proxy.dyneti.com

Flow

your frontend (with tokenized data) -> api-card-transaction.yourcompanyname.com -> proxy.dyneti.com -> api.yourcompanyname.com -> your backend (with real card data)

Implementation

Add the script tag to your html's head section to import DyScan Web

<script src="https://dyscan-web.s3.amazonaws.com/0.1.0/dyscan.min.js"></script>

Add the div tag with id dyScanView to your html's body section, so the sdk can generate the structures

<div id="dyScanView"></div>

You can access DyScan Web object in your JS file by referencing DyScan.

DyScan object contains the following methods:

setApiKey(apiKey) - sets API key for authorization purposes that can be obtained from Dyneti during integration process

setScanCallback(function(json){}) - sets a callback function for a successful credit card scan, jsonobject contains:

  • card_number - card number token that will change to the real card number on the way to customer's API

  • exp_date - expiry date of the card

setUseFrontCamera(enabled) - sets which camera will be used for scans with enabled flag values:

  • true for front facing camera

  • false for rear facing camera

toggleCamera() - toggles between front and rear facing camera used for scans

revealCardNumber(cardNumberToken, element) - appends real card number to specified html element with specified card number token

  • cardNumberToken - can be obtained from setScanCallback json response card_number field

  • element - html element to be used for injecting real card number

‚Äč