Configure Payment Service

<ProcessingPaymentFailure>Failed to process your payment.</ProcessingPaymentFailure>
</Errors>
<Methods>
    <PaymentService>
        <Labels>
            <CreditCardFirstName>First name:</CreditCardFirstName>
            <CreditCardLastName>Last name:</CreditCardLastName>
            <CreditCardNumber>Credit card number:</CreditCardNumber>
            <CreditCardSecurityCode>Security code:</CreditCardSecurityCode>
            <ExpirationMonth>Expiration month:</ExpirationMonth>
            <ExpirationYear>Expiration year:</ExpirationYear>
        </Labels>
    </PaymentService>
    <CashOnDelivery>
        <Description>You pay for your order when picking up your delivery at your local post office.</Description>
    </CashOnDelivery>
</Methods>

if (paymentMethod.SystemKeyword.Equals("PaymentService", StringComparison.OrdinalIgnoreCase)) {
  var payment = Cart.GetFirstForm().Payments.FirstOrDefault() as PaymentServicePayment;
  if (payment != null && payment.Status.Equals(PaymentStatus.Pending.ToString(),
      StringComparison.OrdinalIgnoreCase)) {
    return BadRequest(new PaymentServicePaymentViewModel(payment, Cart));
  } else {
    var message = string.Join(',', ModelState.SelectMany(x => x.Value.Errors.Select(y =>
      y.ErrorMessage)));
    return BadRequest(message);
  }
}

using EPiServer.Commerce.Bolt;
using EPiServer.Commerce.Order;
using EPiServer.Commerce.Order.Payments.Tokenization;
using EPiServer.Commerce.PaymentService;
using EPiServer.Core;
using EPiServer.Data;
using EPiServer.Framework.Localization;

// ...

if (additionalPaymentData.TryGetValue("paymentData", out var paymentData)) {
  payment.Properties["additionalPaymentData"] = paymentData;
}

if (payment is PaymentServicePayment paymentServicePayment) {
  // Support both PascalCase (new Checkout SDK) and lowercase (legacy) keys
  if (additionalPaymentData.TryGetValue("transactionToken", out var transactionToken)) {
    paymentServicePayment.TransactionToken = transactionToken;
  } else if (additionalPaymentData.TryGetValue("token", out var token)) {
    paymentServicePayment.TransactionToken = token;
  }

  if (additionalPaymentData.TryGetValue("browserInfo", out var browserInfo)) {
    paymentServicePayment.BrowserInfo = browserInfo;
  }
}

if (payment is BoltPayment boltPayment) {
  if (additionalPaymentData.TryGetValue("token", out var token)) {
    // ...
  }
}

// ...

{
  modelState.AddModelError("",
    _localizationService.GetString("/Checkout/Payment/Errors/ProcessingPaymentFailure") + ex.Message);
} catch (Exception ex) {
  modelState.AddModelError("",
    _localizationService.GetString("/Checkout/Payment/Errors/ProcessingPaymentFailure") + ex.Message);
}
return null;

@using EPiServer.Commerce.PaymentService

@* ... *@

@* Load Spreedly Checkout SDK with Subresource Integrity *@
<script src="@SpreedlyConstants.CheckoutSdkUrl"
        type="text/javascript"
        charset="utf-8"
        crossorigin="anonymous"
        integrity="@Html.Raw(SpreedlyConstants.CheckoutSdkIntegrity)"
        async>
</script>

<script type="text/javascript" src="/js/paymentservice.js" defer></script>

<script type="text/javascript">
  // Wait for Spreedly Checkout SDK and fetch auth parameters
  (function waitForSpreedly() {
    if (typeof SpreedlyHostedFields !== 'undefined' && typeof initPaymentServiceCheckout === 'function') {
      fetch('/api/paymentservice/spreedly/auth')
        .then(function (response) {
          if (!response.ok) {
            throw new Error('Failed to fetch Spreedly auth parameters');
          }
          return response.json();
        })
        .then(function (authParams) {
          initPaymentServiceCheckout(authParams);
        })
        .catch(function (error) {
          // ...
        });
    } else {
      setTimeout(waitForSpreedly, 50);
    }
  })();
</script>

function initPaymentServiceCheckout(authParams) {
  // Store environment key for 3DS lifecycle
  spreedlyEnvironmentKey = authParams.environmentKey;

  // Initialize Checkout SDK with full authentication parameters
  spreedlySDK = new SpreedlyHostedFields({
    environment_key: authParams.environmentKey,
    nonce: authParams.nonce,
    timestamp: authParams.timestamp,
    certificate_token: authParams.certificateToken,
    signature: authParams.signature
  });

  // Mount payment fields
  spreedlySDK.inAppElements({
    number: { containerId: 'spreedly-number' },
    cvv: { containerId: 'spreedly-cvv' }
  });

  // Token generated event
  spreedlySDK.on('tokenGenerated', function (response) {
    var tokenizedPaymentMethod = response && response.tokenResponse && response.tokenResponse.payment_method;
    var token = tokenizedPaymentMethod && tokenizedPaymentMethod.token;
    // ...
    document.getElementById("additionalPaymentData[0].Key").value = "transactionToken";
    document.getElementById("additionalPaymentData[0].Value").value = token;
    // ...
  });

  // ...

  function getBrowserInfo() {
    // Checkout SDK uses serializeBrowserInfo global function
    return serializeBrowserInfo("04", "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8");
  }

  // ...

  // Checkout SDK uses SpreedlyThreeDSLifecycle constructor with callbacks
  const lifecycle = new SpreedlyThreeDSLifecycle({
    environmentKey: spreedlyEnvironmentKey,
    hiddenIframeLocation: "spreedly-device-fingerprint",
    challengeIframeLocation: "spreedly-challenge",
    transactionToken: transactionToken,
    challengeIframeClasses: "fitToModal",
    callbacks: {
      onChallenge: function () { /* show the challenge modal */ },
      onSuccess: function () { /* hide the modal, then complete the order */ },
      onError: function () { /* hide the modal, then show an error */ }
    }
  });

  lifecycle.start();
}

function submitPaymentForm(e) {
  // ...
  // Submit to Checkout SDK
  spreedlySDK.submit(fields);
}

// Earlier in file
public class SomeClass {
  public void SomeMethod() {
    // ... other code ...

    "EPiServer.Commerce.Bolt.BoltPayment, EPiServer.Commerce.Bolt",
    "EPiServer.Commerce.Bolt.BoltGateway, EPiServer.Commerce.Bolt",
    false,
    0,
    allMarkets,
    language,
    workingDto);

  AddPaymentMethod(Guid.NewGuid(),
    "PaymentService",
    "PaymentService",
    "PaymentService Payment methods implementation.",
    "EPiServer.Commerce.PaymentService.PaymentServicePayment, EPiServer.Commerce.PaymentService",
    "EPiServer.Commerce.PaymentService.PaymentServiceGateway, EPiServer.Commerce.PaymentService",
    false, 0, allMarkets, language, workingDto);
  } // closes SomeMethod()
} // closes SomeClass