---
title: Configure Payment Service
slug: commerce-connect-14/docs/set-up-payment-service
docTags: 
createdAt: 2026-07-23T10:25:34.690Z
---

With Optimizely Commerce's Payment Service, you can add payment gateway providers to your ecommerce. Payment Service uses Spreedly's iFrame to offer more flexibility and stability.

- Use a payment platform without implementing new code.
- Access more payment gateway options.
- Implement multiple payment services on a single website.

See Spreedly's documentation for information on the following:

- [iFrame Payment Form](https://developer.spreedly.com/docs/iframe-payment-form).
- [Spreedly 3DS2 Global Guide](https://developer.spreedly.com/docs/spreedly-3ds2-global-guide).

## Payment Service options

| Name                      | Data type | Description                                                                                                                                 | Required                          |
| ------------------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
| `PaymentServiceIsEnabled` | Boolean   | Indicates whether `PaymentService` is enabled                                                                                               | No                                |
| `EnvironmentName`         | String    | Environment name                                                                                                                            | No                                |
| `EnvironmentKey`          | String    | Environment key                                                                                                                             | Yes                               |
| `GatewayToken`            | String    | Gateway token                                                                                                                               | Yes                               |
| `ScaProviderKey`          | String    | Sca provider key when using 3DS                                                                                                             | Yes, if 3DS is enabled            |
| `ThreeDsIsEnabled`        | Boolean   | Indicates whether 3DS is enabled                                                                                                            | No                                |
| `ThreeDsTestMode`         | Boolean   | Indicates whether 3DS is in test mode                                                                                                       | No                                |
| `ThreeDsTestCallbackUrl`  | String    | 3DS call back URL testing – The URL is accessible from the internet. Optimizely can use `webhook.site` to expose localhost to the internet. | No                                |
| `PaymentServiceUrl`       | String    | Payment Service URL                                                                                                                         | Yes                               |
| `AuthenticationType`      | String    | HMAC or OBO                                                                                                                                 | Yes                               |
| `AppKey`                  | String    | App key                                                                                                                                     | Yes                               |
| `SecretKey`               | String    | Secret key                                                                                                                                  | Yes                               |
| `SigningSecret`           | String    | Signing secret when using 3DS mode                                                                                                          | Yes, if 3DS is enabled            |
| `InstanceIdentifier`      | String    | Instance Identifier when `AuthenticationType` is OBO                                                                                        | Yes, if AuthenticationType is OBO |

## Integration guide with example

See [Configure Payment Service](docId\:F8ydBP8qbzpBx69Yi2AXk) for the steps to integrate Payment Service with Commerce Connect.

Click to [download the changed files](https://world.optimizely.com/globalassets/documentation/commerce/457619_ChangedFiles.zip).

### List of files modified

| File                                                             | Modification | Description                                                                                                                                                                                                       |
| ---------------------------------------------------------------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `wwwroot/js/paymentservice.js`                                   | Added        | JavaScript file that handles all Checkout form events with or without 3DS mode and based on Spreedly Iframe link.                                                                                                 |
| `wwwroot/js/js/Checkout.js`                                      | Changed      | Improved handling for multiple payments for Checkout page.                                                                                                                                                        |
| `Views/Shared/Payment/\_PaymentService.cshtml`                   | Added        | Render payment form for end-user. This view uses `PaymentService.js` to handle all events for Checkout form. The Spreedly JavaScript API tokenizes CC/CVVs. There are some hidden elements for handling 3DS mode. |
| `Views/Shared/PaymentServiceConfirmation.cshtml`                 | Added        | Render confirmation after user successfully places order.                                                                                                                                                         |
| `Features/Checkout/Controllers/CheckoutController.cs`            | Changed      | Logic handling for Payment Service.                                                                                                                                                                               |
| `Features/Checkout/Services/CheckoutService.cs`                  | Changed      | Logic handling for Payment Service.                                                                                                                                                                               |
| `Features/Checkout/ViewModels/PaymentServicePaymentViewModel.cs` | Added        | Model map Payment Service payment for better handling at client side.                                                                                                                                             |
| `Infrastructure/SiteImport/ImportSiteContentStep.cs`             | Changed      | Step to import Payment Service automatically besides adding Payment Service manually in Administration                                                                                                            |
| `lang/Quicksilver_EN.xml`                                        | Changed      | Language keys for Payment Service checkout form.                                                                                                                                                                  |

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/BfzFk4joSgssiIlOyHLmh_da895df89c0eb866ea6fff0a266de7e34fd885c74f4abf29b181b7051c573cc9-source-changes.png)

**Details about the described changes**

- `lang/Quicksilver_EN.xml`

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/wW2uVND0lS-thhdY9Wh_e_0b2b0c2bff245802aa1a839051b0beaac1cf848fefb950a221cfbb4358f31180-en-lang.png)

- `Features/Checkout/Controllers/CheckoutController.cs`

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/PHJ8_4rY3SamU8qa7cShQ_d4d132bc91f801cba0d52e025ef1b223d195bbf32daee49c8d527333938654fb-checkoutcontroller.png)

- `Features/Checkout/Services/CheckoutService.cs`

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/6e31-WTMbgZBePmHfvmJ__0384fec61060aafe153e160458811d587db90b922bbc0098e94eaf8c49664b7a-checkoutservice.png)

- `Infrastructure/SiteImport/ImportSiteContentStep.cs`

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/TSavRqZqNgfDO5eKHwt9Z_154f50b27800900d1b32f0dc6c987be22c7db679d9fa0bda809b3bee361124aa-improtsitecontentstep.png)