Payment Buttons

Payment buttons allow you to seamlessly accept payments on your site.

For example, the following snippet of HTML code will add a button to your site allowing your customer to make a payment:

<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>

The result:

Pay Now

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

That’s all you need to do. No server-side coding is required, and you’ll receive an email notification when a customer makes a payment.

To get started, log in to your Pin Payments dashboard and use the payment button builder to create your payment button code.

Customising the appearance

You can customise 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” would turn it into a simple text link:

<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>

If you customise your payment button you must 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 Javascript developers

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

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.

Configuring the transaction details

You can configure the transaction details and behaviour by passing the following URL parameters in the href attribute of the link:

amount Amount for the transaction (e.g. 12.95)
amount_editable Whether or not the payer can edit the amount. Set to false to disable editing. The default is true
currency Currency for the transaction (e.g. USD). The default is AUD
description The description for the transaction
success_url A URL to redirect to once the transaction is complete. The URL will be passed a charge_token parameter, which you can use on your server with the Charges API to verify the charge.
email The email address of the customer
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

For example, the following payment button code will request 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.

<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>

The result:

Pay Now

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

You can also use the payment button builder in your Pin Payments dashboard to configure many of these parameters and create the corresponding HTML code.

Pin Payments is owned and operated by
Southern Payment Systems Pty Ltd
ABN: 46 154 451 582
Level 1, 34 Queen St,
Melbourne VIC 3000

Privacy Policy Terms Security Status

Australia