Table Of Contents
  CREDIT AND DEBIT CARD PAYMENTS  SUPPORTED SCHEMES  PARAMETERS FOR CREDIT CARD PAYMENTS  INTEGRATION ON TEST ENVIRONMENT  STEP 3: TEST CARDS FOR TESTING OF INTEGRATION  INTEGRATION ON PRODUCTION  1. HOSTED IFRAME EXAMPLES  2. MODERN CREDIT CARD CHECKOUT EXAMPLE

Credit and debit Card Payments

Supported Schemes

Scheme Payment Product Id
Visa

1
American Express

2
Mastercard

3
JCB

125
Diners Club

132

Parameters for Credit Card Payments

Structure CardPaymentMethodSpecificInput

authorizationMode

Determines the type of the authorization that will be used. Allowed values:

  • PRE_AUTHORIZATION - The payment creation results in a pre-authorization (reservation) of the payment amount that is ready for capture. Pre-authorizations can be reversed and can usually be captured within 30 days. The capture amount can be lower than the authorized amount.
  • SALE - The payment creation results in an authorization that is directly captured at the moment of approval.
recurring.recurringPaymentSequenceIndicator

Determines the series of a recurring card on file transaction. Allowed values:

  • first - Should be provided if the transaction is the first of a series of recurring transactions. Usually requires a strong customer authentication.
  • recurring - Should be provided if the transaction is a subsequent transaction in a series of recurring transactions and a previous card on file agreement with an initial successful strong customer authentication has occured.
paymentProcessingToken

String of the token that is required to initiate the payment. Will be created during the creditcardcheck request using a separate integration (see remark above)
transactionChannel

Indicates the channel via which the payment is created. Allowed values:

  • ECOMMERCE - The transaction is a regular E-Commerce transaction.
  • MOTO - The transaction is a Mail Order/Telephone Order.
unscheduledCardOnFileRequestor

Determines the initiator of the an unscheduled card on file transaction. Allowed values:

  • merchantInitiated - The merchant has initiated the transaction meaning that the customer usually is not present. 
  • cardholderInitiated - The cardholer has initiated the transaction (e.g. One-Click transactions).
unscheduledCardOnFileSequenceIndicator

Determines the series of an unscheduled card on file transaction. Allowed values:

  • first - Should be provided if the transaction is the first of a series of unscheduled transactions. Usually requires a strong customer authentication.
  • subsequent - Should be provided if the transaction is a subsequent transaction in a series of unscheduled transactions and a previous card on file agreement with an initial successful strong customer authentication has occured.
paymentProductId

Payment product identifier - see above for a full overview of possible values
card.cardholderName

The card holder's name on the card.
returnUrl

The URL that the customer is redirect to after the payment flow has finished.

Important remark: The Commerce Platform does not handle clear PANs, credit card payment will be done only with a token (paymentProcessingToken). In order to create the paymentProcessingToken, a separate integration is required. A step by step guide for the integration on the test environment as well as for production can be found below.

---end

Integration on test environment

Step 1: hosted iframe for tokenization of credit and debit cards

---end

Hosted iFrame Example
<!DOCTYPE html>
<html>

<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="static/static/client_api.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="shortcut icon" type="image/x-icon" href="static/static/favicon.ico" />
    <meta charset="UTF-8">
    <title>Hosted iFrame Example for Tokenization</title>

    <style>
        header svg {
            width: 100px;
        }

        .input-row {
            display: flex;
            align-items: center;
        }

        .payment-methods svg {
            width: 32px;
            margin: 4px;
        }

        input[type="button"] {
            border-radius: 22px;
            padding: 0;
            box-sizing: border-box;
            display: inline-block;
            border: 2px solid;
            padding: 5px 10px;
            font-size: 1.125rem;
            line-height: 1.25rem;
            width: inherit;
            height: inherit;
            cursor: pointer;
            color: #0096d6;
            background-color: #fff;
            border-color: #0096d6;
        }
    </style>
</head>

