Pass Customer Data

Note: You can pass customer data only in payment flow ("intent": "sale" and secupayCheckout.enterPayment()).

Code example:

JavaScript
secupayCheckout.setCustomer({
salutation: 'Herr',
first_name: 'Max',
last_name: 'Mustermann',
email: 'max.mustermann',
street: 'Musterstr.',
street_number: '11 a',
zip: '09999',
city: 'Musterstadt',
country: 'DE'
});

A more complete example would look like this:

HTML + JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Demo-Shop</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="https://checkout.secupay.com/assets/css/secupay-checkout.css">
<script type="text/javascript" src="https://checkout.secupay.com/assets/js/secupay-checkout.js">
</script>
</head>
<body>
<h1>Demo-Shop</h1>
<form id="order_form">
<p>
<label for="salutation">Anrede</label><br/>
<select id="salutation" name="salutation">
<option value=""></option>
<option value="Herr">Herr</option>
<option value="Frau">Frau</option>
</select>
</p>
<p>
<label for="first_name">Vorname</label>, <label for="last_name">Nachname</label><br/>
<input id="first_name" name="first_name" type="text" required style="width:15em;"/>
<input id="last_name" name="last_name" type="text" required style="width:15em;"/>
</p>
<p>
<label for="street">Straße</label>, <label for"house_nr">Hausnummer</label><br/>
<input id="street" name="street" type="text" required style="width:27em;"/>
<input id="house_nr" name="house_nr" type="text" required style="width:3em;"/>
</p>
<p>
<label for="additional_address_data">Adresszusatz</label><br/>
<input id="additional_address_data" name="additional_address_data" type="text" style="width:31em;"/>
</p>
<p>
<label for="zip_code">PLZ</label>, <label for="city">Ort</label><br/>
<input id="zip_code" name="zip_code" type="text" pattern="^\s*\d{5}\s*$" required style="width:5em;" title="Die Postleitzahl muss aus 5 Ziffern bestehen."/>
<input id="city" name="city" type="text" required style="width:25em;"/>
</p>
<p>
<label for="email">E-Mail</label><br/>
<input id="email" name="email" type="email" required/>
</p>
<p>
<button type="submit">Gutschein 50 € bestellen</button>
</p>
</form>
<script>
 
// configure Smart Checkout
secupayCheckout.setOptions({
contractId: 'GCR_WA66JUP62PNVHBHCXA57PRUNKZP0P5',
isDemo: true,
intent: 'sale',
lang: 'de',
merchantUrls: {
url_success: 'https://shop.example.org/goodbye.html',
url_error: 'https://shop.example.org/shop.html',
url_abort: 'https://shop.example.org/basket.html'
  }
});
 
// handle form submit
const form = document.getElementById('order_form');
form.addEventListener('submit', event => {
// build customer
var salutation = document.getElementById('salutation').value;
var additional_address_data = document.getElementById('additional_address_data').value.trim();
secupayCheckout.setCustomer({
salutation: salutation.length == 0 ? null : salutation,
first_name: document.getElementById('first_name').value.trim(),
last_name: document.getElementById('last_name').value.trim(),
email: document.getElementById('email').value.trim(),
street: document.getElementById('street').value.trim(),
street_number: document.getElementById('house_nr').value.trim(),
additional_address_data: additional_address_data.length == 0 ? null : additional_address_data,
zip: document.getElementById('zip_code').value.trim(),
city: document.getElementById('city').value.trim(),
country: 'DE'
});
// build basket
secupayCheckout.setBasket([
{
name: 'Gutschein 50 EUR',
price: 5000, // €50.00
quantity: 1,
tax: 0
}
]);
// start payment
secupayCheckout.enterPayment();
// prevent HTTP query
event.preventDefault();
})
</script>
</body>
</html>

This example is complete. You can just copy this code into a new HTML file, and open it in your browser. It will look like this:

images/download/attachments/97373932/image2021-1-5_11-22-35.png