Über Click to Pay

Allgemeine Informationen über Click to Pay

Click To Pay ist eine Implementierung der nächsten Generation der Remote-Commerce-Spezifikation – Secure Remote Commerce (SRC), die von EMVCo im Jahr 2019 eingeführt wurde, um ein Checkout-Erlebnis im E-Commerce mit der gleichen Sicherheit, Bequemlichkeit und Kontrolle wie in der realen Welt zu schaffen. Kunden können schnell und sicher bezahlen, wenn Sie das Symbol Click to Pay sehen. Derzeit wird SRC von VISA, MC, AMEX und Discover unter dem Dachprodukt "Click To Pay" übernommen.

Hinweis: Derzeit werden nur die Kartenmarken VISA und Mastercard unterstützt.

Logo

Info

Click to Pay ist das Online-Checkout-Erlebnis, das auf den neuesten Spezifikationen der E-Commerce-Branche basiert – EMV Secure Remote Commerce. Für einen Kauf müssen nicht mehr die 16-stelligen primären Kontonummern eingegeben, Kennwörter nachgeschlagen oder lange Formulare ausgefüllt werden. Um von diesem einfachen, intelligenten und sicheren Online-Checkout-Erlebnis zu profitieren, klicken Sie einfach auf Bezahlen mit Visa oder Mastercard, wenn Sie das Symbol Click to Pay sehen wo Visa oder Mastercard akzeptiert wird.

TypeZahlungen per E-Wallet


