.color_card {
  display: block;
  max-width: 268px;
  border-radius: 20px;
  text-decoration: none;
  color: #1c1c1c;
  margin: 1rem 0;
  background-color: #fffbeb;
  border: none !important;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.color_card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border: none !important;
}

.color_card-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.color_card-image {
  max-width: 100%;
  height: auto;
  border-radius: 20px 20px 0 0;
  margin: 0;
}

.color_card-text-content {
  text-align: start;
  padding: 1.5rem;
}

.color_card-title {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
}

.color_card-description {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  color: #757575;
}

.color_card-description p {
  margin: 0;
}

.dark .horizontal_color_card h2 {
  color: #392827;
}

.color_card.yellow,
.horizontal_card.yellow,
.icon-container.yellow {
  background-color: #fff3c7;
}

.dark .color_card.yellow,
.dark .horizontal_card.yellow,
.dark .icon-container.yellow {
  background-color: #fff3c7;
}

.color_card.purple,
.horizontal_card.purple,
.icon-container.purple {
  background-color: #dde0ff;
}

.dark .color_card.purple,
.dark .horizontal_card.purple,
.dark .icon-container.purple {
  background-color: #dde0ff;
}

.color_card.red,
.horizontal_card.red,
.icon-container.red {
  background-color: #ffe3e0;
}

.dark .color_card.red,
.dark .horizontal_card.red,
.dark .icon-container.red {
  background-color: #ffe3e0;
}

.color_card.lilac,
.horizontal_card.lilac,
.icon-container.lilac {
  background-color: #f3ebff;
}

.dark .color_card.lilac,
.dark .horizontal_card.lilac,
.dark .icon-container.lilac {
  background-color: #f3ebff;
}

.color_card.pink,
.horizontal_card.pink,
.icon-container.pink {
  background-color: #f5d6e8;
}

.dark .color_card.pink,
.dark .horizontal_card.pink,
.dark .icon-container.pink {
  background-color: #f5d6e8;
}

.color_card.green,
.horizontal_card.green,
.icon-container.green {
  background-color: #ccfae9;
}

.dark .color_card.green,
.dark .horizontal_card.green,
.dark .icon-container.green {
  background-color: #ccfae9;
}

.color_card.blue,
.horizontal_card.blue,
.icon-container.blue {
  background-color: #c5f0f5;
}

.dark .color_card.blue,
.dark .horizontal_card.blue,
.dark .icon-container.blue {
  background-color: #c5f0f5;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  min-height: 100vh;
  transition: all 0.3s ease;
}

body {
  background: white;
}

body.dark {
  background: #000000;
}

.hero-section {
  text-align: center;
  position: relative;
  padding: 6.5rem 20px 160px 20px;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
}

@media (max-width: 768px) {
  .hero-section {
    padding: 60px 16px 160px 16px;
    min-height: 300px;
  }
}

.dark .hero-section {
  background: #111827;
}

.hero-banner {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* make sure hero content is above the overlay */
.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.hero-content h1 {
  font-size: 5.125rem;
  max-width: 1000px;
  font-weight: 550;
  margin-bottom: 2.5rem;
  letter-spacing: -5px;
  line-height: 5.5rem;
  color: #1a1a1a;
}

@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
        margin-bottom: 1rem;
        letter-spacing: -.075rem;
        line-height: 2.8rem;
    }
}

.dark .hero-content h1 {
  color: #ffffff;
}

