Skip to content

Commit 4834d89

Browse files
ehrdiehrdi
committed
feat: update CreditCardTokenizer to use new Hosted Tokenization SDK
1 parent 8059512 commit 4834d89

File tree

12 files changed

+437
-830
lines changed

12 files changed

+437
-830
lines changed

‎README.md

Lines changed: 124 additions & 132 deletions
Large diffs are not rendered by default.

‎app/src/main/AndroidManifest.xml

Lines changed: 2 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,8 @@
44

55
<uses-permission android:name="android.permission.INTERNET" />
66

7-
<application
8-
android:allowBackup="true"
9-
android:dataExtractionRules="@xml/data_extraction_rules"
10-
android:fullBackupContent="@xml/backup_rules"
11-
android:icon="@mipmap/ic_launcher"
12-
android:label="@string/app_name"
13-
android:roundIcon="@mipmap/ic_launcher_round"
14-
android:supportsRtl="true"
15-
android:theme="@style/Theme.PCPClientAndroidDemo"
16-
tools:targetApi="34">
17-
<activity
18-
android:name=".MainActivity"
19-
android:exported="true"
20-
android:label="@string/app_name"
21-
android:theme="@style/Theme.PCPClientAndroidDemo">
7+
<application android:allowBackup="true" android:dataExtractionRules="@xml/data_extraction_rules" android:fullBackupContent="@xml/backup_rules" android:enableOnBackInvokedCallback="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:roundIcon="@mipmap/ic_launcher_round" android:supportsRtl="true" android:theme="@style/Theme.PCPClientAndroidDemo" android:networkSecurityConfig="@xml/network_security_config" tools:targetApi="34">
8+
<activity android:name=".MainActivity" android:exported="true" android:label="@string/app_name" android:theme="@style/Theme.PCPClientAndroidDemo">
229
<intent-filter>
2310
<action android:name="android.intent.action.MAIN" />
2411

