You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Jan 8, 2025. It is now read-only.
| Your customers enter their credit card data on a form within your website. | You receive a request from a remote server including credit card data in the payload. | Your customers enter their credit card data on a form within your native app. |
15
-
|[Inline Mode](capture-iframes/) seamlessly tokenizes sensitive data within your web app. |[Filter Proxy](filter-payloads.md) tokenizes sensitive data on the fly within your web services. |[Vault \(alias gateway\)](vault-alias-gateway.md) tokenizes sensitive data within your mobile app. |
15
+
|[Secure Fields](capture-iframes/) seamlessly tokenizes sensitive data within your web app. |[Filter Proxy](filter-payloads.md) tokenizes sensitive data on the fly within your web services. |[Vault \(alias gateway\)](vault-alias-gateway.md) tokenizes sensitive data within your mobile app. |
Copy file name to clipboardExpand all lines: collect-and-store-cards/capture-iframes/README.md
+27-12
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
1
# Capture \(iframes\)
2
2
3
-
The Inline Mode allows you to securely collect card data by injecting iframes to your DOM. A separate iframe for both, card number and CVV code is used. Thereby, sensitive data never touches your server and allows you to capture all other related card data such as cardholder name, expiry date, etc. directly by yourself.
3
+
Secure Fields allow you to securely collect card data by injecting iframes to your DOM. A separate iframe for both, card number and CVV code is used. Thereby, sensitive data never touches your server and allows you to capture all other related card data such as cardholder name, expiry date, etc. directly by yourself.
4
4
5
5
{% hint style="success" %}
6
-
**The Inline Mode qualifies you for SAQ A.**
6
+
**Secure Fields qualify you for SAQ A.**
7
7
{% endhint %}
8
8
9
-
Browser compatibility for the Inline Mode:
9
+
Browser compatibility for Secure Fields:
10
10
11
11
|**Browser**|**Version**|
12
12
| :--- | :--- |
@@ -18,20 +18,20 @@ Browser compatibility for the Inline Mode:
18
18
| Blackberry Browser |>=8 |
19
19
| Android Browser |>=4 |
20
20
21
-
## 1. Setup Inline Mode
21
+
## 1. Setup Secure Fields
22
22
23
23
To get started include the following script on your page.
@@ -42,7 +42,7 @@ Please make sure to always load it directly from [https://pay.sandbox.datatrans.
42
42
43
43
## 2. Create payment form
44
44
45
-
In order for the Inline Mode to insert the card number and CVV iframes at the right place, create empty DOM elements and assign them unique IDs. In the example below those are:
45
+
In order for Secure Fields to insert card number and CVV iframes at the right place, create empty DOM elements and assign them unique IDs. In the example below those are:
46
46
47
47
*`card-number-placeholder`
48
48
*`cvv-placeholder`
@@ -72,32 +72,47 @@ In test mode, only [test credit cards](../../test-card-data.md) are allowed.
72
72
73
73
## 3. Retrieve a transactionId
74
74
75
-
Initialize the Inline Mode with your `merchantId` and specify which DOM element containers should be used to inject the iframes:
75
+
First, create a new Secure Fields instance:
76
76
77
77
```javascript
78
-
Inline.initTokenize( "1100007006", {
78
+
var secureFields =newSecureFields();
79
+
80
+
// Multiple instances might be created and used independently:
81
+
// e.g. var secureFields2 = new SecureFields();
82
+
```
83
+
84
+
Initialize it with your `merchantId` and specify which DOM element containers should be used to inject the iframes:
85
+
86
+
```javascript
87
+
secureFields.initTokenize( "1100007006", {
79
88
cardNumber:"card-number-placeholder",
80
89
cvv:"cvv-placeholder"
81
90
});
82
91
```
83
92
84
-
Afterwards you submit the form and listen for the success event:
93
+
Afterwards submit the form and listen for the success event:
85
94
86
95
```javascript
87
96
$(function() {
88
97
$("#go").click( function() {
89
-
Inline.submit(); // submit the "form"
98
+
secureFields.submit(); // submit the "form"
90
99
})
91
100
});
92
101
93
-
Inline.on("success", function(data) {
102
+
secureFields.on("success", function(data) {
94
103
if(data.transactionId) {
95
104
// transmit data.transactionId and the rest
96
105
// of the form to your server
97
106
}
98
107
});
99
108
```
100
109
110
+
Instances can be destroyed if no longer used:
111
+
112
+
```javascript
113
+
secureFields.destroy();
114
+
```
115
+
101
116
## 4. Obtain tokens
102
117
103
118
Once you've transmitted the `transactionId` to your server \(together with the the rest of your form\) you can execute a server to server [`GET Token`](token-api.md) request to get tokens for card number and CVV code:
The inline mode automatically toggles CSS classes on the input fields based on various user input. Use `"cardNumber.valid:hover": "background-color: green;"` for example to apply different style based classes.
65
+
Secure Fields automatically toggle CSS classes on the input fields based on various user input. Use `"cardNumber.valid:hover": "background-color: green;"` for example to apply different style based classes.
66
66
67
67
| Class name | Description |
68
68
| :--- | :--- |
@@ -80,7 +80,7 @@ The `initTokenize` function allows to set the input type, placeholder value and
80
80
* The placeholder value will be `enter your cvv`
81
81
82
82
```javascript
83
-
Inline.initTokenize(
83
+
secureFields.initTokenize(
84
84
merchantId,
85
85
{
86
86
cardNumber:"cardNumberPlaceholder",
@@ -101,7 +101,7 @@ Inline.initTokenize(
101
101
By default all credit cards available in your merchant setup will be accepted. Use the `paymentMethods` option if there's a need to accept only a subset of card `types`.
102
102
103
103
```javascript
104
-
Inline.initTokenize(
104
+
secureFields.initTokenize(
105
105
merchantId,
106
106
{
107
107
cardNumber:"cardNumberPlaceholder",
@@ -131,21 +131,20 @@ Parameter values for “paymentmethod”:
131
131
Web fonts are supported via the standard `@font-face` CSS rule. Because of security concerns it is not permitted to link external resources. So, in order to get custom fonts, you need to:
132
132
133
133
* Contact [[email protected]](mailto:[email protected]) and provide the font files \(woff, woof2, ttf etc\). The files will be uploaded into your merchant id hosted files space.
134
-
* Reference the font files, by name \(no path\) in the styles section of the `Inline.initTokenize` call:
134
+
* Reference the font files, by name \(no path\) in the styles section of the `initTokenize` call:
Copy file name to clipboardExpand all lines: collect-and-store-cards/vault-alias-gateway.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -3,7 +3,7 @@
3
3
The Alias Gateway allows you to pass credit card data directly to the PCI Proxy vault to create tokens. This can be interesting if you want to migrate existing credit card data that is currently stored somewhere else to store it within the PCI Proxy vault.
4
4
5
5
{% hint style="danger" %}
6
-
We strongly discourage passing credit card data directly to our Alias Gateway as it means your systems get in contact with full credit card numbers. Please use the [Filter Proxy](filter-payloads.md) or [Inline Mode](capture-iframes/) to reduce your PCI scope to a minimum.
6
+
We strongly discourage passing credit card data directly to our Alias Gateway as it means your systems get in contact with full credit card numbers. Please use the [Filter Proxy](filter-payloads.md) or [Secure Fields](capture-iframes/) to reduce your PCI scope to a minimum.
0 commit comments