<body>
    <header>
        <h1><svg id="payone" viewBox="0 0 100 25">
                <defs>
                    <clipPath id="Clip_1">
                        <path d="M0,0 L100,0 L100,25 L0,25 z" />
                    </clipPath>
                </defs>
                <g clip-path="url(#Clip_1)">
                    <path
                        d="M8.773,7.492 L8.773,17.526 C8.773,18.217 9.272,18.715 9.963,18.715 C10.672,18.715 11.171,18.217 11.171,17.526 L11.171,14.533 L13.109,14.533 C16.102,14.533 18.078,12.903 18.078,10.427 C18.078,7.972 16.12,6.36 13.147,6.36 L9.885,6.36 C9.234,6.36 8.773,6.821 8.773,7.492 M11.152,8.49 L13.339,8.49 C14.663,8.49 15.545,9.258 15.545,10.427 C15.545,11.617 14.663,12.404 13.339,12.404 L11.152,12.404 z M30.618,16.912 L26.819,7.837 C26.359,6.725 25.88,6.284 24.901,6.284 C23.923,6.284 23.443,6.725 22.982,7.837 L19.164,16.95 C18.743,17.967 19.164,18.715 20.048,18.715 C20.795,18.734 21.122,18.331 21.429,17.545 L21.978,16.196 L27.688,16.196 L28.22,17.526 C28.527,18.331 29.007,18.734 29.697,18.715 C30.599,18.715 31.06,17.967 30.618,16.912 M26.826,14.066 L22.826,14.066 L24.825,9.085 z M41.762,8.029 L37.83,14.571 L37.83,17.526 C37.83,18.217 37.331,18.715 36.64,18.715 C35.93,18.715 35.431,18.217 35.431,17.526 L35.431,14.571 L31.595,8.164 C31.019,7.205 31.556,6.284 32.535,6.284 C33.206,6.284 33.513,6.706 33.781,7.185 L36.679,12.078 L39.498,7.3 C39.883,6.686 40.209,6.284 40.88,6.284 C41.877,6.284 42.281,7.205 41.762,8.029 M60.444,18.898 C56.934,18.898 54.075,16.02 54.075,12.509 C54.075,8.961 56.934,6.101 60.444,6.101 C63.954,6.101 66.814,8.979 66.814,12.528 C66.814,16.039 63.954,18.898 60.444,18.898 M60.444,8.481 C58.353,8.481 56.646,10.284 56.646,12.509 C56.646,14.716 58.353,16.519 60.444,16.519 C62.555,16.519 64.262,14.716 64.262,12.528 C64.262,10.303 62.555,8.481 60.444,8.481 M80.429,7.483 L80.429,17.229 C80.429,18.149 79.911,18.726 79.106,18.726 C78.183,18.726 77.724,18.227 77.148,17.421 L72.103,10.476 L72.103,17.517 C72.103,18.207 71.604,18.705 70.913,18.705 C70.203,18.705 69.704,18.207 69.704,17.517 L69.704,7.79 C69.704,6.83 70.241,6.274 71.105,6.274 C71.93,6.274 72.39,6.735 72.928,7.56 L78.031,14.677 L78.031,7.483 C78.031,6.792 78.529,6.294 79.221,6.294 C79.93,6.294 80.429,6.792 80.429,7.483 M85.165,6.352 L91.016,6.352 C91.688,6.352 92.148,6.812 92.148,7.483 C92.148,8.155 91.688,8.596 91.016,8.596 L86.451,8.596 L86.451,11.32 L90.25,11.32 C90.921,11.32 91.381,11.781 91.381,12.451 C91.381,13.104 90.921,13.584 90.25,13.584 L86.451,13.584 L86.451,16.384 L91.016,16.384 C91.688,16.384 92.148,16.845 92.148,17.536 C92.148,18.188 91.688,18.648 91.016,18.648 L85.165,18.648 C84.514,18.648 84.053,18.169 84.053,17.517 L84.053,7.483 C84.053,6.812 84.514,6.352 85.165,6.352 M97.898,18.999 C97.898,19.647 97.711,22.88 94.001,22.897 L43.204,22.897 C44.327,21.895 45.233,20.597 45.898,19.037 L51.441,6.039 C51.72,5.387 53.296,2.133 57.033,2.102 L94.001,2.102 C94.646,2.102 97.871,2.289 97.898,6 z M37.598,22.897 L6,22.897 C5.354,22.897 2.128,22.709 2.102,18.998 L2.102,6 C2.102,5.355 2.29,2.134 6.007,2.102 L51.608,2.102 C50.548,3.097 49.673,4.395 49.006,5.96 L43.461,18.959 C42.996,20.048 41.036,22.881 37.598,22.897 M99.999,5.992 C99.983,3.766 98.701,0 94,0 L5.993,0 C3.767,0.018 -0,1.303 -0,6 L-0,19.006 C0.016,21.232 1.297,24.999 6,24.999 L94.005,24.999 C96.232,24.989 100,23.713 100,18.998 z"
                        fill="var(--cp-icon-highlight, #0096d6)" />
                </g>
            </svg>
           Hosted iFrame Example for Tokenization</h1>
    </header>
    <form name="paymentform" action="#" method="post">
        <fieldset>

            <input type="hidden" name="pseudocardpan" id="pseudocardpan">
            <input type="hidden" name="truncatedcardpan" id="truncatedcardpan">
            <input type="hidden" name="cardtypeResponse" id="cardtypeResponse">
            <input type="hidden" name="cardexpiredateResponse" id="cardexpiredateResponse">

            <img style="border: #FFF solid 5px; width: 100px;" src="static/visa.png" alt="" id="visa" /> <img
                src="static/mastercard.png" alt="" id="mastercard" style="border: #FFF solid 5px; width: 100px;" />

            <div class="input-row payment-methods">
                <svg id="visa" viewBox="0 0 3384.54 2077.85">
                    <path fill="#1434CB"
                        d="M1461.26,739.84l-251.37,599.74h-164l-123.7-478.62c-7.51-29.48-14.04-40.28-36.88-52.7 c-37.29-20.23-98.87-39.21-153.05-50.99l3.68-17.43h263.99c33.65,0,63.9,22.4,71.54,61.15l65.33,347.04l161.46-408.2H1461.26z M2103.84,1143.77c0.66-158.29-218.88-167.01-217.37-237.72c0.47-21.52,20.96-44.4,65.81-50.24c22.23-2.91,83.48-5.13,152.95,26.84 l27.25-127.18c-37.33-13.55-85.36-26.59-145.12-26.59c-153.35,0-261.27,81.52-262.18,198.25c-0.99,86.34,77.03,134.52,135.81,163.21 c60.47,29.38,80.76,48.26,80.53,74.54c-0.43,40.23-48.23,57.99-92.9,58.69c-77.98,1.2-123.23-21.1-159.3-37.87l-28.12,131.39 c36.25,16.63,103.16,31.14,172.53,31.87C1996.72,1348.96,2103.34,1268.45,2103.84,1143.77 M2508.78,1339.58h143.49l-125.25-599.74 h-132.44c-29.78,0-54.9,17.34-66.02,44l-232.81,555.74h162.91L2291,1250h199.05L2508.78,1339.58z M2335.67,1127.08l81.66-225.18 l47,225.18H2335.67z M1682.93,739.84l-128.29,599.74H1399.5l128.34-599.74H1682.93z" />
                </svg>
                <svg id="master-card" viewBox="0 0 1000 618">
                    <path fill="#EB001B" d="m308,0a309,309 0 1,0 2,0z" />
                    <path fill="#F79E1B" d="m690,0a309,309 0 1,0 2,0z" />
                    <path fill="#FF5F00" d="m500,66a309,309 0 0,0 0,486 309,309 0 0,0 0-486" />
                </svg>
                <svg id="american-express" viewBox="0 0 1000 997">
                    <g transform="translate(-55.5,-1002.3452)">
                        <path
                            d="m 55.5,1002.3454 997.5168,0 0,538.4893 -49.3744,77.1475 49.3744,68.6613 0,313.2187 -997.5168,0 0,-507.6304 L 86.358989,1456.744 55.5,1422.7991 Z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path
                            d="m 249.14015,1697.4441 0,-156.6094 165.82027,0 17.79072,23.1924 18.37901,-23.1924 601.88665,0 0,145.8088 c 0,0 -15.7404,10.644 -33.9449,10.8006 l -333.27706,0 -20.05834,-24.6872 0,24.6872 -65.72965,0 0,-42.1418 c 0,0 -8.97877,5.8825 -28.39026,5.8825 l -22.37277,0 0,36.2593 -99.52024,0 -17.7653,-23.6898 -18.03807,23.6898 z"
                            style="fill:#ffffff;stroke:none" />
                        <path
                            d="m 55.5,1422.7991 37.393125,-87.1766 64.667505,0 21.22103,48.8328 0,-48.8328 80.38767,0 12.63289,35.2949 12.24716,-35.2949 360.8573,0 0,17.7439 c 0,0 18.96995,-17.7439 50.14586,-17.7439 l 117.08499,0.4092 20.85469,48.1937 0,-48.6029 67.27259,0 18.5154,27.6834 0,-27.6834 67.88977,0 0,156.6093 -67.88977,0 -17.74392,-27.7731 0,27.7731 -98.83835,0 -9.93959,-24.6872 -26.57108,0 -9.77781,24.6872 -67.02872,0 c -26.82589,0 -43.97406,-17.3816 -43.97406,-17.3816 l 0,17.3816 -101.06318,0 -20.05835,-24.6872 0,24.6872 -375.80462,0 -9.93274,-24.6872 -26.48635,0 -9.86254,24.6872 -46.1989,0 z"
                            style="fill:#ffffff;stroke:none" />
                        <path
                            d="m 106.12803,1354.9291 -50.435161,117.2641 32.835892,0 9.305914,-23.4816 54.099665,0 9.2577,23.4816 33.55915,0 -50.38695,-117.2641 -38.23621,0 z m 18.66004,27.2909 16.49028,41.0329 -33.02877,0 16.53849,-41.0329 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path
                            d="m 198.22282,1472.1735 0,-117.2642 46.66163,0.1733 27.13999,75.6045 26.4901,-75.7778 46.28848,0 0,117.2642 -29.31604,0 0,-86.4052 -31.07562,86.4052 -25.71023,0 -31.16227,-86.4052 0,86.4052 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path
                            d="m 364.86136,1472.1735 0,-117.2642 95.66287,0 0,26.2302 -66.03824,0 0,20.0583 64.49529,0 0,24.6872 -64.49529,0 0,20.8298 66.03824,0 0,25.4587 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path
                            d="m 477.49667,1354.9291 0,117.2641 29.31604,0 0,-41.6596 12.34359,0 35.15032,41.6596 35.82536,0 -38.57374,-43.2025 c 15.8309,-1.3359 32.16085,-14.9233 32.16085,-36.0182 0,-24.6765 -19.36827,-38.0434 -40.98459,-38.0434 l -65.23783,0 z m 29.31604,26.2301 33.51093,0 c 8.03881,0 13.88655,6.2882 13.88655,12.3436 0,7.7905 -7.57673,12.3436 -13.45259,12.3436 l -33.94489,0 0,-24.6872 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path d="m 625.61982,1472.1735 -29.93322,0 0,-117.2642 29.93322,0 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path
                            d="m 696.59549,1472.1735 -6.4611,0 c -31.26172,0 -50.24229,-24.6292 -50.24229,-58.1499 0,-34.3488 18.76806,-59.1143 58.24634,-59.1143 l 32.40194,0 0,27.7731 -33.58657,0 c -16.026,0 -27.35994,12.5067 -27.35994,31.6305 0,22.7096 12.95987,32.2476 31.63047,32.2476 l 7.71474,0 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path style="fill:#016fd0;fill-opacity:1;stroke:none"
                            d="m 760.3868,1354.9291 -50.43515,117.2641 32.83589,0 9.30591,-23.4816 54.09967,0 9.25769,23.4816 33.55915,0 -50.38694,-117.2641 -38.23622,0 z m 18.66005,27.2909 16.49027,41.0329 -33.02876,0 16.53849,-41.0329 z" />
                        <path
                            d="m 852.43338,1472.1735 0,-117.2642 37.27187,0 47.59035,73.6759 0,-73.6759 29.31604,0 0,117.2642 -36.06644,0 -48.79578,-75.6045 0,75.6045 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path style="fill:#016fd0;fill-opacity:1;stroke:none"
                            d="m 269.1985,1677.3858 0,-117.2642 95.66286,0 0,26.2302 -66.03823,0 0,20.0583 64.49528,0 0,24.6872 -64.49528,0 0,20.8298 66.03823,0 0,25.4587 z" />
                        <path
                            d="m 737.94653,1677.3858 0,-117.2642 95.66287,0 0,26.2302 -66.03824,0 0,20.0583 64.1867,0 0,24.6872 -64.1867,0 0,20.8298 66.03824,0 0,25.4587 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path
                            d="m 368.57408,1677.3858 46.57779,-57.9089 -47.68678,-59.3553 36.93435,0 28.39991,36.6932 28.49635,-36.6932 35.48784,0 -47.05996,58.6321 46.66353,58.6321 -36.92851,0 -27.57537,-36.1148 -26.90518,36.1148 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path style="fill:#016fd0;fill-opacity:1;stroke:none"
                            d="m 499.86944,1560.1414 0,117.2641 30.08751,0 0,-37.0308 30.85899,0 c 26.11107,0 45.90274,-13.8524 45.90274,-40.7917 0,-22.3164 -15.52271,-39.4416 -42.09358,-39.4416 l -64.75566,0 z m 30.08751,26.5194 32.49837,0 c 8.43546,0 14.46515,5.1701 14.46515,13.5008 0,7.8262 -5.99925,13.5008 -14.56158,13.5008 l -32.40194,0 0,-27.0016 z" />
                        <path style="fill:#016fd0;fill-opacity:1;stroke:none"
                            d="m 619.44802,1560.1216 0,117.2642 29.31604,0 0,-41.6597 12.34359,0 35.15032,41.6597 35.82536,0 -38.57374,-43.2026 c 15.83089,-1.3361 32.16085,-14.9233 32.16085,-36.0183 0,-24.6764 -19.36827,-38.0433 -40.98459,-38.0433 l -65.23783,0 z m 29.31604,26.2302 33.51093,0 c 8.03881,0 13.88654,6.2881 13.88654,12.3435 0,7.7906 -7.57673,12.3436 -13.45259,12.3436 l -33.94488,0 0,-24.6871 z" />
                        <path
                            d="m 847.18735,1677.3858 0,-25.4587 58.67066,0 c 8.68115,0 12.44003,-4.6912 12.44003,-9.8363 0,-4.9296 -3.74703,-9.9134 -12.44003,-9.9134 l -26.5126,0 c -23.04571,0 -35.88042,-14.0409 -35.88042,-35.1214 0,-18.8023 11.75348,-36.9344 45.99918,-36.9344 l 57.08913,0 -12.3436,26.3844 -49.37438,0 c -9.43821,0 -12.3436,4.9526 -12.3436,9.6821 0,4.8612 3.59036,10.222 10.80065,10.222 l 27.77309,0 c 25.69029,0 36.83792,14.5724 36.83792,33.6556 0,20.5163 -12.42212,37.3201 -38.23646,37.3201 z"
                            style="fill:#016fd0;fill-opacity:1;stroke:none" />
                        <path style="fill:#016fd0;fill-opacity:1;stroke:none"
                            d="m 954.78398,1677.3858 0,-25.4587 58.67062,0 c 8.6812,0 12.4401,-4.6912 12.4401,-9.8363 0,-4.9296 -3.7471,-9.9134 -12.4401,-9.9134 l -26.51256,0 c -23.04571,0 -35.88043,-14.0409 -35.88043,-35.1214 0,-18.8023 11.75348,-36.9344 45.99918,-36.9344 l 57.08911,0 -12.3436,26.3844 -49.37436,0 c -9.4382,0 -12.34359,4.9526 -12.34359,9.6821 0,4.8612 3.59035,10.222 10.80064,10.222 l 27.77311,0 c 25.6903,0 36.8379,14.5724 36.8379,33.6556 0,20.5163 -12.4221,37.3201 -38.2365,37.3201 z" />
                    </g>
                </svg>
            </div>
            <div class="input-row">
                <label for="cardpanInput">Cardpan:</label>
                <span class="inputIframe" id="cardpan"></span>

                <label for="cvcInput">CVC:</label>
                <span class="inputIframe" id="cardcvc2"></span>
                <!-- Container for PAYONE-Script -> PAYONE will place an iFrame in here -->

            </div>
            <div class="input-row">
                <label for="expireInput">Expire date (mm/yyyy):</label>
                <span class="inputIframe" id="expireInput">
                    <span id="cardexpiremonth"></span>
                    <span id="cardexpireyear"></span>
                </span>
            </div>
            <div id="error"></div>
            <input id="submit" type="button" value="Run credit card check" />
            <input id="submitWithOutCompleteCheck" type="button" value="Run CCC (w/o complete check)" />
        </fieldset>
    </form>
    <h2>Response from Payone Client-API</h2>
    <div id="jsonResponse">
        <pre id="jsonResponsePre">Nothing received yet.</pre>
    </div>
    <h2>Autodetection callback result</h2>
    <div id="autodetectionResponse">
        <pre id="autodetectionResponsePre">Nothing received yet.</pre>
    </div>
    <script type="text/javascript" src="https://secure.prelive.pay1-test.de/client-api/js/v1/payone_hosted.js"></script>
    <!-- Adjust this -->
    <script>

        const inputStyle = `
            min-height: 38px;
            padding: 8px;
            font-size: 13px;
            border-radius: 19px;
            border: 2px solid #0078AB;
            width: 100%;
            max-width: 180px;
            box-sizing: border-box;
            text-align: left;
            margin: 4px;
         `;

        var request,
            supportedCardtypes = ["V", "M"],
            config = {
                fields: {
                    cardpan: {
                        selector: "cardpan",
                        type: "input"
                    },
                    cardcvc2: {
                        selector: "cardcvc2",
                        type: "password",  // Could be "text" as well.
                        size: "4",
                        maxlength: "4",
                        length: { "V": 3, "M": 3 } // enforce 3 digit CVC für VISA and Mastercard
                    },
                    cardexpiremonth: {
                        selector: "cardexpiremonth",
                        type: "text", // select (default), text, tel
                        size: "2",
                        maxlength: "2",
                        style: inputStyle + "width: 40px;",
                        styleFocus: inputStyle + "width: 40px;",
                        iframe: {
                            width: "48px"
                        },
                    },
                    cardexpireyear: {
                        selector: "cardexpireyear",
                        type: "text", // select (default), text, tel
                        style: inputStyle + "width: 60px;",
                        styleFocus: inputStyle +"width: 60px;",
                        iframe: {
                            width: "68px"
                        },
                    }
                },
                defaultStyle: {
                    input: inputStyle,
                    inputFocus: inputStyle,
                    select: "font-size: 1em; border: 1px solid #000;",
                    iframe: {
                        height: "48px",
                        width: "200px"
                    }
                },

                autoCardtypeDetection: {
                    supportedCardtypes: supportedCardtypes,
                    callback: function (detectedCardtype) {
                        // For the output container below.
                        document.getElementById('autodetectionResponsePre').innerHTML = detectedCardtype;

                        if (detectedCardtype === 'V') {
                            document.getElementById('visa').style.borderColor = '#00F';
                            document.getElementById('mastercard').style.borderColor = '#FFF';
                        } else if (detectedCardtype === 'M') {
                            document.getElementById('visa').style.borderColor = '#FFF';
                            document.getElementById('mastercard').style.borderColor = '#00F';
                        } else {
                            document.getElementById('visa').style.borderColor = '#FFF';
                            document.getElementById('mastercard').style.borderColor = '#FFF';
                        }
                    } //,
                    // deactivate: true // To turn off automatic card type detection.
                },

                language: Payone.ClientApi.Language.de, //, // Language to display error-messages (default: Payone.ClientApi.Language.en)
                error: "error" // area to display error-messages (optional)
            };

        request = {
            request: 'creditcardcheck',                  // fixed value
            responsetype: 'JSON',                        // fixed value
            mode: 'live',                                // desired mode
            mid: '00000',                                // your MID
            aid: '00000',                                // your AID
            portalid: '0000000',                         // your PortalId
            encoding: 'UTF-8',                           // desired encoding
            storecarddata: 'yes',                        // fixed value
            // hash calculated over your request-parameter-values (alphabetical request-order) plus PMI portal key
            hash: 'd5f41eaa5c4471aa7aac8159de83bf058f09526434de5aa5ae8eb00661df03146b84a7ebff08b54fa9b7f2fe797ed396'     // for the calculation in this example, you need the parameters: aid,encoding,mid,mode,portalid,request,responsetype,storecarddata with the values listed above
        };
        var iframes = new Payone.ClientApi.HostedIFrames(config, request);

        // Function called by submitting PAY-button
        function pay() {

            if (iframes.isComplete()) {
                // Perform "CreditCardCheck" to create and get a PseudoCardPan; then call your function "payCallback"
                iframes.creditCardCheck('payCallback');
            } else {
                alert("Not complete. Nothing done.");
            }
        }

        document.getElementById("submit").onclick = function () {
            pay();
        };

        document.getElementById("submitWithOutCompleteCheck").onclick = function () {
            iframes.creditCardCheck('payCallback');
        };

        function payCallback(response) {

            console.debug(response);
            if (response.status === "VALID") {
                document.getElementById("pseudocardpan").value = response.pseudocardpan;
                document.getElementById("truncatedcardpan").value = response.truncatedcardpan;
                document.getElementById("cardtypeResponse").value = response.cardtype;
                document.getElementById("cardexpiredateResponse").value = response.cardexpiredate;
            }

            if (typeof response === 'object') {

                var responseAsString = 'time: ' + new Date().getTime() + "\n";
                for (var key in response) {

                    if (response.hasOwnProperty(key)) {
                        responseAsString += key + ': ' + response[key] + "\n";
                    }
                }

                document.getElementById('jsonResponsePre').innerHTML = responseAsString;
            }
        }

    </script>
