Card Input Component

Introduction

You create a frontend and get a requestToken and the card detail data. Based on that data you can add your logic, but you have to be compliant to the scheme rules.

After you receive the data you can start a normal Card Payment and sent the token to our authentication page.

View a full demo https://kopersteden.nl/demo/card

🚧
PCI-DSS data standard
As you are requesting card data in your frontend, you need to protect yourself and deliver the required PCI documentation based on the number of transactions. Be advised that even if you do not store the data, malicious malware or code injection can still scrape information from your frontend and send it to third parties.
Also include external loaded JS, that can be updated outside you control in your analysis. They can add listeners to any of your forms. Check our documentation.

Implementation guide

Schematic overview

Collect request token and get card details

Create first in your backend a requestToken that is valid for max 15- 30 minutes. As the payer is sending this call we have a rate limit of 5 request per 60 seconds and 20 requests per hour.

class Pay_RequestToken
{
   private string $serviceId;
   private string $secret;
   public function __construct(
       string $serviceId,
       string $secret
   )
   {
       $this->serviceId = $serviceId;
       $this->secret = $secret;
   }
   public function getToken(): string
   {
       if (empty($this->secret) || empty($this->serviceId)) {
           return '';
       }
       return $this->generateHash($this->serviceId, $this->secret);
   }
   private function generateHash(string $serviceId, string $secret): string
   {
       $timeComponent = $this->getTimeComponent($offset);
       return sha1(strtoupper($serviceId . substr($secret, 0, 32)) . $timeComponent);
   }
}

Optional: validate to token

If you like to check how we validate any incoming tokenRequest

public function isValid(string $requestToken): bool
   {
       if (empty($this->secret) || empty($this->serviceId)) {
           return false;
       }
       $tokens = $this->getValidTokens();
       return in_array($requestToken, $tokens);
   }
   private function getTimeComponent(int $offset = 0): int
   {
       return (int)substr(time(), 0, -3) + $offset;
   }
   private function getValidTokens(): array
   {
       return array(
           $this->generateHash($this->serviceId, $this->secret),
           $this->generateHash($this->serviceId, $this->secret, 1),
           $this->generateHash($this->serviceId, $this->secret, -1),
       );
   }

Build your frontend

But the following code snippet in the <head> of your frontend

<script>
  const tokenUrl = 'https://card.payments.nl?method=getCardToken&resultType=json';
  const serviceId = 'SL-7378-6230';
  const requestToken = 'CALCULTATED_REQUEST_TOKEN';
  const buttonText = 'PAY € 0.01';
	const trxUrl = 'api.php'; // Url of API where transaction will be started for JS solution
</script>

You have replace the requestToken with the token you have generated in your backend.

In the <body> of your frontend get the card details. See following example

<div class="payment-title">
    Creditcard
</div>

<div class="messages-status"></div>

<div class="form-container">
  <div class="field-container">
    <label for="name">Name</label>
    <input id="name" maxlength="20" type="text">
  </div>
  <div class="field-container">
    <label for="cardnumber">Card Number</label>
    <input id="cardnumber" type="text" inputmode="numeric" 
           placeholder="0000 0000 0000 0000" data-format="0000 0000 0000 0000 000" 
           inputmode="numeric" oninput="formatField(this)" >
  </div>
  <div class="field-container">
    <label for="expirationdate">Expiration (mm/yy)</label>
    <input id="expirationdate" type="text" inputmode="numeric"
           placeholder="00/00" maxlength="5" data-min-length="4" data-format="00/00" 
           inputmode="numeric" oninput="formatField(this)" >
  </div>
  <div class="field-container">
    <label for="securitycode">Security Code</label>
    <input id="securitycode" type="text" pattern="[0-9]*" inputmode="numeric" maxlength="4" >
  </div>
  <div class="field-container">
    <input type="submit" id="submit-data" value="Betaal € 0.01">
  </div>
</div>

<form class="checkout-element" action="" method="post" id="payment" >
  <input type="hidden" value="" name="cardToken"/>
   <input type="hidden" value="process" name="action"/>
</form>

Order Create

Use (at least) the following data to start an Order in one of our TGU's

{
  "serviceId": "SL-1234-1234",
  "description": "Your  Order",
  "reference": "REF1234",
  "returnUrl": "https://your-return-url-here.com",
  "exchangeUrl": "https://your-exchange-url-here.com",
  "amount": {
    "value": 10,
    "currency": "EUR"
  },
  "paymentMethod": {
    "id": 706,
  }
}

Authorise the payment

Send the token to the paymentURL

URL = PaymentURL + action=process + &cardToken=[CARDTOKEN]

https://card.payments.nl/start/ORDERDATA?action=process&cardToken=[CARDTOKEN]

Example:

https://card.payments.nl/start/2346829941X46b6e/07323f617ae7781636103db4699fbe1b306d4819/NL?action=process&cardToken=CARDTOKEN