.hero-content p {
  font-size: 1rem;
  line-height: 1.4375rem;
  font-weight: 400;
  color: black;
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .hero-content p {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

.dark .hero-content p {
  color: #d1d5db;
}

.features-section {
  position: relative;
  margin-top: -100px; /* Negative margin to overlap hero */
  padding: 0 20px 80px 20px;
  z-index: 10;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.features-grid .card h2 {
  font-weight: 500 !important;
}

.features-grid .card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  margin: 0;
}

.dark .features-grid .card {
  background-color: rgb(28 28 28);
  border-color: #424242;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.features-grid .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.dark .features-grid .card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.feature-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.feature-content {
  padding: 24px;
  height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.dark .feature-card h3 {
  color: white;
}

.feature-card p {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.dark .feature-card p {
  color: #9ca3af;
}

@media (max-width: 768px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero {
    padding: 60px 16px 150px 16px;
  }

  .features-section {
    margin-top: -80px;
    padding: 0 16px 60px 16px;
  }

  .theme-toggle {
    top: 20px;
    right: 20px;
    padding: 10px 16px;
    font-size: 14px;
  }
}

@media (max-width: 1024px) and (min-width: 769px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


.horizontal_card {
  display: flex;
  border-radius: 2px;
  overflow: hidden;
  margin: 1rem 0;
  border: 1px solid #110f0e1a;
  margin-top: 20px;
  border-radius: 8px;
}

.dark .horizontal_card {
  border-color: #ffffff1a;
}

.horizontal_card .card-image-container {
  flex: 1;
  min-width: 45%;
}

.horizontal_card .card-image-container img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  margin: 0 !important;
}

.horizontal_card .card-content-container {
  flex: 2;
  padding: 40px 24px;
  display: flex;
  flex-direction: column;
}

.horizontal_card .card-title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
}

.horizontal_card .card-description {
  font-size: 1rem;
  line-height: 1.5;
  flex-grow: 1;
}

.horizontal_card .card-description p {
  margin: 0;
  font-weight: 350;
}

.dark-content p {
  color: #454242;
}

.horizontal_card .card-link {
  margin-top: 1rem;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  border: none;
  max-width: fit-content;
  font-weight: 500;
}

.horizontal_card .card-link:hover {
  text-decoration: underline;
}


/* The root link element */
.icon-title-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  margin: 0 auto;
}

/* Style the icon itself (passed from react-icons) */
.icon-container svg {
  width: 32px;
  height: 32px;
  color: #5b21b6; /* A darker purple for the icon */
}

.item-title {
  font-weight: 500;
  text-align: center;
  margin: 0;
  font-size: 0.9rem;
}

.icon-container {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #ede9fe;
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dark .icon-container {
  background-color: #4c1d95;
}

.icon-container svg {
  width: 24px;
  height: 24px;
  color: #000;
}

.dark .icon-container svg {
  color: #fff;
}


@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* THE FIX: Translate by -50% of the element's own width.
      Since the logo-track is 200% the width of the visible logos,
      -50% is the exact distance needed for a seamless loop.
    */
    transform: translateX(-50%);
  }
}

.logo-carousel-container {
  padding: 2rem 0;
  border: 1px solid #110f0e1a;
  border-radius: 2px;
  margin-top: 20px;
}

.dark .logo-carousel-container {
  border-color: #333;
}

.carousel-title {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 2rem;
  margin-top: 1.5rem;
  padding: 0 2rem;
}

.logo-carousel-scroller {
  overflow: hidden;
  position: relative;
}

/* .logo-carousel-scroller:hover .logo-track {
  animation-play-state: paused;
} */

.logo-track {
  display: flex;
  width: calc(200px * var(--logo-count));
  animation: scroll 12s linear infinite;
}

.logo-track a {
  text-decoration: none;
  color: inherit;
  border: none;
}

.logo-item {
  width: 100px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.logo-item:hover {
  transform: scale(1.1);
}

.logo-item svg {
  max-width: 100%;
  max-height: 56px;
  opacity: 0.95;
  transition: opacity 0.2s ease;
  border-radius: 8px;
}

.logo-item:hover svg {
  opacity: 1;
}

.explore-link {
  display: block;
  width: fit-content; /* Set width to match content */
  margin-left: 2rem; /* Add space on the right, aligns with title */
  margin-top: 1.5rem;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  text-decoration: underline;
  transition: color 0.2s ease;
  border-bottom: none !important;
}

.dark .explore-link {
  color: #eee;
}

.explore-link:hover {
  color: #e88178;
}


div.card .prose a.link {
  color: #007bff;
  text-decoration: underline;
  font-weight: 500;
}

div.card .prose a.link:visited {
  color: #551a8b;
}

div.card .prose a.link:hover {
  color: #0056b3;
  text-decoration: underline;
}

.prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
  color: red;
  font-family: "Roboto Mono", monospace;
  font-size: 13px;
  font-weight: 300;
  line-height: inherit !important;
}

.overview_cards_container .card {
  max-width: 269px !important;
}

.card-group {
  justify-items: baseline;
}

.dark .group img {
  background-color: transparent !important;
}

.param-head {
  div[data-component-part="field-name"] {
    color: #000 !important;
  }
}

.dark .param-head {
  div[data-component-part="field-name"] {
    color: #fff !important;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 500 !important;
}

.block.absolute.inset-0.overflow-hidden {
  background: none !important;
}

.banner_img_cover {
  border-radius: 8px;
}

table th {
  text-align: left !important;
}


// check if content side layout is empty
function checkContentSideLayout() {
  const sideLayout = document.getElementById("content-side-layout");
  if (sideLayout) {
    const sideLayoutContent = sideLayout.querySelector("div");
    if (
      !sideLayoutContent ||
      !sideLayoutContent.hasChildNodes() ||
      sideLayoutContent.textContent.trim() === ""
    ) {
      sideLayout.style.display = "none";
    }
  }
}

function addCodeBlockClassToDivs() {
  // Select all pre elements and get their direct parent divs
  const preElements = document.querySelectorAll("pre");

  preElements.forEach((pre) => {
    const parentDiv = pre.parentElement;
    // Only process if the parent is a div and doesn't already have the class
    if (
      parentDiv?.tagName === "DIV" &&
      !parentDiv.classList.contains("codeblock-dark")
    ) {
      parentDiv.classList.add("codeblock-dark", "dark:bg-codeblock");
      pre.classList.add("bg-[#0F1117]");
    }
  });

  // Check content side layout after processing code blocks
  checkContentSideLayout();
}

// Initial scan when the script first runs (for initial page load/hydration)
addCodeBlockClassToDivs();

// Set up a MutationObserver to watch for changes in the DOM
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // If nodes were added to the DOM
    if (mutation.type === "childList" && mutation.addedNodes.length > 0) {
      // Re-run our function to check for new code blocks
      addCodeBlockClassToDivs();
    }
  }
});