</body>

</html>
In the iFrame example the respective merchant credentials have to be configured.

---end

Step 2: Run html on a webserver to load the javaScript file from payone server

The iFrame will load the JavaScript and use the configured credentials to perform a tokenization request.

---end

Step 3: Test cards for testing of integration

With the following test card data the described integration can be tested to create a token: https://docs.payone.com/security-risk-management/3d-secure#/

---end

Integration on Production

1. Hosted iframe Examples

Hosted iFrame Examples

2. Modern credit card checkout example

Modern Credit Card Checkout Example

Github Reference

Creation of Commerce case and checkout with credit card payment Example

Simple example for a credit card payment via Commerce Platform

  • Creating an checkout (here in one step, creating in multiple steps possible)
  • Creating an order for the entire checkout (partial orders also possible), payment is initialized automatically
  • Initialization of delivery and capture of the order amount (partial delivery also possible)

Create CommerceCase with Checkout

Creating a CommerceCase with the initial Checkout including reference, information about the end customer and the items in the shopping cart.

POST Commerce Case
Request
/v1/{merchantId}/commerce-cases
{
    "orderType": "FULL",
    "orderReferences": {
        "descriptor": "credit card payment",
        "merchantReference": "Order-1234521236"
    },
    "paymentMethodSpecificInput": {
        "cardPaymentMethodSpecificInput": {
            "card": {
                "cardholderName": "Max Mustermann"
            },
            "token": "9410000000000000713",
            "paymentProductId": 1,
            "transactionChannel": "ECOMMERCE",
            "authorizationMode": "PRE_AUTHORIZATION",
            "returnUrl": "https://return.url"
        },
        "paymentChannel": "ECOMMERCE"
    }
}

