Merge pull request #23 from swan-io/143/cards

Migrate cards section

Author: clywyk

docs/images/topics/cards/cards-configure-1.png

@@ -0,0 +1,50 @@
+---
+title: Design custom cards
+---
+
+# Design custom cards
+
+You can design a custom card for your Swan cardholders.
+Custom designs, like standard ones, are used for virtual, physical, and digital cards.
+
+import CustomCardDesign from '../partials/_custom-card-timeline.mdx';
+
+<CustomCardDesign />
+
+## Process overview {#overview}
+
+1. Send an email to [email protected] stating that you'd like to begin the custom design process. Include how many cards you'll print in the first batch (100 minimum).
+1. Swan will send you a tutorial and an Adobe Illustrator file that's ready to use.
+1. Choose your **customizations**.
+1. Choose your **packaging**.
+1. Send your design to your Technical Account Manager.
+1. Your Technical Account Manager will work with Mastercard to validate your design.
+1. After your design is validated, samples of your card will be printed and delivered for final approval.
+1. As soon as you approve the sample, your cards can be printed and delivered to your cardholders.
+
+import CustomCardLockedElements from '../partials/_custom-locked-elements.mdx';
+
+:::note Locked elements
+The following elements **can't be changed**:
+<CustomCardLockedElements />
+:::
+
+## Choose your customizations {#customizations}
+
+| Element | Options |
+| --- | --- |
+| Chip color | <ul><li>Gold (default)</li><li>Silver (2,000 cards minimum, additional cost)</li></ul> |
+| Type of plastic<br/>*(no metal available)* | <ul><li>Standard plastic</li><li>Recycled plastic 85% or 100% (adds up to 12 weeks as recycled plastic is shipped by boat to reduce the carbon footprint)</li></ul> |
+| Finish | <ul><li>Matte</li><li>Gloss</li><li>Partially matte or gloss (might be referred to as *selective varnish*; additional cost)</li><li>Logo printed with brilliant effect (additional cost)</li><li>Other effects, such as metallic, fluorescent silkscreen, and more, are also available at an additional cost</li></ul> |
+| Color | You can customize your color for the front, back, and edges.<br/><br/><ul><li>**Dyed PVC**<ul><li>Front, back, and edges are dyed the same color </li><li>Additional cost</li></ul></li></ul><ul><li>**Edge color**<ul><li>Choose a different color for the edges</li><li>Additional cost</li></ul></li></ul><ul><li>**Face color only**<ul><li>Might be referred to as *quadri-faced color*</li><li>Front and back are dyed the same color, while the edges stay white</li><li>No additional cost</li></ul></li></ul><ul><li>**Custom magnetic band color**<ul><li>Default color is black</li><li>Choose a different color for an additional cost</li></ul></li></ul>Several colors are available. Please indicate the color you'd like, and your Technical Account Manager will share your options with you. Note that if your chosen color clashes with the Mastercard logo, the logo will be outlined in white. |
+| Text style | While the font must be Maison Neue, the styling of the text is up to you. Styling is applied to the cardholder name, card number, identifier, expiry date, CVC, and the debit or business label.<br/><br/><ul><li>**Durable graphics** (default, cost included)<ul><li>Durable color foil applied to card</li><li>Available in white, black, silver, or gold (other colors available but require validation)</li></ul></li></ul><ul><li>**Embossed**<ul><li>Text is raised off the card</li><li>Additional cost</li></ul></li></ul><ul><li>**Thermal printing**<ul><li>Long-lasting technique that carves the text out of the card</li><li>Additional cost</li></ul></li></ul><ul><li>**Laser**<ul><li>Long-lasting technique that burns the text into the card with a laser</li><li>Additional cost</li></ul></li></ul> |
+| Additional line | <ul><li>Add an additional line to the front of your card (example: add your company name)</li><li>Line appears under the cardholder name</li><li>Content must be approved</li><li>Limit: 26 characters</li></ul> |
+
+## Choose your packaging {#packaging}
+
+| Type | Options |
+| --- | --- |
+| Standard packaging | Standard envelope with card attached to an inserted letter |
+| Customized letter text | Customize the written content of the letter; add additional languages (additional cost) |
+| Colorful paper insert | Paper used for the letter can be a color other that the standard white (additional cost) |
+| Customized packaging | Use a box or flyer; can add additional time (additional cost) |

docs/images/topics/cards/cards-configure-2.png

