Pass Customer Data
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: