Configure Payment Service
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:
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 for the steps to integrate Payment Service with Commerce Connect.
Click to download the changed files.
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. |
Details about the described changes
- lang/Quicksilver_EN.xml
- Features/Checkout/Controllers/CheckoutController.cs
- Features/Checkout/Services/CheckoutService.cs
- Infrastructure/SiteImport/ImportSiteContentStep.cs