@@ -0,0 +1,31 @@
+---
+title: Configure logo
+---
+
+# Configure your logo
+
+For both standard and custom card designs, you'll add your logo to the card.
+
+Please follow these guidelines to when creating your SVG file, both so your logo looks great on your card and so Swan can validate the file.
+
+
+1. The SVG file can be a maximum of **100 kilobytes** (KB).
+1. Colors must be **monochrome**:
+    - Black cards: white monochrome
+    - Silver cards: black monochrome
+    - If you'd prefer other color options, consider designing a custom card.
+1. Don't use any **opacity** settings. Don't apply the fill-opacity attribute.
+1. Don't use any **non-vectorial text**, meaning no text tag.
+1. Don't use layering, meaning there should be **no overlaid elements**.
+1. The **logo edges** must fit inside the container, or viewbox attribute.
+
+
+## Troubleshooting
+
+Here are some tips to make sure your logo meets requirements.
+
+| Problem | Explanation |
+| --- | --- |
+| Logo appearing too small | If your logo is appearing **smaller than expected**, check that your logo fits perfectly in the SVG viewbox attribute. Any padding between your logo and the viewbox edges will appear on your card. |
+| Empty rectangle instead of logo | If you see an **empty rectangle** (black or white) instead of your uploaded logo, there might be an issue with your SVG file. Check that there are no overlaid elements in your file. If there are overlaid elements, remove them and upload the new file. |
+| Logo isn't the correct color | If your logo is showing up as black on a black card, or white on a silver card, there might be an issue with your SVG file. Make sure you're not using CSS to apply your color, which is only compatible with browser renderers.  |

docs/images/topics/cards/cards-configure-create-1.png

