Google & Apple Pay tokenization button
Collect and tokenize credit cards stored in the cardholders' Google or Apple Pay wallet with our native mobile SDK tokenisation button integration. This API provides you the option to place a Google or Apple Pay button in your native mobile app.
Please note that displaying the Google or Apple Pay button uses the payment transactions API instead of the tokenization API. If you only want to collect and tokenize credit card number and cvv code continue with the integration documented here.
Follow the step-by-step guide below to get the Google and Apple Pay tokenization button up and running.
Refer to the standard mobile SDK integration for more detailed information and resources about the mobile SDK.
1. Account setup
Apple Pay
Apple Pay requires you to setup an Apple developer account and manage the certifications. Please refer to Apple Pay setup and follow the step-by-step setup guide. This configuration has to be done per project (merchantID) - therefore you don't need to add another configuration if you already have one and the same merchantID is used.
Google Pay
No separate setup needed for Google Pay.
2. Determine payment methods
Because different payment methods require different flows, your app must display a payment selection screen and call the corresponding API based on the user's choice.
To determine the list of available methods, you may consider factors such as the user's geographic location, transaction amount, and currency. Additionally, you can add Apple Pay to the list on Apple devices and Google Pay on Android devices based on a set of criteria as follows:
Apple Pay
Invoke the static method hasApplePay
on ApplePayConfig
to check whether Apple Pay is available on the user’s Apple device.
ApplePayConfig.hasApplePay(
withSupportedNetworks: <networks>,
existingCardRequired: <existingCardRequired>
)
whereas:
networks
is the array of supported cards, e g.[.masterCard, .visa, .amex]
existingCardRequired
is a boolean to specify whether users can add a new card to Apple Pay during the process or if a previously registered card is mandatory.
If the method returns false, Apple Pay is not available on the device for the given settings and therefore the Apple Pay button should not be displayed on the selection screen.
Google Pay
Invoke the static method hasGooglePay
on GooglePayConfig
to check whether Google Pay is available on the user’s Android device.
GooglePayConfig.hasGooglePay(
supportedNetworks: <networks>,
authenticationMethods: <authenticationMethods>,
existingPaymentMethodRequired: <existingPaymentMethodRequired>,
isTesting: <isTesting>
)
whereas:
networks
is a list of supported cards, e g. listOf(PaymentMethodType.VISA, PaymentMethodType.MASTER_CARD)
authenticationMethods
specifies whether only tokenized cards are accepted (useAuthenticationMethodType.CRYPTOGRAM_3DS
)or non-tokenized cards are also allowed (uselistOf(AuthenticationMethodType.PAN_ONLY, AuthenticationMethodType.CRYPTOGRAM_3DS)
). Note: The 3-D Secure process is automatically started for non-tokenized cards if the merchant has a 3-D Secure configuration. Otherwise, the card will still be tokenized but without 3-D Secure parameters and the 3-D step-up process can then be done at a later time just like with card tokens obtained from the tokenization flow.existingPaymentMethodRequired
is a boolean to specify whether users can add a new card to Google Pay during the process or if a previously registered card is mandatory.isTesting
is a boolean that must be set to true in the sandbox environment
If the method returns false, Google Pay is not available on the device for the given settings and therefore the Google Pay button should not be displayed on the selection screen.
3. Backend init request
Once you determined the payment method, start with initialising a transaction by calling the /v1/transactions
endpoint from your merchant backend. It returns a mobileToken
which needs to be used in the next step to start the process.
{
"refno": "ref-12345",
"currency": "EUR",
"amount": 1000,
"paymentMethods": ["APL","PAY"],
"option": {
"authenticationOnly": true,
"returnMobileToken": true
}
}
{
"mobileToken": "e6c371fb60219b8b058d9cd94a1f77a2033510854437c1aa"
}
Remarks
amount
is in minor currency units (cents, pence, etc.), €10 in the example above- Use single payment method
APL
for Apple Pay andPAY
for Google Pay in the list of payment methods to directly start the wallet tokenization flow- Be sure to set option
authenticationOnly
totrue
, it will not work otherwise- Set option
returnMobileToken
totrue
for mobile SDK flows
Please refer to the API specification for more information.
4. Configuration
Apple Pay
The init request returns a mobile token that uniquely identifies the transaction. Return the token to your app and then pass it to the SDK’s Transaction.init
method. Additionally, Apple Pay must be configured for the SDK in the same way as in step 1).
let paymentNetworks: [PKPaymentNetwork] = <networks>
let applePayConfig = ApplePayConfig(applePayMerchantId: <applePayMerchantId>,
supportedNetworks: paymentNetworks)
applePayConfig.existingCardRequired = <existingCardRequired>
applePayConfig.finalSummaryItemLabel = <merchantName>
let transaction = Transaction.init(mobileToken: <mobileToken>)
transaction.options.applePayConfig = applePayConfig
transaction.options.testing = <isTesting>
transaction.delegate = <delegate>
transaction.start(presentingController: <viewController>)
whereas:
- networks is the array of supported cards, e g.
[.masterCard, .visa, .amex]
applePayMerchantId
is the Apple Pay merchant identifier set up in Apple’s developer portalexistingCardRequired
is a boolean to specify whether users can add a new card to Apple Pay during the process or if a previously registered card is mandatorymerchantName
is a name shown on the Apple Pay sheet as “Pay {merchantName}”mobileToken
is the token obtained from the backend init requestisTesting
is a boolean that must be set to true in the sandbox environmentdelegate
is your implementation of theTransactionDelegate
to receive feedback when the process is finished (mandatory)viewController
is aUIViewController
of your app on top of which the payment sheet is presented
Google Pay
The init request returns a mobile token that uniquely identifies the transaction. Return the token to your app and then pass it to the SDK’s Transaction
constructor. Additionally, Google Pay must be configured for the SDK in the same way as in step 1).
val googlePayConfig: GooglePayConfig = GooglePayConfig.Builder(
supportedNetworks = <networks>,
merchantName = <merchantName>)
.allowedAuthenticationMethods(<authenticationMethods>)
.build()
val transaction: Transaction = Transaction(mobileToken = <mobileToken>)
transaction.options.googlePayConfig = googlePayConfig
transaction.options.isTesting = <isTesting>
transaction.listener = <listener>
transaction.start(<activity>)
whereas:
- networks is a list of supported cards, e g.
listOf(PaymentMethodType.VISA, PaymentMethodType.MASTER_CARD)
merchantName
is a name shown on the Google Pay sheet as “Pay {merchantName}”authenticationMethods
specifies whether non-tokenized cards are accepted too. See step 1) above for a more detailed explanationmobileToken
is the token obtained from the backend init requestisTesting
is a boolean that must be set to true in the sandbox environmentlistener
is your implementation of theTransactionListener
to receive feedback when the process is finished (mandatory)activity
is your AndroidActivity
, used by the SDK to display the payment sheet
5. Obtain PCI Proxy token
To obtain a PCI Proxy token, submit the transactionId
returned in TransactionSuccess.transactionId
from the mobile SDK to your server and call the transaction status endpoint. Additionally, this API also returns a card.3D object which contains information about the result of the authentication process when available.
Example
curl --request GET \
--url 'https://api.sandbox.datatrans.com/v1/transactions/{transactionId}' \
--header 'Authorization: Basic {merchantId}:{password}'
{
"transactionId" : "230629114903291726",
"merchantId" : "1100000000",
"type" : "payment",
"status" : "authenticated",
"currency" : "EUR",
"refno" : "ref-12345",
"paymentMethod" : "VIS",
"detail" : {
"authorize" : {
"amount" : 1000
}
},
"language" : "de",
"card" : {
"alias" : "7LHXscqwAAEAAAGJBo5n6T35EsAHAMPa",
"fingerprint" : "F-dgPPkIenKzjz1B9ircrLGN",
"masked" : "412374xxxxxx0013",
"aliasCVV" : null,
"expiryMonth" : "06",
"expiryYear" : "25",
"walletIndicator" : "APL",
"3D" : {
"xid" : "MDAyMzA2MjkxMTQ5MDMyOTE3MjY=",
"cavv" : "AIp6O57Tn8BBAHFF6vrMAoABFA==",
"threeDSVersion" : "2.2",
"directoryResponse" : "Y",
"authenticationResponse" : "Y"
}
},
"history" : [ ]
}
6. Next steps
Use the alias
returned in step 5) and continue as usual with any downstream operations using the various PCI Proxy APIs.
Updated about 1 year ago