# Registration UI
Customer Registration guides your users through the process of registration. It handles the full process of entering the card information as well as performing the full 3D Secure authentication procedure. Once everything is done you will receive a customer ID that can be used to perform payments with the user’s card, without the need for any interaction with the user.
# Registration
The Customer Registration user interface is web based. It can either be integrated in an existing web application or be used in native application via webview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Customer Registration</title>
<script src="https://merchant.intergiro.com/ui/onboard/intergiro-onboard.js"></script>
<link href="https:/cdn.merchant.intergiro.com/themes/light/index.css" rel="stylesheet">
</head>
<body>
<header><h1>Customer Registration</h1></header>
<main>
<form action="done" method="get">
<intergiro-customer-registration
api-key="<public-api-key>">
</intergiro-customer-registration>
</form>
</main>
</body>
</html>
A fully working example is available on GitHub.

Contact information can be set while registrating the customer by adding additional input fields in the form, with the attribute name
set to "name"
, "email"
or "phone"
.
To specify the customer number, populate the number
attribute of the component.
<form action="done" method="get">
<input type="text" name="name" placeholder="Name"/>
<input type="email" name="email" placeholder="Email"/>
<input type="tel" name="phone" placeholder="Phone"/>
<intergiro-customer-registration number="<your-customer-number>" api-key="<public-api-key>">
</intergiro-customer-registration>
</form>

Once the user has entered their card information and successfully performed the 3D Secure authentication the form will be submitted with the following data in the customer
field.
{
"id": "YXcOX1qYLFPSDLpi",
"number": "JoaOrAnJDwnlWEuE",
"method": [
{
"type": "card",
"created": "2020-03-09T20:53:12.776Z",
"scheme": "visa",
"iin": "411111",
"last4": "1111",
"expires": [2, 22]
}
]
}
# Adding Payment Methods
The customer registration component can also be used to add payment methods for an already existing customer. For this, add a customer
attribute with a Customer
object, or a stringified Customer
object, instead of specifying the number
attribute.
<intergiro-customer-registration
customer="<stringified-customer-object>"
api-key="<public-api-key>"
></intergiro-customer-registration>