CityPay Pay-Button

CityPay payment buttons enable you to accept payments quickly and easily online by using your own checkout form.

To setup the payment button, you will need to add a small Javascript file to your page. The script is designed to be asynchronous by not blocking your browser onload. It should be included in your document by adding a script element. This can be added to the head or end of your document.

  <script async src="https://api.citypay.com/js/citypay.js"></script>

Note: If you are already including the citypay.js script file you will not need to perform this

Button Styling

To style buttons, you will just need to add class files to your required form button. This may be a <button /> or <input type="button" /> element. It will not however work on submit or reset input button types.

There are 2 main buttons

Button Type	Example	CSS Class
A dark styled button		`citypay-pay-button-dark`
A light styled button		`citypay-pay-button`

To enable styling, add the appropraite css className i.e.

<button class="my-class citypay-pay-button">Button Text</button>

CityPay provides several types of buttons so that you can choose the button type that fits best with the terminology and flow of your purchase or payment experience.

When you use this process, you get:

A button that is guaranteed to use a CityPay approved caption, font, color, and style
Assurance that the button’s contents maintain ideal proportions as you change its size

Button Image	Example Usage
	An app or website that has stylistic reasons to use a button that can have a smaller minimum width or that doesn’t specify a call to action.
	An area in an app or website where people can make a purchase, such as a product detail page or shopping cart page.
	An app or website that lets people pay bills or invoices, such as a service like plumbing or car repair.
	An app or website offering a shopping cart or purchase experience
	An app or website offering a shopping cart or purchase experience
	An app or website that helps people book flights, trips, or other experiences
	An app or website for an approved nonprofit that lets people make donations.
	An app or website that lets people purchase a subscription, such as a gym membership
	An app or website that uses the term reload to help people add money to an account or system associated with a service, such as a prepaid phone plan.
	An app or website that uses the term top up to help people add money to an account or system associated with a service, such as a prepaid phone plan.
	An app or website that lets people place orders for items like meals or flowers.
	An app or website that uses the term support to help people give money to projects, causes, and other entities.
	An app or website that uses the term contribute to help people give money to projects, causes, and other entities.
	An app or website that lets people tip for goods or services.