‎app/src/main/assets/creditcard-tokenizer-example.html

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>Credit Card Tokenizer Demo</title>
5+
<style>
6+
header svg {
7+
width: 100px;
8+
}
9+
10+
input[type='button'] {
11+
border-radius: 22px;
12+
box-sizing: border-box;
13+
display: inline-block;
14+
border: 2px solid;
15+
padding: 5px 10px;
16+
font-size: 1.125rem;
17+
line-height: 1.25rem;
18+
width: inherit;
19+
height: inherit;
20+
cursor: pointer;
21+
color: #0096d6;
22+
background-color: #fff;
23+
border-color: #0096d6;
24+
}
25+
</style>
26+
<meta name="viewport" content="user-scalable=no, width=device-width" />
27+
</head>
28+
<body>
29+
<header>
30+
<h1>
31+
<svg id="payone" viewBox="0 0 100 25">
32+
<defs>
33+
<clipPath id="Clip_1">
34+
<path d="M0,0 L100,0 L100,25 L0,25 z" />
35+
</clipPath>
36+
</defs>
37+
<g clip-path="url(#Clip_1)">
38+
<path
39+
d="M8.773,7.492 L8.773,17.526 C8.773,18.217 9.272,18.715 9.963,18.715 C10.672,18.715 11.171,18.217 11.171,17.526 L11.171,14.533 L13.109,14.533 C16.102,14.533 18.078,12.903 18.078,10.427 C18.078,7.972 16.12,6.36 13.147,6.36 L9.885,6.36 C9.234,6.36 8.773,6.821 8.773,7.492 M11.152,8.49 L13.339,8.49 C14.663,8.49 15.545,9.258 15.545,10.427 C15.545,11.617 14.663,12.404 13.339,12.404 L11.152,12.404 z M30.618,16.912 L26.819,7.837 C26.359,6.725 25.88,6.284 24.901,6.284 C23.923,6.284 23.443,6.725 22.982,7.837 L19.164,16.95 C18.743,17.967 19.164,18.715 20.048,18.715 C20.795,18.734 21.122,18.331 21.429,17.545 L21.978,16.196 L27.688,16.196 L28.22,17.526 C28.527,18.331 29.007,18.734 29.697,18.715 C30.599,18.715 31.06,17.967 30.618,16.912 M26.826,14.066 L22.826,14.066 L24.825,9.085 z M41.762,8.029 L37.83,14.571 L37.83,17.526 C37.83,18.217 37.331,18.715 36.64,18.715 C35.93,18.715 35.431,18.217 35.431,17.526 L35.431,14.571 L31.595,8.164 C31.019,7.205 31.556,6.284 32.535,6.284 C33.206,6.284 33.513,6.706 33.781,7.185 L36.679,12.078 L39.498,7.3 C39.883,6.686 40.209,6.284 40.88,6.284 C41.877,6.284 42.281,7.205 41.762,8.029 M60.444,18.898 C56.934,18.898 54.075,16.02 54.075,12.509 C54.075,8.961 56.934,6.101 60.444,6.101 C63.954,6.101 66.814,8.979 66.814,12.528 C66.814,16.039 63.954,18.898 60.444,18.898 M60.444,8.481 C58.353,8.481 56.646,10.284 56.646,12.509 C56.646,14.716 58.353,16.519 60.444,16.519 C62.555,16.519 64.262,14.716 64.262,12.528 C64.262,10.303 62.555,8.481 60.444,8.481 M80.429,7.483 L80.429,17.229 C80.429,18.149 79.911,18.726 79.106,18.726 C78.183,18.726 77.724,18.227 77.148,17.421 L72.103,10.476 L72.103,17.517 C72.103,18.207 71.604,18.705 70.913,18.705 C70.203,18.705 69.704,18.207 69.704,17.517 L69.704,7.79 C69.704,6.83 70.241,6.274 71.105,6.274 C71.93,6.274 72.39,6.735 72.928,7.56 L78.031,14.677 L78.031,7.483 C78.031,6.792 78.529,6.294 79.221,6.294 C79.93,6.294 80.429,6.792 80.429,7.483 M85.165,6.352 L91.016,6.352 C91.688,6.352 92.148,6.812 92.148,7.483 C92.148,8.155 91.688,8.596 91.016,8.596 L86.451,8.596 L86.451,11.32 L90.25,11.32 C90.921,11.32 91.381,11.781 91.381,12.451 C91.381,13.104 90.921,13.584 90.25,13.584 L86.451,13.584 L86.451,16.384 L91.016,16.384 C91.688,16.384 92.148,16.845 92.148,17.536 C92.148,18.188 91.688,18.648 91.016,18.648 L85.165,18.648 C84.514,18.648 84.053,18.169 84.053,17.517 L84.053,7.483 C84.053,6.812 84.514,6.352 85.165,6.352 M97.898,18.999 C97.898,19.647 97.711,22.88 94.001,22.897 L43.204,22.897 C44.327,21.895 45.233,20.597 45.898,19.037 L51.441,6.039 C51.72,5.387 53.296,2.133 57.033,2.102 L94.001,2.102 C94.646,2.102 97.871,2.289 97.898,6 z M37.598,22.897 L6,22.897 C5.354,22.897 2.128,22.709 2.102,18.998 L2.102,6 C2.102,5.355 2.29,2.134 6.007,2.102 L51.608,2.102 C50.548,3.097 49.673,4.395 49.006,5.96 L43.461,18.959 C42.996,20.048 41.036,22.881 37.598,22.897 M99.999,5.992 C99.983,3.766 98.701,0 94,0 L5.993,0 C3.767,0.018 -0,1.303 -0,6 L-0,19.006 C0.016,21.232 1.297,24.999 6,24.999 L94.005,24.999 C96.232,24.989 100,23.713 100,18.998 z"
40+
fill="var(--cp-icon-highlight, #0096d6)"
41+
/>
42+
</g>
43+
</svg>
44+
Credit Card Tokenizer Demo
45+
</h1>
46+
</header>
47+
48+
<!-- The form the with IFrame fields. -->
49+
<form name="paymentform" action="#" method="post">
50+
<fieldset>
51+
<div id="payment-IFrame"></div>
52+
<input id="submit" type="button" value="Run credit card check" />
53+
</fieldset>
54+
</form>
55+
</body>
56+
</html>

‎app/src/main/java/com/payone/pcpclientandroiddemo/MainActivity.kt

Lines changed: 43 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,11 @@ import com.google.android.gms.wallet.PaymentsClient
1616
import com.google.android.gms.wallet.Wallet
1717
import com.google.android.gms.wallet.WalletConstants
1818
import com.google.android.gms.wallet.PaymentDataRequest
19-
import com.payone.pcp_client_android_sdk.cctokenizer.CCTokenizerRequest
2019
import com.payone.pcp_client_android_sdk.cctokenizer.CreditcardTokenizerConfig
2120
import com.payone.pcp_client_android_sdk.cctokenizer.CreditcardTokenizerFragment
22-
import com.payone.pcp_client_android_sdk.cctokenizer.Field
23-
import com.payone.pcp_client_android_sdk.cctokenizer.PayoneLanguage
24-
import com.payone.pcp_client_android_sdk.cctokenizer.SupportedCardType
21+
import com.payone.pcp_client_android_sdk.cctokenizer.IframeConfig
22+
import com.payone.pcp_client_android_sdk.cctokenizer.SubmitButtonConfig
23+
import com.payone.pcp_client_android_sdk.cctokenizer.UIConfig
2524
import com.payone.pcp_client_android_sdk.fingerprinttokenizer.FingerprintTokenizer
2625
import com.payone.pcp_client_android_sdk.utils.PCPEnvironment
2726
import com.payone.pcpclientandroiddemo.gpay.GooglePayRequestJson
@@ -60,73 +59,48 @@ class MainActivity : AppCompatActivity() {
6059
}
6160

