feat: convert docs to mdx v2

select/cards.md

@@ -52,7 +52,7 @@ We recommend you use the secure and PCI compliant [SDKs](/select/sdks/web/v3) to
 
 All our SDKs require a user to enter their card number and expiry date, along with the country of issue for the card. The SDKs won't require the CVV number, and will not make any active card checks against the cards. The SDKs will pre-populate the `countryCode` and the `programId` of the Program you want to link the card to. The card numbers are tokenised and transmitted directly from our secure pre-built SDKs to our API on submission. This way, your servers are never exposed to sensitive information, removing all PCI compliance requirements for you.
 
-<div class="info-box">
+<div className="info-box">
   <small>Linking Multiple Cards</small><br/>
   To facilitate users linking multiple cards, add identifying key:value pairs from your system in the metadata field. You can read more in the <a href="/cards#Metadata">Metadata</a> section below.
 </div>
@@ -80,7 +80,7 @@ curl -X POST \
 }'
 ```
 
-<div class="info-box">
+<div className="info-box">
     <small>Important note</small><br/>
     To use the <strong>Create Card</strong> endpoint, you must use the SDK key. Using the <strong>Create Card</strong> API endpoint with the Fidel live environment requires your company to be PCI Compliant.
 </div>

select/getting-started.md

@@ -49,7 +49,7 @@ To switch between **Live** and **Test** keys, use the **Live Mode toggle** locat
 3. Click the **Revoke** button next to it.
 4. Confirm the revocation in the dialog by entering your password (for security reasons).
 
-<div style="border-left: 4px solid #f0ad4e; padding: 0.75em 1em; background-color: #fff8e1; margin: 1em 0;">
+<div style={{borderLeft: '4px solid #f0ad4e', 'padding': '0.75em 1em', backgroundColor: '#fff8e1', 'margin': '1em 0'}}>
 <strong>Note:</strong> You can have a maximum of <strong>two keys per key type</strong> (e.g., <strong>API</strong> and <strong>SDK</strong>).<br />
 To <strong>revoke</strong> a key, you must have at least <strong>one other active key</strong> of the same type.
 </div>
@@ -73,16 +73,16 @@ You can use the web and mobile SDKs to capture your user’s card number and lin
 
 Click on the links below to see how to use the web and mobile SDKs in your applications.
 
-<div class="row">
-  <div class="column">
-    <a href="/select/sdks/web/v3" class="content">
+<div className="row">
+  <div className="column">
+    <a href="/select/sdks/web/v3" className="content">
       <img src="https://docs.fidel.uk/assets/images/svgs/web_sdk.svg" />
       <h2 data-no-link>Web</h2>
       <h3>Customizable and secure iframe to link cards on your website</h3>
     </a>
   </div>
-  <div class="column">
-    <a href="/select/sdks/ios/guide-v2" class="content">
+  <div className="column">
+    <a href="/select/sdks/ios/guide-v2" className="content">
       <img src="https://docs.fidel.uk/assets/images/svgs/mobile_sdk.svg" />
       <h2  data-no-link>Mobile</h2>
       <h3>PCI compliant SDKs for iOS, Android and React Native</h3>

select/index.md

@@ -1,29 +1,29 @@
-<div class="row">
-  <div class="column">
-    <a href="/select/getting-started" class="content" data-path="/getting-started">
+<div className="row">
+  <div className="column">
+    <a href="/select/getting-started" className="content" data-path="/getting-started">
       <img src="https://docs.fidel.uk/assets/images/svgs/get-started-icon.svg" />
       <h2 data-no-link>Get Started</h2>
       <h3>Start building card-linked applications with our quickstart guide</h3>
     </a>
   </div>
-  <div class="column">
-    <a href="https://dashboard.fidel.uk/playground" class="content">
+  <div className="column">
+    <a href="https://dashboard.fidel.uk/playground" className="content">
       <img src="https://docs.fidel.uk/assets/images/svgs/playground-icon.svg" />
       <h2 data-no-link>API Playground</h2>
       <h3>Test API requests in real-time and see how we format the returned data.</h3>
     </a>
   </div>
 </div>
-<div class="row">
-  <div class="column">
-    <a href="/select/tutorials/card-linking" class="content">
+<div className="row">
+  <div className="column">
+    <a href="/select/tutorials/card-linking" className="content">
       <img src="https://docs.fidel.uk/assets/images/svgs/tutorials-icon.svg" />
       <h2 data-no-link>Tutorials</h2>
       <h3>Learn how to build a card-linking feature into your applications.</h3>
     </a>
   </div>
-  <div class="column">
-    <a href="/select/sdks/web/v3" data-path="/select/sdks/web/v3" class="content">
+  <div className="column">
+    <a href="/select/sdks/web/v3" data-path="/select/sdks/web/v3" className="content">
        <img src="https://docs.fidel.uk/assets/images/svgs/sdks-icon.svg" />
       <h2 data-no-link>SDKs</h2>
       <h3>Take the easy and secure way to add card enrollment capabilities into your application.</h3>
@@ -53,7 +53,7 @@ By using Fidel API SDKs, card details are sent directly to Fidel API through a s
 
 Your apps will receive an `id` back that identifies the card in each transaction.
 
-<button id="link-card-button" class="with-icon" type="submit" onClick={() => window.location.href = "/docs/select/sdks/web/v3/#web-sdk-codepen"}>
+<button id="link-card-button" className="with-icon" type="submit" onClick={() => window.location.href = "/docs/select/sdks/web/v3/#web-sdk-codepen"}>
 <img src="https://docs.fidel.uk/assets/images/svgs/eye.svg" />
 <span>View demo</span>
 </button>
@@ -94,31 +94,31 @@ When a cardholder uses a credit or debit card to make a purchase, the funds are
 <ol>
   <li>
   When the cardholder initiates the transaction, their bank (issuing bank, issuer) needs to authorize it. For this, the authorization request must travel from the merchant through the merchant’s bank (acquirer) and through the card network to the issuing bank.
-  <div style="text-align:center">
+  <div style={{textAlign: 'center'}}>
     <img src="https://docs.fidel.uk/assets/images/trx-life-cycle-1.png" />
   </div>
   </li>
 
   <li>
   If the cardholder has the necessary funds, the issuing bank sends back on the same path the authorization response containing the authorization code (auth code), which means that the cardholder can make the purchase.
   At this point, the payment amount is still on the cardholder’s account. However, the merchant can safely provide the purchased goods or services, as the transaction was authorized. Usually, the merchant places an authorization hold on the cardholder’s account for the authorized amount of the sale.
-  <div style="text-align:center">
+  <div style={{textAlign: 'center'}}>
     <img src="https://docs.fidel.uk/assets/images/trx-life-cycle-2.png" />
   </div>
   </li>
 
   <li>
   The next step is the clearing request, which initiates the administrative process of the payment.
   Typically, clearing occurs at the end of the day, when the acquirer bank collects all the transaction information (amounts, auth codes, etc.) from all payment endpoints of the merchant. Then, on its own processing schedule, the acquirer starts processing the payments with the respective issuing banks.
-  <div style="text-align:center">
+  <div style={{textAlign: 'center'}}>
     <img src="https://docs.fidel.uk/assets/images/trx-life-cycle-3.png" />
   </div>
   </li>
 
   <li>
   The issuing bank sends back the clearing response, and the funds are moved to the merchant’s account.
   Note that at Fidel API both cleared and settled transactions are referred to as cleared transactions.
-  <div style="text-align:center">
+  <div style={{textAlign: 'center'}}>
     <img src="https://docs.fidel.uk/assets/images/trx-life-cycle-4.png" />
   </div>
   </li>
@@ -132,6 +132,6 @@ When a cardholder links a card to a Fidel API program, Fidel API verifies the ca
 
 You can then retrieve the collected data using the Transaction Select API. You can also register webhooks to be notified about the card’s transaction events (new authorization, clearing, etc.).
 
-<div style="text-align:center">
+<div style={{textAlign: 'center'}}>
   <img src="https://docs.fidel.uk/assets/images/trx-life-cycle-5.png" />
 </div>

select/locations.md

@@ -28,7 +28,7 @@ curl -X POST \
 
 The information required for each location is the Brand (with approved consent), address, postcode, city and country. If your location has been assigned Merchant IDs (MIDs) from the card networks, you may add them now. Adding MIDs during Location creation will speed up the onboarding process.
 
-<div class="info-box">
+<div className="info-box">
     <small>Payment Facilitators</small><br/>
     If you need to onboard payment facilitators (Square, iZettle, SumUp, etc.), they may be using shared merchant IDs that have an impact on how transactions are monitored. Reach out to Fidel if you work with merchants that use payment facilitators.
 </div>
@@ -39,7 +39,7 @@ Once you have added your locations to Fidel, we can begin the process of Locatio
 
 Location status is reported separately for each card scheme. Each location/scheme combination can have one of four statuses: **Idle, Syncing, Active or Not found**.
 
-<div class="info-box">
+<div className="info-box">
 In the test environment, every added Location skips the Location Sync process and is automatically set to Active.
 </div>