@@ -0,0 +1,51 @@
+---
+title: Configure standard cards
+---
+
+# Configure standard cards
+
+Standard designs are used everywhere, such as in-app, in digital Wallets, and when revealing a card's sensitive information, for virtual, physical, and digital cards.
+
+Before creating cards, personalize the standard card design.
+You can use Swan's [card design studio](https://swan-io.github.io/card-design-studio/) to get a 3D preview of how your card will look.
+
+:::tip Packaging
+You can **customize your packaging** for standard cards. Learn more in the [custom card design guide](./guide-custom.mdx#packaging).
+:::
+
+## Create a standard card {#create}
+
+1. Go to **Dashboard** > **Settings** > **Cards**.
+1. Click **Create a new card product**.
+
+![Screenshot of the Dashboard cards settings page with two card products](../../../images/topics/cards/cards-configure-create-1.png)
+
+3. Name your new card product.
+4. If you'd like to allow physical cards, toggle **Allow physical cards** to **on**.
+5. Click **Create**.
+
+![Screenshot of the Dashboard cards settings page with two card products](../../../images/topics/cards/cards-configure-create-2.png)
+
+## Configure your standard card {#configure}
+
+1. Open the card product you'd like to configure.
+Remember to start on **Dashboard** > **Settings** > **Cards**.
+
+![Screenshot of the Dashboard cards settings page with two card products](../../../images/topics/cards/cards-configure-1.png)
+
+2. Choose black or silver. If you'd like to design a custom card, refer to the [dedicated guide](./guide-custom.mdx).
+3. Choose your logo size.
+4. Upload your logo, resizing if needed. Don't hesitate to refer to the [guide to create your logo file](./guide-logo.mdx).
+5. Click **Save**.
+
+*Note that you can also preview your card in 3D from this page.*
+
+After clicking **Save**, your updates are available immediately in Sandbox.
+However, Swan needs to **review changes to Live cards**.
+If you didn't upload a new logo, please upload your logo again and click **Save**, which forces the API to trigger a review.
+
+![Screenshot of the Dashboard cards settings page with two card products](../../../images/topics/cards/cards-configure-2.png)
+
+:::info Card product settings
+In the **Options** tab, you can also update your [card product settings](../overview/guide-update.mdx).
+:::

docs/images/topics/cards/cards-configure-create-2.png

@@ -0,0 +1,58 @@
+---
+title: Card design
+---
+
+# Card design
+
+Your card design appears several times during your cardholders' user experience.
+Your design is:
+
+- Featured in the Web Banking interface for virtual and physical cards
+- Printed on physical cards
+- Displayed in digital wallets
+
+## Card product {#card-product}
+
+import CardProductExplanation from '../partials/_card-product.mdx';
+
+<CardProductExplanation />
+
+## Standard card design {#standard}
+
+Swan proposes two standard card designs that are already validated by Mastercard.
+
+Personalize standard cards with your logo on the front of the card.
+See it now in Swan's [card design studio](https://swan-io.github.io/card-design-studio/).
+
+### Black
+
+Black cards feature your logo in **white monochrome**.
+
+![Image displaying connection between account holders, account, account membership, and cards](../../../images/topics/cards/cards-design-standard-black.png)
+
+### Silver
+
+Silver cards feature your logo in **black monochrome**.
+
+![Image displaying connection between account holders, account, account membership, and cards](../../../images/topics/cards/cards-design-standard-silver.png)
+
+## Custom card design {#custom}
+
+If the standard black or silver designs won't meet your needs, or you want customize more to your brand's style, Swan also offers [custom card designs](./guide-custom.mdx).
+
+import CustomCardDesign from '../partials/_custom-card-timeline.mdx';
+
+<CustomCardDesign />
+
+Note that the following elements **can't be customized**:
+
+import CustomCardLockedElements from '../partials/_custom-locked-elements.mdx';
+
+<CustomCardLockedElements />
+
+
+## Guides {#guides}
+
+- [Configure your standard card](./guide-standard.mdx)
+- [Design your custom card](./guide-custom.mdx)
+- [Configure your logo](./guide-logo.mdx)

docs/images/topics/cards/cards-dashboard-settings-detailed.png

@@ -0,0 +1,76 @@
+---
+title: Add digital cards
+---
+
+# Add digital cards
+
+Learn how to add digital cards to Wallets.
+
+import CompleteProvisioningGuide from '../partials/_provisioning-guide.mdx';
+
+<CompleteProvisioningGuide />
+
+## Add digital cards to Apple Pay and Google Pay {#provisioning}
+
+:::note Manual Provisioning
+Cardholders can also go digital by entering their card numbers directly into Apple Pay or Google Pay.
+:::
+
+1. Call the `addDigitalCard` mutation.
+1. Make sure to choose the `walletProvider` that corresponds to the cardholder's mobile device.
+1. This returns a [consent](https://docs.swan.io/api/consent).
+When you do this, make sure you are authenticated with an User Access Token using the name of the card's account member.
+1. The mutation returns a `consentUrl`, inviting the user to start Strong Customer Authentication with the Swan app.
+1. Then the Swan app proposes adding the card to Apple Pay or Google Pay depending on the brand of the account member's mobile device.
+
+### Mutation
+
+🔎 [Open the mutation in API Explorer](https://explorer.swan.io?query=bXV0YXRpb24gRGlnaXRhbENhcmQgewogIGFkZERpZ2l0YWxDYXJkKAogICAgaW5wdXQ6IHsKICAgICAgY2FyZElkOiAiJFlPVVJfQ0FSRF9JRCIKICAgICAgd2FsbGV0UHJvdmlkZXI6IEFwcGxlUGF5CiAgICAgIGNvbnNlbnRSZWRpcmVjdFVybDogIiRZT1VSX1JFRElSRUNUX1VSTCIKICAgIH0KICApIHsKICAgIC4uLiBvbiBBZGREaWdpdGFsQ2FyZFN1Y2Nlc3NQYXlsb2FkIHsKICAgICAgX190eXBlbmFtZQogICAgICBkaWdpdGFsQ2FyZCB7CiAgICAgICAgaWQKICAgICAgICBzdGF0dXNJbmZvIHsKICAgICAgICAgIC4uLiBvbiBEaWdpdGFsQ2FyZENvbnNlbnRQZW5kaW5nU3RhdHVzSW5mbyB7CiAgICAgICAgICAgIF9fdHlwZW5hbWUKICAgICAgICAgICAgY29uc2VudCB7CiAgICAgICAgICAgICAgY29uc2VudFVybAogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgfQp9Cg%3D%3D&tab=api)
+
+```graphql {4-6} showLineNumbers
+mutation DigitalApplePay {
+  addDigitalCard(
+    input: {
+      cardId: "$YOUR_CARD_ID"
+      walletProvider: ApplePay
+      consentRedirectUrl: "$YOUR_REDIRECT_URL"
+    }
+  ) {
+    ... on AddDigitalCardSuccessPayload {
+      __typename
+      digitalCard {
+        id
+        statusInfo {
+          ... on DigitalCardConsentPendingStatusInfo {
+            __typename
+            consent {
+              consentUrl
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### Payload
+
+```json {6} showLineNumbers
+{
+  "data": {
+    "addDigitalCard": {
+      "__typename": "AddDigitalCardSuccessPayload",
+      "digitalCard": {
+        "id": "$YOUR_DIGITAL_CARD_ID",
+        "statusInfo": {
+          "__typename": "DigitalCardConsentPendingStatusInfo",
+          "consent": {
+            "consentUrl": "$YOUR_CONSENT_URL"
+          }
+        }
+      }
+    }
+  }
+}
+```

docs/images/topics/cards/cards-dashboard-settings.png

@@ -0,0 +1,7 @@
+---
+title: Cancel digital cards
+---
+
+# Cancel digital cards
+
+When you wish to instantly and permanently delete an Apple Pay or Google Pay digital card, you must use the `cancelDigitalCard` mutation.

docs/images/topics/cards/cards-design-standard-black.png

@@ -0,0 +1,75 @@
+---
+title: Add digital cards
+---
+
+# Add digital cards
+
+Learn how to add digital cards to Wallets.
+
+import CompleteProvisioningGuide from '../partials/_provisioning-guide.mdx';
+
+<CompleteProvisioningGuide />
+
+## Add digital cards to Apple Pay and Google Pay {#provisioning}
+
+:::note Manual Provisioning
+Cardholders can also go digital by entering their card numbers directly into Apple Pay or Google Pay.
+:::
+
+1. Call the `addDigitalCard` mutation.
+1. This returns a [consent](https://docs.swan.io/api/consent).
+When you do this, make sure you are authenticated with an User Access Token using the name of the card's account member.
+1. The mutation returns a `consentUrl`, inviting the user to start Strong Customer Authentication with the Swan app.
+1. Then the Swan app proposes adding the card to Apple Pay or Google Pay depending on the brand of the account member's mobile device.
+
+### Mutation
+
+🔎 [Open the mutation in API Explorer](https://explorer.swan.io?query=bXV0YXRpb24gRGlnaXRhbENhcmQgewogIGFkZERpZ2l0YWxDYXJkKAogICAgaW5wdXQ6IHsKICAgICAgY2FyZElkOiAiJFlPVVJfQ0FSRF9JRCIKICAgICAgd2FsbGV0UHJvdmlkZXI6IEFwcGxlUGF5CiAgICAgIGNvbnNlbnRSZWRpcmVjdFVybDogIiRZT1VSX1JFRElSRUNUX1VSTCIKICAgIH0KICApIHsKICAgIC4uLiBvbiBBZGREaWdpdGFsQ2FyZFN1Y2Nlc3NQYXlsb2FkIHsKICAgICAgX190eXBlbmFtZQogICAgICBkaWdpdGFsQ2FyZCB7CiAgICAgICAgaWQKICAgICAgICBzdGF0dXNJbmZvIHsKICAgICAgICAgIC4uLiBvbiBEaWdpdGFsQ2FyZENvbnNlbnRQZW5kaW5nU3RhdHVzSW5mbyB7CiAgICAgICAgICAgIF9fdHlwZW5hbWUKICAgICAgICAgICAgY29uc2VudCB7CiAgICAgICAgICAgICAgY29uc2VudFVybAogICAgICAgICAgICB9CiAgICAgICAgICB9CiAgICAgICAgfQogICAgICB9CiAgICB9CiAgfQp9Cg%3D%3D&tab=api)
+
+```graphql {4-6} showLineNumbers
+mutation DigitalApplePay {
+  addDigitalCard(
+    input: {
+      cardId: "$YOUR_CARD_ID"
+      walletProvider: ApplePay
+      consentRedirectUrl: "$YOUR_REDIRECT_URL"
+    }
+  ) {
+    ... on AddDigitalCardSuccessPayload {
+      __typename
+      digitalCard {
+        id
+        statusInfo {
+          ... on DigitalCardConsentPendingStatusInfo {
+            __typename
+            consent {
+              consentUrl
+            }
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+### Payload
+
+```json {6} showLineNumbers
+{
+  "data": {
+    "addDigitalCard": {
+      "__typename": "AddDigitalCardSuccessPayload",
+      "digitalCard": {
+        "id": "$YOUR_DIGITAL_CARD_ID",
+        "statusInfo": {
+          "__typename": "DigitalCardConsentPendingStatusInfo",
+          "consent": {
+            "consentUrl": "$YOUR_CONSENT_URL"
+          }
+        }
+      }
+    }
+  }
+}
+```