6261
ccTokenizerBtn.setOnClickListener {
63-
val fragment = CreditcardTokenizerFragment.newInstance(
64-
tokenizerUrl = "YOUR_URL",
65-
request = CCTokenizerRequest.create(
66-
"YOUR_MID",
67-
"YOUR_AID",
68-
"YOUR_PORTAL_ID",
69-
PCPEnvironment.Test,
70-
"YOUR_PMI_PORTAL_KEY"
62+
// Example UI config for the new SDK
63+
val uiConfig = UIConfig(
64+
formBgColor = "#64bbb7",
65+
fieldBgColor = "wheat",
66+
fieldBorder = "1px solid #b33cd8",
67+
fieldOutline = "#101010 solid 5px",
68+
fieldLabelColor = "#d3d83c",
69+
fieldPlaceholderColor = "blue",
70+
fieldTextColor = "crimson",
71+
fieldErrorCodeColor = "green"
72+
)
73+
val config = CreditcardTokenizerConfig(
74+
iframe = IframeConfig(
75+
iframeWrapperId = "payment-IFrame",
76+
height = 400,
77+
width = 400
7178
),
72-
supportedCardTypes = listOf(
73-
SupportedCardType.Visa.identifier,
74-
SupportedCardType.Mastercard.identifier
79+
uiConfig = uiConfig,
80+
locale = "de_DE",
81+
submitButton = SubmitButtonConfig(
82+
selector = "#submit",
83+
element = null
7584
),
76-
config = CreditcardTokenizerConfig(
77-
cardPan = Field(
78-
selector = "cardpan",
79-
style = "font-size: 14px; border: 1px solid #000;",
80-
type = "input",
81-
size = null,
82-
maxlength = null,
83-
length = null,
84-
iframe = null
85-
),
86-
cardCvc2 = Field(
87-
selector = "cardcvc2",
88-
style = "font-size: 14px; border: 1px solid #000;",
89-
type = "password",
90-
size = "4",
91-
maxlength = "4",
92-
length = mapOf("V" to 3, "M" to 3),
93-
iframe = null
94-
),
95-
cardExpireMonth = Field(
96-
selector = "cardexpiremonth",
97-
style = "font-size: 14px; width: 30px; border: solid 1px #000; height: 22px;",
98-
type = "text",
99-
size = "2",
100-
maxlength = "2",
101-
length = null,
102-
iframe = "width" to "40px"
103-
),
104-
cardExpireYear = Field(
105-
selector = "cardexpireyear",
106-
style = null,
107-
type = "text",
108-
size = null,
109-
maxlength = null,
110-
length = null,
111-
iframe = "width" to "50px"
112-
),
113-
defaultStyles = mapOf(
114-
"input" to "font-size: 1em; border: 1px solid #000; width: 175px;",
115-
"select" to "font-size: 1em; border: 1px solid #000;",
116-
"iframe" to "height: 22px; width: 180px"
117-
),
118-
language = PayoneLanguage.German,
119-
error = "error",
120-
submitButtonId = "submit",
121-
creditCardCheckCallback = { result ->
122-
if (result.isSuccess) {
123-
// get response as CCTokenizerResponse
124-
val response = result.getOrNull()
125-
} else if (result.isFailure) {
126-
val error = result.exceptionOrNull()
127-
}
128-
}
129-
)
85+
environment = "test",
86+
tokenizationSuccessCallback = { statusCode, token, cardDetails ->
87+
Log.d("CC Success", "Tokenized card successfully")
88+
Log.d("CC Success", "Status: $statusCode")
89+
Log.d("CC Success", "Token: $token")
90+
Log.d("CC Success", "Card Details: $cardDetails")
91+
},
92+
tokenizationFailureCallback = { statusCode, errorResponse ->
93+
Log.e("CC Failure", "Tokenization of card failed")
94+
Log.e("CC Failure", "Status: $statusCode")
95+
Log.e("CC Failure", "Error: ${errorResponse["error"]}")
96+
}
97+
)
98+
val jwtToken = "<Token to be retrieved from the CommercePlatform-API>" // Fetch this from your backend
99+
var tokenizerHtmlUrl = "https://path-to-your-server/creditcard-tokenizer.html" // Use your hosted HTML page URL
100+
val fragment = CreditcardTokenizerFragment.newInstance(
101+
config,
102+
jwtToken,
103+
tokenizerHtmlUrl
130104
)
131105
supportFragmentManager.beginTransaction().replace(R.id.fragment_container, fragment)
132106
.commit()

‎app/src/main/res/xml/network_security_config.xml

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<network-security-config>
3+
<domain-config cleartextTrafficPermitted="true">
4+
<domain>localhost</domain>
5+
<domain>127.0.0.1</domain>
6+
<domain>192.168.1.100</domain>
7+
</domain-config>
8+
</network-security-config>

‎creditcard-tokenizer-example.html

Lines changed: 0 additions & 89 deletions
This file was deleted.

0 commit comments

Comments
 (0)