Skip to main content
Unlisted page
This page is unlisted. Search engines will not index it, and only users having a direct link can access it.

Forms

DyScan Forms are an easy way to collect and tokenize payment information without ever handling the sensitive values yourself.

Prerequisites

  1. Request both a Shareable API Key and a Payment Token API Key from Dyneti.
  2. Provide Dyneti with the Worldpay user/password pair you would like to use to tokenize the card number.
  3. Provide the domains on which the integration will be hosted to Dyneti.
  4. Add the DyScan Forms client script to your page
<script src="https://dyscanweb.dyneti.com/static/front_end/dist/forms.js"></script>

1. Create the form

const form = new DyScan.Form({
key: shareableApiKey,
config: config
});

2. Attach the form to your checkout form

HTML Form Method

If you are using a standard HTML form you can simply attach the Dyneti Form inline.

<html lang="en">
<head></head>
<body>
<form action="/checkout">
<div id="attach-dyneti-form-here"></div>
<input type="email" name="email" placeholder="me@example.com">
<input type="submit" value="Checkout">
</form>
</body>
</html>
const attachmentEl = document.getElementById('attach-dyneti-form-here')
form.attach(attachmentEl)

When the form is submitted your backend will receive the fields in your form along with a dyneti-form-id

@app.route('/checkout', methods=['POST'])
def handle_form():
# Get form data
email = request.form.get('email')
dyneti_form_id = request.form.get('dyneti-form-id')

print(f"Email: {email}, DynetiFormId: {dyneti_form_id}")

JS/XHR form submission

If you are using Javascript/XHR to submit your checkout values to the backend you can read the form id from the form object via the getId() method:

<html lang="en">
<head></head>
<body>
<h2>Checkout flow</h2>
<div id="attach-dyneti-form-here"></div>
<input id="email" type="email"/>
<input id="submit-form" type="submit"/>
</body>
</html>
const submitButton = document.getElementById('submit-form')
submitButton.onclick((ev)=> {
const data = {
email: document.getElementById('email').value,
dynetiFormId: form.getId()
}

fetch('/checkout', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
})

3. Exchange the Dyneti Form ID for a Worldpay Token

Make a request to Dyneti's server from your backend server to exchange the Dyneti Form ID for a Worldpay token.

import requests
PAYMENT_TOKEN_API_KEY = 'example-key-abcd-1234'

def exchange_token(dyneti_token):
response = requests.get(f'https://dyscanweb.dyneti.com/api/v1/worldpay/form/{dyneti_token}', headers={
'X-API-KEY': PAYMENT_TOKEN_API_KEY
})
worldpay_token = response.json().get('token')
return worldpay_token