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
Copy file name to clipboardExpand all lines: docs/Microform-Setup.md
+8-19
Original file line number
Diff line number
Diff line change
@@ -4,33 +4,22 @@ Microform Integration replaces the primary account number (PAN) or card verifica
4
4
5
5
## Setting Up the Client Side
6
6
7
-
- Add the Microform Integration JavaScript library to your page by loading it directly from Cybersource and this can be achieved dynamically per environment by using the asset path returned in the JWT (JSON Web Token).
7
+
- Add the Microform Integration JavaScript library to your page by loading it directly using the clientLibrary and clientLibraryIntegrity values provided in the `isv_clientLibrary` and `isv_clientLibraryIntegrity` custom fields from the Payment Create call.
- Invoke the Flex SDK by passing the Capture Context that was generated in the Payment create call.
16
+
- Invoke the Flex SDK by passing the Capture Context from `isv_tokenCaptureContextSignature` custom field from the Payment create call.
28
17
29
-
var flex = new Flex(captureContext);
18
+
var flex = new Flex(isv_tokenCaptureContextSignature);
30
19
31
20
- Initiate the microform object with styling to match your web page.
32
21
33
-
var microform = flex.microform({ styles: myStyles });
22
+
var microform = flex.microform("card",{ styles: myStyles });
34
23
35
24
- Create and attach the microform fields to the HTML objects through the Microform Integration JavaScript library.
36
25
@@ -46,4 +35,4 @@ Microform Integration replaces the primary account number (PAN) or card verifica
46
35
47
36
Once the microform integration v2 is setup, you can continue to the [Process a Card Payment Without Payer Authentication](Process-a-Card-Payment-Without-Payer-Authentication.md) or [Process a Payment a Card Payment With Payer Authentication](Process-a-Card-Payment-With-Payer-Authentication.md) process.
48
37
49
-
**_NOTE:_** For more details, refer [Microform Integration v2 Cybersource Documentation](https://developer.cybersource.com/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2.html).
38
+
**_NOTE:_** For more details, refer [Microform Integration v2 Cybersource Documentation](https://developer.cybersource.com/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ-v2.html).
2. The response should have the `isv_tokenCaptureContextSignature` and `isv_tokenVerificationContext` custom fields.
41
-
Set the `isv_tokenCaptureContextSignature` custom field value to the captureContext of flex object which will load Cybersource Microform
40
+
2. The response should include `isv_tokenCaptureContextSignature`, `isv_tokenVerificationContext`, `isv_clientLibrary`, and `clientLibraryIntegrity`. The `isv_clientLibrary` and `isv_clientLibraryIntegrity` are obtained by decoding the capture context received from Cybersource. Additionally, set the `isv_tokenCaptureContextSignature` custom field value to the captureContext of the Flex object, which will load the Cybersource Microform.
42
41
43
-
flexInstance = new Flex(captureContext);
42
+
flexInstance = new Flex(isv_tokenCaptureContextSignature);
44
43
45
44
3. Use the Microform Integration v2 to tokenize card details. See <https://github.com/CyberSource/cybersource-flex-samples-node> for an example of how to use the captureContext obtained above and the Microform JS to tokenize a Card
2. The response should have the `isv_tokenCaptureContextSignature` and `isv_tokenVerificationContext` custom fields.
44
-
Set the `isv_tokenCaptureContextSignature` custom field value to the captureContext of flex object which will load Cybersource Microform
45
-
46
-
flexInstance = new Flex(captureContext);
47
-
48
-
3. Use the Microform Integration v2 to tokenize card details. See <https://github.com/CyberSource/cybersource-flex-samples-node> for an example of how to use the captureContext obtained above and the Microform JS to tokenize a Card
49
-
50
-
4. After the card details are entered by the customer, ask the customer to add billing address for the card and update the customer by populating the following
| custom.fields.isv_token | Cybersource flex token | Yes | This is the token parameter passed into the callback for the microform.createToken call |
55
-
| custom.fields.isv_tokenAlias | Alias for saved token | Yes | When this is specified the token will be saved as a subscription for later use. Merchant can either provide a input text field asking for the customer to provide value for this field or a checkbox to select if the token needs be saved as a subscription for later use. In the latter case, Merchant should provide a unique value upon selecting the checkbox |
56
-
| custom.fields.isv_maskedPan | Masked Card number | No | Can be obtained from the token parameter passed into the callback for the microform.createToken call. The token is a JWT which when decoded has a `flexData.content.paymentInformation.card.number.bin + flexData.content.paymentInformation.card.number.maskedValue` field containing the masked card number <br><br> Not required by extension but can be used for display |
57
-
| custom.fields.isv_cardType | Card type | No | Can be obtained from the token parameter passed into the callback for the microform.createToken call. The token is a JWT which when decoded has a `flexData.content.paymentInformation.card.number.detectedCardTypes[0]` field containing the card type <br><br> Not required by extension but can be used for display |
58
-
| custom.fields.isv_cardExpiryMonth | Card expiry month | No | Can be obtained from the token parameter passed into the callback for the microform.createToken call. The token is a JWT which when decoded has a `flexData.content.paymentInformation.card.expirationMonth.value` field containing the card expiration month <br><br> Not required by extension but can be used for display |
59
-
| custom.fields.isv_cardExpiryYear | Card expiry year | No | Can be obtained from the token parameter passed into the callback for the microform.createToken call. The token is a JWT which when decoded has a `flexData.content.paymentInformation.card.expirationYear.value` field containing the card expiration year <br><br> Not required by extension but can be used for display |
60
-
| custom.fields.isv_addressId | Id of the address added by customer for the card | Yes ||
61
-
| custom.fields.isv_currencyCode | Currency code of the store | Yes ||
62
-
| custom.fields.isv_deviceFingerprintId | Customer device fingerprint Id | Yes | Refer [Device Fingerprinting](Decision-Manager.md#device-fingerprinting) to generate this value |
63
-
64
-
5. Wait for the updated response and verify the `custom.fields.isv_tokens` field
65
-
66
-
6. If token is created successfully, `custom.fields.isv_tokens` field will have updated tokens along with `custom.fields.is_customerId` with the customer id returned in response.
67
-
68
-
7. If there was an error, `custom.fields.isv_token`s field either be empty if there were no tokens available or will have the old tokens which were available before adding the new token. Also `custom.fields.isv_failedTokens` field will have all the failed card records if there was an error while adding the token
69
-
70
22
# Tokenization with UnifiedCheckout
71
23
72
24
1. Use the client library asset path returned by the capture context response to invoke Unified Checkout on your page. To invoke the Unified Checkout JavaScript library using the JWT response from the capture context request, follow the instructions in the document [Unified Checkout Setup](UnifiedCheckout-setup.md)
- To obtain the capture context, send a `GET` request to `{baseUrl}/captureContext`. This request requires authentication and must include an authentication header, which can be generated by making a `GET` request to `{baseUrl}/generateHeader`.
12
+
- To obtain the `captureContextData`, `clientLibrary`, and `clientLibraryIntegrity`, you must first generate an authentication header. This is accomplished by sending a `GET` request to `{baseUrl}/generateHeader` and using the response to include the required authentication header for subsequent requests.
13
13
14
-
-Use the client library asset path returned by the capture context response to invoke Unified Checkout on your page.
14
+
-Once the header is generated, send a `GET` request to `{baseUrl}/captureContext`, ensuring that the request includes the previously generated authentication header. The response will contain the `captureContextData` provided by CyberSource.
15
15
16
-
Get the JavaScript library URL dynamically from the capture context response. When decoded, it appears in the JSON parameter clientLibrary as:
- The `captureContextData` is decoded to extract the `clientLibrary` and `clientLibraryIntegrity` fields.
18
17
19
-
When you load the library, the capture context that you received from your initial server‑side request is used to invoke the accept function.
18
+
- A sample response typically contains the `captureContextData`, `clientLibrary`, and `clientLibraryIntegrity` fields in JSON format, as shown below.
19
+
20
+
Example Response:
21
+
22
+
{
23
+
"captureContextData": "xxxx",
24
+
"clientLibrary": "xxxx",
25
+
"clientLibraryIntegrity": "xxxx"
26
+
}
27
+
28
+
- Use the `clientLibrary` and `clientLibraryIntegrity` values from the capture context response to invoke Unified Checkout on your page.
29
+
30
+
When you load the library, use the capture context obtained from the GET request to `{baseUrl}/captureContext` as a parameter for invoking the accept function.
header.payload.signature refers to the capture context JWT
41
+
header.payload.signature refers to the `captureContextData`.
31
42
32
43
33
44
- Adding the Payment Application and Payment Acceptance
@@ -38,14 +49,12 @@ Unified Checkout provides a single interface with which you can accept numerous
38
49
39
50
var authForm = document.getElementById("authForm");
40
51
var transientToken = document.getElementById("transientToken");
41
-
42
-
var cc = document.getElementById("captureContext").value;
43
52
var showArgs = {
44
53
containers: {
45
54
paymentSelection: "#buttonPaymentListContainer"
46
55
}
47
56
};
48
-
Accept(cc)
57
+
Accept(captureContextData)
49
58
.then(function(accept) {
50
59
return accept.unifiedPayments();
51
60
})
@@ -63,15 +72,13 @@ Unified Checkout provides a single interface with which you can accept numerous
63
72
64
73
var authForm = document.getElementById("authForm");
65
74
var transientToken = document.getElementById("transientToken");
66
-
67
-
var cc = document.getElementById("captureContext").value;
68
75
var showArgs = {
69
76
containers: {
70
77
paymentSelection: "#buttonPaymentListContainer",
71
78
paymentScreen: "#embeddedPaymentContainer"
72
79
}
73
80
};
74
-
Accept(cc)
81
+
Accept(captureContextData)
75
82
.then(function(accept) {
76
83
// Gets the UC instance (e.g. what card brands I requested, any address information I pre-filled etc.)
77
84
return accept.unifiedPayments(false);
@@ -100,4 +107,4 @@ The response to a successful customer interaction with Unified Checkout is a tra
100
107
| Default | creditCard or creditCardWithPayerAuthentication (depending on the payerAuth flag) |
101
108
102
109
103
-
**_NOTE:_** For more details, refer [Unified Checkout Cybersource Documentation](https://developer.cybersource.com/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro.html).
110
+
**_NOTE:_** For more details, refer [Unified Checkout Cybersource Documentation](https://developer.cybersource.com/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/uc-intro.html).
0 commit comments