Forms
DyScan Forms are an easy way to collect and tokenize payment information without ever handling the sensitive values yourself.
Prerequisites
- Request both a Shareable API Key and a Payment Token API Key from Dyneti.
- Provide Dyneti with the Worldpay user/password pair you would like to use to tokenize the card number.
- Provide the domains on which the integration will be hosted to Dyneti.
- 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