// Start observing the document body for changes
observer.observe(document.body, {
  childList: true, // Watch for direct children being added/removed
  subtree: true, // Watch for changes deeply within the body
});


Primer notifies you with a `PAYMENT.REFUND` Webhook when a refund request has been fully processed by a payment processor and the refund has reached a final state.

Check the transaction with the most recent `transactionType: "REFUND"` in the `transactions` array:
- if `processorStatus` is `SETTLED`, the refund was successful and the funds have been returned to the customer
- if `processorStatus` is `FAILED`, the refund was unsuccessful

Learn more about [how Primer handles webhooks](/api-reference/get-started/configure-webhooks).


Payment Refund

Results of any external AVS check performed on this payment.


AVSCheckAPISchema

AVSRiskAssessmentValues

AccountFundingTypeEnum

Address Line 1

Address Line 2

Name of the city, district, town or village

City

Country Code

First Name

Last Name

Postal Code

State

AddressAPISchema

ApayaCustomerTokenAPISchema

Issuername

Productcode

Productname

BinDataAPISchema

Results of any external CVV check performed on this payment.


CVVCheckAPISchema

CardAccountNumberTypeEnum

[The list of available card networks and their `CARD_NETWORK_TYPE` can be found here.](https://www.notion.so/primerio/Payment-Method-Types-2b971a8c54c3452cae0b2fffe9167d72)


CardNetworkEnum

CardProductTypeEnum

CardRegionRestrictionEnum

CountryCodeEnum

Currency

DeclineTypeEnum

Results of the pre-authorization and post-authorization fraud checks.


FraudCheckAPISchema

FraudDecisionTypeEnum

Unique identifier of a GoCardless mandate agreement

Mandate agreement ID

GoCardlessMandateAPISchema

Paymentmethodconfigid

IdealPayNLTokenAPISchema

Addressline1

Addressline2

Addressline3

Email

Firstname

Lastname

Phonenumber

Postalcode

Title

KlarnaAddressAPISchema

Klarnacustomertoken

KlarnaCustomerTokenAPISchema

Klarnaauthorizationtoken

KlarnaPaymentSessionAPISchema

Orderlines

Purchasecountry

Purchasecurrency

Recurringdescription

KlarnaSessionDetailsAPISchema

Brand

Expiry Date

Masked Number

Type

KlarnaTokenDetails

Payer Info

Paypalbillingagreementid

PayPal order status

Shipping address

PayPalBillingAgreementAPISchema

Externalpayerid

PayPalExternalPayerInfoAPISchema

PayPal order identifier

PayPalOrderTokenAPISchema

Cardholder's name

Expiration month

Expiration year

Payment card's first six digits

Is represented by a digital PAN

Payment card's last four digits

Card network

PaymentCardTokenAPISchema

[The list of available payment methods and their `PAYMENT_METHOD_TYPE` can be found here.](https://www.notion.so/primerio/Payment-Method-Types-2b971a8c54c3452cae0b2fffe9167d72)


PaymentMethodTypeEnum

Unique analytics identifier corresponding to a payment method

Unique analytics ID

The description of the payment, as it would typically appear on a bank statement.

Payment descriptor

If the payment method token was vaulted, this is set to `true`. Use this token for recurring payments.

Boolean flag indicating if a payment method token was vaulted

Payment method data

The payment method token used to authorize the transaction.

Payment Method Token

Payment method type

Threedsecureauthentication

PaymentResponsePaymentMethodOptionsAPISchema

If no capture was performed, this value will be set to `0`.

If one or more partial captures were performed, this value will be a sum
of all partial capture amounts.


Amount captured

If no refund was performed, this value will be set to `0`.

If one or more partial refunds were performed, this value will be a sum
of all partial refund amounts.


Amount refunded

The payment processor used for this payment.

Processor Name

The merchant ID registered at the payment processor used for this payment.

Processor Merchant ID

PaymentResponseProcessorAPISchema

PaymentStatus

PaymentStatusTypeEnum

PrepaidReloadableEnum

Payment types, primarily to be used for recurring payments. See the table below for all possible values.
Note: if no field is set, we will return a blank value and make a best effort to calculate the downstream fields required for processing the payment.

| paymentType | Use case |
| --- | --- |
| `FIRST_PAYMENT` | a customer-initiated payment which is the first in a series of recurring payments or subscription, or a card on file scenario.
| `ECOMMERCE` | a customer-initiated payment using stored payment details where the cardholder is present.
| `SUBSCRIPTION` | a merchant-initiated payment as part of a series of payments on a fixed schedule and a set amount.
| `UNSCHEDULED` | a merchant-initiated payment using stored payment details with no fixed schedule or amount.

Recurring Payment Type

RecurringTransactionTypeEnum

Possible risk assessment values for CVV and AVS checks.

RiskAssessmentStatusEnum

AVS Check

CVV Check

Fraud Checks

RiskDataAPISchema

If the error is of type `ISSUER_DECLINED`, this will be returned.

Payment status code

If the error is of type `ISSUER_DECLINED` this will be returned.

Declines of type `SOFT_DECLINE` may be retried,
whereas declines of type `HARD_DECLINE` should not be retried.


Decline Type

In case of an error on the processor's part, we will return the message returned by the processor. This is usually a human readable error.

Processor message

Payment status type

StatusReasonAPISchema

ThreeDSecureAuthResponseCodeEnum

Challengeissued

Protocolversion

Reasoncode

Reasontext

ThreeDSecureAuthenticationAPISchema

This enum is derived from the `transStatusReason` on page 218 of the
[EMV Co 3DS protocol specification](https://www.emvco.com/terms-of-use/?u=/wp-content/uploads/documents/EMVCo_3DS_Spec_v220_122018.pdf)

| Code | Description                             |
|------|-----------------------------------------|
| 01   | Card authentication failed              |
| 02   | Unknown Device                          |
| 03   | Unsupported Device                      |
| 04   | Exceeds authentication frequency limit  |
| 05   | Expired card                            |
| 06   | Invalid card number                     |
| 07   | Invalid transaction                     |
| 08   | No Card record                          |
| 09   | Security failure                        |
| 10   | Stolen card                             |
| 11   | Suspected fraud                         |
| 12   | Transaction not permitted to cardholder |
| 13   | Cardholder not enrolled in service      |
| 14   | Transaction timed out at the ACS        |
| 15   | Low confidence                          |
| 16   | Medium confidence                       |

ThreeDSecureFailedReasonCodeEnum

ThreeDSecureSkippedReasonCodeEnum

TransactionDeclineReasonV2Enum

Processor's main account identifier.

* Adyen: Account code
* Braintree: Merchant ID
* Stripe: Account ID"


Processor master account identifier

Transaction status, please refer to the [Transaction Status Codes](#section/API-Usage-Guide/Payment-Status) table for more information

Processor Transaction status

If the transaction has a declined or failed status.

Only if the status is `DECLINED` or `FAILED`, otherwise `null`.


Webhooks

Payment Refund

Headers

Body

Response