If 3DS authentication is required, you'll get a redirect URL. Forward your end customer to the given URL.

Response
{
    "createPaymentResponse": {
        "merchantAction": {
            "actionType": "REDIRECT",
            "redirectData": {
                "redirectURL": "https://threeds-authentication.url"
            }
        },
        "payment": {
            "paymentOutput": {
                "amountOfMoney": {
                    "amount": 67900,
                    "currencyCode": "EUR"
                },
                "references": {
                    "merchantReference": "Order-1234521236"
                },
                "cardPaymentMethodSpecificOutput": {
                    "paymentProductId": 1
                },
                "paymentMethod": "card"
            },
            "status": "REDIRECTED",
            "statusOutput": {
                "isCancellable": false,
                "statusCategory": "PENDING_PAYMENT",
                "isAuthorized": false,
                "isRefundable": false
            },
            "id": "PP2AAD9A0JMBBQDS"
        },
        "paymentExecutionId": "c6e6eadb-b066-4756-83ed-292fbb85da12"
    },
    "shoppingCart": {
        "items": [
            {
                "invoiceData": {
                    "description": "Lawnmower"
                },
                "orderLineDetails": {
                    "id": "81618ad9-18a5-483e-8bf8-e003f6917958",
                    "productCode": "ABC01",
                    "productPrice": 67900,
                    "productType": "GOODS",
                    "quantity": 1,
                    "taxAmount": 19,
                    "status": [
                        {
                            "lineItemStatus": "WAITING_FOR_PAYMENT",
                            "quantity": 1
                        }
                    ]
                }
            }
        ]
    }
}

