Embedded / Hosted payment page

Embed our payment page to your own website. Let your customer know their invoice/matter number and then they can pay it via your website.

Get public key

Public key is your identification as a merchant in Payink. However, you can share it is as the public key can only be used for that purpose.
To get public key:
  1. 1.
    Login to Payink
  2. 2.
    Click Setting icon on top right corner
  3. 3.
    Choose API Credentials on the list
  4. 4.
    Copy your public key there
Private and Public key

Embed payment page

Use iframe html tag on your site to hold our URL with the public key
<iframe
sandbox="allow-same-origin allow-scripts allow-forms allow-popups"
allow="payment"
src="https://client.payink.com/pay/{public_key}">
</iframe>

Embed payment page as a Popup

Make a "Make Payment/ Pay Now" button on your website as a trigger to open the popup.
Use this method if supported by the payment partner.
<a
href="javascript:void(0)"
id="payink-embedded-payment"
data-public-key="{public_key}"
>
Make a payment
</a>
Make sure attribute id (payink-embedded-payment) and data-public-key exists.
Then load our CSS and JS.
<link rel="stylesheet" href="https://client.payink.com/css/hosted.min.css" >
<script src="https://client.payink.com/js/embedded.min.js"type="text/javascript"></script>
Then refresh your site and Payink will handle the payment event.
How it will look like
See this fiddle for example https://jsfiddle.net/b2ezc05f/

Use window popup as container

Make any button on your site as a trigger to open the popup.
This method is more flexible than the embedded/iframe because it works for all payment providers we support.
<a
href="javascript:void(0)"
id="payink-popup-payment"
data-public-key="{public_key}"
>
Make a payment
</a>
Make sure attribute id (payink-popup-payment) and data-public-key exists.
Then load our JS.
<link rel="stylesheet" href="https://client.payink.com/css/hosted.min.css" >
<script src="https://client.payink.com/js/popup.min.js"type="text/javascript"></script>
Then refresh your site and Payink will handle the payment event.
How it will look like
See this fiddle for example https://jsfiddle.net/pd0vtyk8/