Browser Client Library

Is there was a way to accept card payments in a browser, in a way which is both secure (plaintext card data is never sent to your server) but also compliant with PCI-DSS and other security best practices?

Actually there is. Data can be encrypted directly in the browser and sent encrypted to your server for further processing. Once your server receives the encypted data you pass it on to Pencepay using one of our server-side Libraries.

So there you have it - full control of the payment process, while satisfying the basic security requirement that your server-side application never sees the plaintext credit card data.

Pencepay.js

You need to include the Pencepay.js in your HTML document.

<script src="https://cdn.pencepay.com/1.0/pencepay.js"></script>

Setting up a HTML form

All the fields which are security sensitive should be marked with the tag attribute data-secured, so that Pencepay.js knows which fields to encrypt.

Please note that none of the sensitive fields have an name attribute defined. This is to prevent accidental sending of plaintext data to your server before the library encrypts the data in the browser.

<form action="/checkout" method="POST" id="payment-form" autocomplete="off">
    <input type="text" data-secured="number" />
    <input type="text" data-secured="cvv" />
    <input type="text" name="expiry_month" /> /
    <input type="text" name="expiry_year" />

    <!-- Add your fields here -->

    <input type="submit" id="submit" value="Make payment" />
</form>

<script src="https://cdn.pencepay.com/1.0/pencepay.js"></script>
<script>
    var pencepay = Pencepay.create('client-public-Key');
</script>

When the form is submitted, Pencepay.js will encrypt the marked fields and send them with all the other fields to your server (as defined in the action attribute of the HTML form).

You can now use the server-side Pencepay Library to process the data received, i.e. to create a new transaction, or to store the card details for future use.

Encrypting the data on the client

To initialize Pencepay.js library, just provide the Client-Side Public Key. You can find it under User settings in the Administration tool, in Keys section.

<script>
  var pencepay = Pencepay.create("client-public-Key");
  pencepay.onSubmitEncryptForm('your-payment-form');
</script>

Processing a payment on the server

Once customer clicks on the "Make payment" button, Pencepay.js will encrypt the fields marked with data-secured attribute and POST them to the FORM's action.

You can then use one of our server-side libraries to process the payment, e.g. make an payment authorization.

$transactionReq = Pencepay_Request_Transaction::build()
    ->amount(10)
    ->currencyCode('EUR')
    ->creditCard()
        ->cardholderName('value-from-the-form')
        ->number('value-from-the-form')
        ->cvv('value-from-the-form')
        ->expiryMonth('value-from-the-form')
        ->expiryYear('value-from-the-form')
        ->done();

$transaction = Pencepay_Transaction::create($transactionReq);

For a classical payment scenario, this is all you need to securely accept cards on your website (mobile or desktop version) or in your app which uses a WebBrowser control.