Home

Home

The index page. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Edit "Home" on GitHub

Text can be bold, italic, or strikethrough.

  • External absolute full link
  • Internal absolute full link
  • Internal explicit relative link
  • Internal implicit relative link
  • Internal absolute link

There should be whitespace between paragraphs.

There should be whitespace between paragraphs. We recommend including a README, or a file with information about your project.

Header 2

This is a normal paragraph following a header. GitHub is a code hosting platform for version control and collaboration. It lets you and others work together on projects from anywhere.

This is a blockquote following a header.

When something is important enough, you do it even if the odds are not in your favor.

Header 3

This is a normal paragraph following a header 3.

Header 4

  • This is an unordered list following a header 4.
  • This is an unordered list following a header 4.
  • This is an unordered list following a header 4.
Header 5
  1. This is an ordered list following a header 5.
  2. This is an ordered list following a header 5.
  3. This is an ordered list following a header 5.
Header 6

This is a normal paragraph following a header 6.

Accordion

Here’s an accordion with default headers and style, and unformatted content.

Here’s an accordion with the same header and style on both expand and collapse. The content is formatted as one paragraph with padding.

Here’s an accordion with the different header and style on expand and collapse.

Here we have also formatted the content as two paragraphs with padding.

Cards

Card

A standard card that opens in a new tab
Card with button text

A standard card

CTA text
The image shows a woman seated in a comfortable chair in her home using a computer to make an online payment. Card with image

A standard card with an image
The image shows someone seated in a cafe with a glass of juice, a cup of coffee and a cake on the table infront of them, using a card terminal to pay. Card with image, icon and button text

Note that image cards will not display any icon if the card has an image.

CTA text
Wide card with flag icon

A wide card
Wide card with icon and button text

Note that wide cards will not display the button text unless the card has an image.

CTA text
The image shows a woman seated in a comfortable chair in her home using a computer to make an online payment. Wide card with image and icon

Note that wide image cards will not display any icon if the card has an image.
The image shows someone seated in a cafe with a glass of juice, a cup of coffee and a cake on the table infront of them, using a card terminal to pay. Wide card with image and button text

A wide card with an image and button text

CTA text

Tabs

Example 1

The src content for Example 1

Example 2

The src content for Example 2

Example 3

The src content for Example 3

Table

Here’s a nice table.

col one col two col three
ok good swedish fish nice
out of stock good and plenty nice
ok good oreos hmm
ok good zoute drop yumm

Here’s a striped table.

col one col two col three
ok good swedish fish nice
out of stock good and plenty nice
ok good oreos hmm
ok good zoute drop yumm

Code examples

JavaScript code with syntax highlighting.



1
2
3
4



var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l)
  return true;
}

HTTP request



1
2
3
4



POST /psp/consumers HTTP/1.1
Host: api.externalintegration.payex.com
Authorization: Bearer <AccessToken>
Content-Type: application/json

HTTP response



1
2



HTTP/1.1 200 OK
Content-Type: application/json





1
2
3
4



POST /psp/consumers HTTP/1.1
Host: api.externalintegration.payex.com
Authorization: Bearer <AccessToken>
Content-Type: application/json

JSON



1
2
3
4
5
6
7
8
9
10



{
    "operation": "initiate-consumer-session",
    "msisdn": "+4798765432",
    "email": "olivia.nyhuus@example.com",
    "consumerCountryCode": "NO",
    "nationalIdentifier": {
        "socialSecurityNumber": "26026708248",
        "countryCode": "NO"
    }
}

JSONC (JSON with comments)



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36



{
    "payment": "/psp/creditcard/payments/paymentId",
    "authorization": {
        "direct": true,
        "cardBrand": "Visa", // Some comment
        "cardType": "Credit", // Some comment
        "issuingBank": "Utl. Visa", // Some comment
        "paymentToken": "paymentToken",
        "maskedPan": "454778******3329",
        "expiryDate": "12/2020",
        "panToken": "cca2d98d-8bb3-4bd6-9cf3-365acbbaff96",
        "panEnrolled": true,
        "acquirerTransactionTime": "0001-01-01T00:00:00Z",
        "id": "/psp/creditcard/payments/7e6cdfc3-1276-44e9-9992-7cf4419750e1/authorizations/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
        "transaction": {
            "id": "/psp/creditcard/payments/7e6cdfc3-1276-44e9-9992-7cf4419750e1/transactions/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
            "created": "2020-03-10T13:15:01.9586254Z",
            "updated": "2020-03-10T13:15:02.0493818Z",
            "type": "Authorization",
            "state": "AwaitingActivity",
            "number": 70100366758,
            "amount": 4201,
            "vatAmount": 0,
            "description": "Test transaction",
            "payeeReference": "1583846100",
            "isOperational": true,
            "operations": [
                {
                    "method": "GET",
                    "href": "https://api.stage.payex.com/psp/creditcard/confined/payments/authorizations/authenticate/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
                    "rel": "redirect-authentication"
                }
            ]
        }
    }
}