Weitere Informationen finden Sie auch auf der Webseite von Visa (https://www.visa.de/unser-partner-werden/bezahltechnologie/clicktopay.html).

Diagramm zum Prozessablauf



Die Click-to-Pay-Elemente sind auf dem Computop Kreditkartenformular gehostet und sofort einsatzbereit für Händler, die die Standardvorlage für Kreditkartenformulare (ct_responsive) verwenden.

(info) Bitte wenden Sie sich an den Computop Helpdesk, um Click to Pay für Ihre MID zu aktivieren.

Falls Sie eine benutzerdefinierte Vorlage für Kreditkartenformulare verwenden, folgen Sie bitte diesen Beispielen, um Click-to-Pay-Elemente für Ihre Vorlage zu aktivieren: Click to Pay für benutzerdefinierte Vorlagen

Es besteht die Möglichkeit, bei jedem Aufruf ein Dialogfenster anzuzeigen, in dem Käufer Ihre E-Mail-Adresse für Click To Pay eingeben können, um sich schneller einzuloggen. Bitte kontaktieren Sie unseren Helpdesk, um diese Funktion zu aktivieren.

Vorlage: ct_responsive

Vorlage: ct_cards_v2

Auf dieser Seite


Paygate-Schnittstelle

Definitionen

Datenformate

FormatBeschreibung

a

alphabetisch

as

alphabetisch mit Sonderzeichen

n

numerisch

an

alphanumerisch

ans

alphanumerisch mit Sonderzeichen

ns

numerisch mit Sonderzeichen

bool

Bool’scher Ausdruck (true oder false)

3

feste Länge mit 3 Stellen/Zeichen

..3

variable Länge mit maximal 3 Stellen/Zeichen

enum

Aufzählung erlaubter Werte

dttm

ISODateTime (JJJJ-MM-TTThh:mm:ss)


Abkürzungen

AbkürzungBeschreibungKommentar

CND

Bedingung (condition)


M

Pflicht (mandatory)

Wenn ein Parameter Pflicht ist, dann muss er vorhanden sein

O

optional

Wenn ein Parameter optional ist, dann kann er vorhanden sein, ist aber nicht erforderlich

C

bedingt (conditional)

Wenn ein Parameter bedingt ist, dann gibt es eine Bedingungsregel, die angibt, ob er Pflicht oder optional ist


Hinweis: Bitte beachten Sie, dass die Bezeichnungen der Parameter in Groß- oder Kleinbuchstaben zurückgegeben werden können.


Aufruf der Schnittstelle

Die Option Click to Pay gibt es auf dem Computop Kreditkartenformular (payssl.aspx) und der Hosted Payment Page (paymentPage.aspx). Daher muss kein separater Endpunkt aufgerufen werden, Click to Pay ist standardmäßig erreichbar über Kreditkarten - Schnittstelle per Formular.

Wenn sich der Karteninhaber für Click to Pay entscheidet, werden zwei Transaktionen erzeugt: bei der Click-to-Pay-Transaktion werden zuerst die nötigen Kreditkartendaten erhalten und anschließend wird automatisch die eigentliche Kreditkartentransaktion ausgeführt. Das erfolgt über eine Server-zu-Server-Verbindung und unterstützt alle gängigen Kreditkarten-Transaktionsmöglichkeiten.

Die Tabelle beschreibt nur empfohlene Parameter für die Click-to-Pay-Verarbeitung. Es können auch alle Kreditkartenzahlungsparameter (außer Kreditkartendaten) verwendet werden. Weitere Informationen dazu finden Sie unter Kreditkarten.

Oops, it seems that you need to place a table or a macro generating a table within the Table Filter macro.

The table is being loaded. Please wait for a bit ...

Key

Format

CND

Description

Beschreibung

Email

ans..64

O

Email address of the customer. If provided, Computop Paygate will determine if card holder's Click to Pay profile exists and simplify checkout experience.

Alternatively Email can be provided as a part of customerInfo object. In this case no need to provide it separately.

E-Mail-Adresse des Kunden. Falls angegeben, ermittelt das Computop Paygate, ob das Click-to-Pay-Profil des Karteninhabers vorhanden ist, um den Bezahlvorgang zu vereinfachen.

Alternativ kann die E-Mail-Adresse als Teil des customerInfo-Objekts übergeben werden. In diesem Fall ist dieser Parameter nicht erforderlich.


Buchung / Gutschrift / Storno

Buchungen, Gutschriften und Stornierungen beziehen sich nicht auf die Transaktion mit Click to Pay, sondern direkt auf die Kreditkartentransaktion. Weitere Informationen dazu finden Sie unter Kreditkarten.

Batch-Nutzung der Schnittstelle

Buchungen, Gutschriften und Stornierungen per Batch beziehen sich nicht auf die Transaktion mit Click to Pay, sondern direkt auf die Kreditkartentransaktion. Weitere Informationen dazu finden Sie unter Kreditkarten.


Click to Pay für benutzerdefinierte Vorlagen

Click to Pay (XSL example code).html
<html>
	<head>
		<!-- Viewport -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

		<!-- Title -->
		<title>Click to Pay - Example code for XSL file</title>
		
		<!-- Embed CSS stylesheet for Click to Pay widgets -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap-v5.3.2.min.css"></link>
		<link rel="stylesheet" type="text/css" href="css/clicktopay-v3-react.css" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap-select.css"></link>
		<link rel="stylesheet" type="text/css" href="css/all.min.css"></link>
		
		<!-- Embed bootstrap and jQuery library (You can download and store the latest jquery library in your own template images folder as well) -->
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.bundle-v5.3.2.min.js"></script>
		<script type="text/javascript" src="js/bootstrap-select.min.js"></script>
		<script type="text/javascript" src="js/bootbox-v6.min.js"></script>
		
	</head>
	<body>

		<!-- Click to Pay "Switch ID" and "Access your saved Click to Pay cards" link. Depending on whether the customer was recognized or not -->
		<!-- We recommend to place it above the credit card input fields -->
		<xsl:if test="paygate/useClickToPay = 'true'">
			<div class="d-flex justify-content-between align-items-center ctp-access">
				<div class="d-flex align-items-center">
					<img class="ctp-logo" src="https://src.mastercard.com/assets/img/acc/global/src_standalone_mark_vert_blk.svg"/>
					<div class="ctp-divider"/>
					<div class="ctp-brands-logo">
						<img class="ctp-brand-visa-logo" src="images/brands/visa.svg"/>
						<img class="ctp-brand-mastercard-logo" src="images/brands/mastercard.svg"/>
					</div>
				</div>
				<div class="d-flex align-items-center">
					<div id="ctpEmail1" class="hidden"/>
					<div id="ctpDivider" class="ctp-divider hidden"/>
					<div id="ctpSwitchIdLink" class="blue-link"></div>
				</div>
			</div>
			<div id="ctpCardslink" class="d-flex justify-content-end black-link hidden"><xsl:value-of select="paygate/language/ClickToPay/accessSavedCards"/></div>
			<div class="d-flex justify-content-center align-items-center text-align-center ctp-info">
				<div id="ctpRequestInfo" class="font-size-12">
					<div class="padding-2 margin-top-15"><xsl:value-of select="paygate/language/ClickToPay/requestInfo1"/></div>
					<div class="padding-2"><xsl:value-of select="paygate/language/ClickToPay/requestInfo2"/></div>
					<div>
						<img src="images/loader_card_fetch_small_black.gif"></img>
					</div>
				</div>
				<div id="ctpResponseInfo" class="hidden font-size-12"></div>
			</div>
		</xsl:if>
		
		<!-- Click to Pay enrollment checkbox for unrecognized or new user flow -->
		<!-- We recommend to place it below the credit card input fields -->
		<div class="row ctp-checkbox disabled">
			<xsl:if test="paygate/challengeRequestIndicator = 'true'">
				<xsl:attribute name="style">
					margin-bottom: 5px !important;
				</xsl:attribute>
			</xsl:if>
			<input type="checkbox" id="ClickToPayEnrollment" name="ClickToPayEnrollment" disabled=""></input>
			<label for="ClickToPayEnrollment">
				<xsl:value-of select="paygate/language/ClickToPay/enrollmentCheckbox1"/><img class="margin-left-2 margin-right-2" src="images/ctp_logo.png"></img><xsl:value-of select="paygate/language/ClickToPay/enrollmentCheckbox2"/>
			</label>
			<span class="glyphicon glyphicon-info-sign" aria-hidden="true" data-bs-container="body" data-bs-toggle="popover" tabindex="0"></span>
			<p class="ctp-mc-agreement"><xsl:value-of select="paygate/language/ClickToPay/mcAgreementInfo"/></p>
		</div>
		
		<!-- Click to Pay hidden fields, which will contain all necessary data for Click to Pay API calls (Computop sets and handles these values dynamically on server side) -->
		<!-- IMPORTANT! Do not change any of these hidden fields names or values -->
		<xsl:if test="paygate/useClickToPay = 'true'">
			
			<input type="hidden" name="ClickToPayTestaccount"><xsl:attribute name="value"><xsl:value-of select="paygate/testClickToPay"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayActiveEnrollment"><xsl:attribute name="value"><xsl:value-of select="paygate/preselectClickToPayEnrollment"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayDtAutoStart"><xsl:attribute name="value"><xsl:value-of select="paygate/startDigitalTerminalAutomatically"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPaySrciTransactionId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPaySrciTransactionId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayMasterCardSrciTransactionId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayMasterCardSrciTransactionId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayAmexSrciTransactionId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayAmexSrciTransactionId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPaySrciDpaId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPaySrciDpaId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayMasterCardSrciDpaId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayMasterCardSrciDpaId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayAmexSrciDpaId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayAmexSrciDpaId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPaySrcInitiatorId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPaySrcInitiatorId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayMasterCardSrcInitiatorId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayMasterCardSrcInitiatorId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayAmexSrcInitiatorId"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayAmexSrcInitiatorId"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayIdentityValue"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayIdentityValue"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayDpaLocale"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayDpaLocale"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayTransactionAmount"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayTransactionAmount"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayTransactionCurrencyCode"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayTransactionCurrencyCode"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayPostURL"><xsl:attribute name="value"><xsl:value-of select="paygate/clickToPayPostURL"/></xsl:attribute></input>
			<input type="hidden" name="ClickToPayOtpAttempts"></input>

			<input type="hidden" name="ClickToPayIdTokens"></input>
			<input type="hidden" name="ClickToPayIdToken"></input>
			<input type="hidden" name="ClickToPayCorrelationId"></input>
			<input type="hidden" name="ClickToPayDigitalCardId"></input>
			<input type="hidden" name="ClickToPayMaskedEmail"></input>
			<input type="hidden" name="ClickToPayMaskedNumber"></input>

			<input type="hidden" name="ClickToPayMasterCardIdTokens"></input>
			<input type="hidden" name="ClickToPayMasterCardIdToken"></input>
			<input type="hidden" name="ClickToPayMasterCardCorrelationId"></input>
			<input type="hidden" name="ClickToPayMasterCardDigitalCardId"></input>
			<input type="hidden" name="ClickToPayMasterCardMaskedEmail"></input>
			<input type="hidden" name="ClickToPayMasterCardMaskedNumber"></input>

			<input type="hidden" name="ClickToPayAmexIdTokens"></input>
			<input type="hidden" name="ClickToPayAmexIdToken"></input>
			<input type="hidden" name="ClickToPayAmexCorrelationId"></input>
			<input type="hidden" name="ClickToPayAmexDigitalCardId"></input>
			<input type="hidden" name="ClickToPayAmexMaskedEmail"></input>
			<input type="hidden" name="ClickToPayAmexMaskedNumber"></input>
			
			<!-- Embed all needed Click to Pay styles and scripts (Please do not change any of these source paths!!!) -->
			<link rel="stylesheet" type="text/css" href="css/modaldcfstyle.css" />
			<script data-main="scripts/main" src="js/jose.js"></script>
			
			<!-- VISA SDK -->
			<script type="text/javascript">
				<xsl:choose>
					<xsl:when test="paygate/testClickToPay = 'true'">
						<xsl:attribute name="src">https://sandbox.secure.checkout.visa.com/checkout-widget/resources/js/src-i-adapter/visaSdk.js</xsl:attribute>
					</xsl:when>
					<xsl:otherwise>
						<xsl:attribute name="src">https://assets.secure.checkout.visa.com/checkout-widget/resources/js/src-i-adapter/visaSdk.js</xsl:attribute>
					</xsl:otherwise>
				</xsl:choose>
			</script>

			<!-- MasterCard SDK -->
			<script type="text/javascript">
				<xsl:choose>
					<xsl:when test="paygate/testClickToPay = 'true'">
						<xsl:attribute name="src">https://sandbox.src.mastercard.com/sdk/srcsdk.mastercard.js</xsl:attribute>
					</xsl:when>
					<xsl:otherwise>
						<xsl:attribute name="src">https://src.mastercard.com/sdk/srcsdk.mastercard.js</xsl:attribute>
					</xsl:otherwise>
				</xsl:choose>
			</script>

			<!-- AMEX SDK -->
			<script type="text/javascript">
				<xsl:choose>
					<xsl:when test="paygate/testClickToPay = 'true'">
						<xsl:attribute name="src">https://qwww.aexp-static.com/akamai/remotecommerce/scripts/amexSDK-1.0.0.js</xsl:attribute>
					</xsl:when>
					<xsl:otherwise>
						<xsl:attribute name="src">https://www.aexp-static.com/akamai/remotecommerce/scripts/amexSDK-1.0.0.js</xsl:attribute>
					</xsl:otherwise>
				</xsl:choose>
			</script>
			
			<script type="text/javascript" src="js/bootbox-v6.min.js"></script>
			<script type="text/javascript" src="js/clicktopay-v2.1.js"></script>
				
		</xsl:if>

	</body>
</html>