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