To show code examples you can use a code example component.

Code example 



1
2
3
4



POST /psp/consumers HTTP/1.1
Host: api.externalintegration.payex.com
Authorization: Bearer <AccessToken>
Content-Type: application/json





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29



{
    "payment": "/psp/creditcard/payments/paymentId",
    "authorization": {
        "direct": true,
        "cardBrand": "Visa", // Some comment
        "cardType": "Credit", // Some comment
        "issuingBank": "Utl. Visa", // Some comment
        "paymentToken": "paymentToken",
        "maskedPan": "454778******3329",
        "expiryDate": "12/2020",
        "panToken": "cca2d98d-8bb3-4bd6-9cf3-365acbbaff96",
        "panEnrolled": true,
        "acquirerTransactionTime": "0001-01-01T00:00:00Z",
        "id": "/psp/creditcard/payments/7e6cdfc3-1276-44e9-9992-7cf4419750e1/authorizations/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
        "transaction": {
            "id": "/psp/creditcard/payments/7e6cdfc3-1276-44e9-9992-7cf4419750e1/transactions/ec2a9b09-601a-42ae-8e33-a5737e1cf177",
            "created": "2020-03-10T13:15:01.9586254Z",
            "updated": "2020-03-10T13:15:02.0493818Z",
            "type": "Authorization",
            "state": "AwaitingActivity",
            "number": 70100366758,
            "amount": 4201,
            "vatAmount": 0,
            "description": "Test transaction",
            "payeeReference": "1583846100",
            "isOperational": true
        }
    }
}

Here’s some <inline> { "code": true } that should .be { highlighted: according; } to their language.

Mermaid 

sequenceDiagram
    participant Merchant
    participant SwedbankPay

    activate SwedbankPay
        SwedbankPay->>Merchant: POST <callbackUrl>
        activate Merchant
            note right of SwedbankPay: Callback POST by SwedbankPay
            Merchant->>SwedbankPay: Callback response
        deactivate Merchant
    deactivate SwedbankPay

    activate Merchant
        Merchant->>SwedbankPay: GET <payment instrument> payment
        note left of Merchant: First API request
        activate SwedbankPay
            SwedbankPay-->>Merchant: payment resource
        deactivate SwedbankPay
    deactivate Merchant

Alerts

Informational alert: This is an informational alert

Success: This is a successful alert.

Warning: This is a warning alert with <markdown/>.

Danger: This is an error alert with <markdown/>.

Jumbotron

PayEx Checkout is a complete reimagination of the checkout experience, integrating seamlessly into the merchant website through highly customizable and flexible components.

Visit our demoshop and try out PayEx Checkout for yourself!

Iterator

There’s a horizontal rule below this

Here is an unordered list

  • Item foo
  • Item bar
  • Item baz
  • Item zip

And an ordered list

  1. Item one
  2. Item two
  3. Item three
  4. Item four

And a nested list

  • level 1 item
    • level 2 item
    • level 2 item
    • level 3 item
    • level 3 item
  • level 1 item
    • level 2 item
    • level 2 item
    • level 2 item
  • level 1 item
    • level 2 item
    • level 2 item
  • level 1 item

Small image

Octocat

Large image

Branching

Definition lists can be used with HTML syntax

Name
Godzilla
Born
1952
Birthplace
Japan
Color
Green
Long, single-line code blocks should not wrap. They should horizontally scroll if they are too long. This line should be long enough to demonstrate this.

The final element.

Emoji support

:+1: :heavy_check_mark: :fire: 💡 :unicorn:

Material design icons

check line_weight gavel visibility work alarm_on touch_app