Intergiro developer portal

# Verification

This section describes how to perform 3D Secure using <intergiro-card-input>. If you wish to have full control over the 3D Secure process you can build it yourself using the 3D Secure API.

# 3D Secure

Submit a card token together with a verification required error through the card input to initialize the 3D Secure cycle. This can render an invisible iframe for frictionless flow or a visible iframe that requires user interaction. The 3D Secure process may require several steps in order to succeed. The response will contain a new verification required error which is to be submitted to card input together with the card token.

{
  "status": 400,
  "type": "malformed content",
  "error": "verification required",
  "content": {
    "property": "card",
    "type": "Card.Creatable | Card.Token",
    "description": "verification required",
    "details": {
      "visible": false,
      "method": "POST",
      "url": "https://acs.sandbox.3dsecure.io/3dsmethod",
      "data": {
        "type": "method",
        "threeDSServerTransID": "d461f105-1792-407f-95ff-9a496fd918a9"
      }
    }
  }
}

Example of a verification required error.

# Order

How to use card input to create an order and verifying the payment with 3D Secure.

  • Tokenize the card by submitting to Intergiro Card Input.
  • Put the card in order.payment.card in the order creatable, post to create order endpoint.
  • If the response is a verification required error, please submit this error together with the card token to Intergiro Card Input, this will initialize 3D Secure cycle.
  • Post the new card token to the create order endpoint.
  • The last two steps might have to be done multiple times until the response is either an order or any error other than verification required.
<!DOCTYPE html>
<html>

<head>
	<script type="module" src="https://merchant.intergiro.com/ui/"></script>
	<link href="https://merchant.intergiro.com/theme/intergiro/index.css" rel="stylesheet">

	<script defer>
		const order = {
			number: "Card-Input-Example" + (Math.random() * 10000).toString(),
			payment: { type: "card" },
			items: 150,
			currency: "EUR",
		}
		async function create(order, card, error) {
			const element = document.querySelector("intergiro-card-input")
			card = await element.submit(card, error)
			let result
			if (typeof card == "string") {
				order.payment.card = card
				const response = await fetch("https://merchant.intergiro.com/v1/order", {
					headers: {
						"Accept": "application/json",
						"Content-Type": "application/json",
						Authorization:
							"Bearer <customer.api.key> | Bearer <private.api.key>",
					},
					method: "POST",
					body: JSON.stringify(order),
				})
				result = response.headers.get("content-type").startsWith("application/json")
					? await response.json()
					: await response.text()
				if (response.ok == true) {
					alert(JSON.stringify(result));
				} else {
					result = create(order, card, result)
				}
			} else {
				alert(JSON.stringify(card))
				result = card
			}
			return result
		}
	</script>
</head>
<body style="width: 100%; max-width: 20em; margin-left: auto; margin-right: auto;">
	<main>
		<intergiro-card-input class="input"
			api-key="<public.api.key>">
		</intergiro-card-input>
		<button type="submit" onclick="create(order)">Submit</button>
	</main>
</body>
</html>

# Customer

How to create a customer with a card token for recurring payments, using Intergiro Card Input.

  • Tokenize the card by submitting to Intergiro Card Input.
  • Add the tokenized card to the method field in a Customer Creatable object such as { method: [{ type: "token", card: <card token> }] } (note that method is an array), and post to create customer endpoint.
  • If the response is a verification required error, please submit this error together with the card token to Intergiro Card Input, this will initialize the 3D Secure cycle.
  • Post the new card token to the create customer endpoint.
  • Continue with the last two steps until either response.ok = true or any error other than verification required is returned.
<!DOCTYPE html>
<html>

<head>
	<script type="module" src="https://merchant.intergiro.com/ui/"></script>
  	<link href="https://merchant.intergiro.com/theme/intergiro/index.css" rel="stylesheet">
	<script defer>
		async function create(customer, card, error) {
			const element = document.querySelector("intergiro-card-input")
			card = await element.submit(card, error)
			let result
			if (typeof card == "string") {
				customer = customer ?? { method: [{ type: "token" }] }
				customer.method[0].card = card
				const response = await fetch("https://merchant.intergiro.com/v1/customer", {
					headers: {
						"Accept": "application/json",
						"Content-Type": "application/json",
						Authorization:
							"Bearer <private.api.key>",
					},
					method: "POST",
					body: JSON.stringify(customer),
				})
				result = response.headers.get("content-type").startsWith("application/json")
					? await response.json()
					: await response.text()
				if (response.ok == true) {
					alert(Json.stringify(result))
				} else {
					result = create(customer, card, result)
				}
			} else {
				alert(JSON.stringify(card))
				result = card
			}
			return result
		}
	</script>
</head>

<body style="width: 100%; max-width: 20em; margin-left: auto; margin-right: auto;">
	<main>
		<intergiro-card-input class="input" api-key="<public.api.key>">
		</intergiro-card-input>
		<button type="submit" onclick="create()">Submit</button>
	</main>
</body>

</html>

← Styling →