Webhook after successful 3DS authentication

You can identify the corresponding transaction by the field createPaymentResponse.payment.id in the order response. The status PENDING_CAPTURE shows that the amount is authorized and the payment gateway is waiting for a capture.

Webhook
{
    "apiVersion": "v1",
    "created": "2023-11-13T11:54:23.866352902+00:00",
    "id": "9ec3114e-a2e1-47b9-9a55-75bb4a150a8b",
    "merchantId": "P1_18323_2013224",
    "payment": {
        "paymentOutput": {
            "amountOfMoney": {
                "amount": 67900,
                "currencyCode": "EUR"
            },
            "references": {
                "merchantReference": "Order-1234521239"
            },
            "cardPaymentMethodSpecificOutput": {
                "paymentProductId": 1
            },
            "paymentMethod": "card"
        },
        "status": "PENDING_CAPTURE",
        "statusOutput": {
            "isCancellable": true,
            "statusCategory": "PENDING_MERCHANT",
            "isAuthorized": true,
            "isRefundable": false
        },
        "id": "PP2AAD9A0JMBBQDS"
    },
    "type": "payment.pending_capture"
}

Deliver

Full Deliver to capture the complete order amount (initialization of clearing at acquirer).

POST Deliver
Request
/v1/{merchantId}/commerce-cases/{commerceCaseId}/checkout/{checkoutId}/deliver
{
    "deliverType": "FULL",
    "isFinal": true
}

