Payment Buttons

Payment Buttons allow you to seamlessly and securely accept payments on your website with a small snippet of HTML code. When the Payment Button is clicked, the customer is presented with a payment form overlay, where they can securely enter their payment details.

For example:

code
Pay Now
<script src="https://cdn.pinpayments.com/pin.v2.js"></script>
<a class="pin-payment-button" href="https://pay.pinpayments.com/qkbo/test"><img src="https://pinpayments.com/pay-button.png" alt="Pay Now" width="86" height="38"></a>

Hint: Use the card number 4200 0000 0000 0000, or any of the test card numbers.

In this guide

  1. Your Payment Button code
  2. Preset and custom fields
  3. Customising the appearance
  4. Configure surcharging
  5. Test mode

Your Payment Button code

Your Payment Button code can be copied from your Pin Payments dashboard. Log in to your Pin Payments dashboard, click Account, and select Payment Button in the sidebar.

On this screen, find the section labeled ‘HTML Code’ and click ‘Copy’ to copy your Payment Button code—ready to embed on your webpage.

Preset and custom fields

Your Payment Button can be customised with additional parameters; including amount, currency, and description. This gives you a simple way to make different Payment Buttons to collect payment for specific items or services.

Standard fields

You can set any of these parameters from your Payment Button dashboard:

  • amount value to charge
  • currency currency to charge
  • description description for the charge
  • success_url page to redirect to after successful charge
  • amount_editable set to false to disable changes to the amount field

Custom fields

For more flexibility, you can specify up to three custom fields for your Payment Button. Custom field information is stored on the Charge metadata, and can be viewed on your dashboard.

  • field1label the label displayed for the first field
  • field1value an optional default value for the first field
  • field2label the label displayed for the second field
  • field2value an optional default value for the second field
  • field3label the label displayed for the third field
  • field3value an optional default value for the third field

Each custom field requires a label; the value can be omitted for the customer to complete.

Customer parameters

If you have already collected information from the customer—such as their email or billing address—you can add the following parameters to the Payment Button code to prefill the respective fields, making the payment process even more seamless:

  • email The customer’s email address
  • address_line1 The first line of the customer’s address
  • address_line2 The second line of the customer’s address
  • address_city The customer’s city
  • address_state The customer’s state
  • address_postcode The customer’s postcode
  • address_country The customer’s country

Once you’ve configured the fields for your Payment Button, you can copy the HTML code and embed it on your webpage.

The following Payment Button code example requests a payment of $25.00 USD for “One-off donation” and then redirect the customer to a thank you page located at http://example.com/thanks.

code
Pay Now
<script src="https://cdn.pinpayments.com/pin.v2.js"></script>
<a class="pin-payment-button" href="https://pay.pinpayments.com/qkbo/test?amount=25.00&amp;currency=USD&amp;description=One-off+donation&amp;success_url=http%3A%2F%2Fexample.com%2Fthanks"><img src="https://pinpayments.com/pay-button.png" alt="Pay Now" width="86" height="38"></a>

Hint: Use the card number 4200 0000 0000 0000, or any of the test card numbers.

Customising the appearance

You can customise the appearance of your Payment Button by replacing the <img> tag inside of the link with anything you like.

For example, replacing the <img> tag with the words “Donate Now” turns the Payment Button into a simple text link:

code
<script src="https://cdn.pinpayments.com/pin.v2.js"></script>
<a class="pin-payment-button" href="https://pay.pinpayments.com/qkbo/test">Donate Now</a>

Hint: Use the card number 4200 0000 0000 0000, or any of the test card numbers.

If you customise your payment button, please ensure the following:

  • The link (<a> tag) must contain the class pin-payment-button
  • The Pin.js <script> tag must be loaded on the page

Note for developers

You can add, remove, and modify Payment Button links and parameters dynamically using Javascript and it will work as expected. Pin.js adds a click event handler to the document element, and configures itself on each click event.

Pass on a surcharge

When configuring your Payment Button code in your Pin Payments dashboard, you also have the option to enable surcharging and pass on the cost of processing the transaction to your customer:

code
Pay Now
<script src="https://cdn.pinpayments.com/pin.v2.js"></script>
<a class="pin-payment-button" href="https://pay.pinpayments.com/qkbo/sc/test"><img src="https://pinpayments.com/pay-button.png" alt="Pay Now" width="86" height="38"></a>

Hint: Use the card number 4200 0000 0000 0000, or any of the test card numbers.

This surcharge is calculated to exactly cover Pin Payments card processing fees for the transaction, ensuring you receive the full original amount requested when we settle the funds to your bank account.

As with the Payment Page, surcharging is enabled by adding /sc to your payment page link, immediately following your four character payment page path.

Test mode

The Payment Button has two modes of operation: test mode and live mode. Test mode allows you to test the purchase process with any of the documented test cards. Once you’re ready, simply remove the /test from the href inside the Payment Button code to use live mode.

Southern Payment Systems Pty Ltd
t/a Pin Payments
ABN: 46 154 451 582
Level 4, 356 Collins St,
Melbourne VIC 3000

A Checkout.com company

Privacy Policy Terms Security Status

Australia