DyScan Web Integration Guide

Integration

Pre-flight Checklist

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

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

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

  • Send us the below information about any endpoints that will deal with 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

  • 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.

<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

‚Äč