Response
{
    "capturePaymentResponse": {
        "captureOutput": {
            "amountOfMoney": {
                "amount": 67900,
                "currencyCode": "EUR"
            },
            "references": {
                "merchantReference": "Order-1234521239"
            },
            "paymentMethod": "card"
        },
        "status": "CAPTURED",
        "id": "PP2AAD9A0JMBBQDS"
    },
    "shoppingCart": {
        "items": [
            {
                "invoiceData": {
                    "description": "Lawnmower"
                },
                "orderLineDetails": {
                    "id": "2344efee-3adf-4b2e-b26f-dc6a8dd9cd06",
                    "productCode": "ABC01",
                    "productPrice": 67900,
                    "productType": "GOODS",
                    "quantity": 1,
                    "taxAmount": 19,
                    "status": [
                        {
                            "lineItemStatus": "DELIVERED",
                            "quantity": 1
                        }
                    ]
                }
            }
        ]
    }
}

Webhook after successful Deliver

The payment gateway informs you via webhook about the successful capture.

Request
/v1/{merchantId}/commerce-cases
{
    "apiVersion": "v1",
    "created": "2023-11-13T12:10:14.907858991+00:00",
    "id": "d9285ca8-5361-46a3-80b4-0b0191ff3211",
    "merchantId": "P1_18323_2013224",
    "payment": {
        "paymentOutput": {
            "amountOfMoney": {
                "amount": 67900,
                "currencyCode": "EUR"
            },
            "references": {
                "merchantReference": "Order-1234521239"
            },
            "cardPaymentMethodSpecificOutput": {
                "paymentProductId": 1
            },
            "paymentMethod": "card"
        },
        "status": "CAPTURED",
        "statusOutput": {
            "isCancellable": false,
            "statusCategory": "COMPLETED",
            "isAuthorized": true,
            "isRefundable": true
        },
        "id": "PP2AAD9A0JMBBQDS"
    },
    "type": "payment.captured"
}