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.
You need to include the
Pencepay.js in your HTML document.
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
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