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>
If you are already including the citypay.js script file you will not need to perform this
To style buttons, you will just need to add class files to your required form button. This may be a or element. It will not however work on submit or reset input button types.
There are 2 main buttons:
Button Type | Example | CSS Class |
|---|---|---|
A light styled button | citypay-pay-button | |
A dark styled button | citypay-pay-button-dark |
To enable styling, add the appropriate 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
- 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.
- 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 lets people place orders for items like meals or flowers.
- 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 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 lets people purchase a subscription, such as a gym membership.
- An app or website for an approved nonprofit that lets people make donations.
- An app or website that helps people book flights, trips, or other experiences.
- An app or website offering a shopping cart or purchase experience.
- An app or website offering a shopping cart or purchase experience.
- 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 that has stylistic reasons to use a button that can have a smaller minimum width or that does not specify a call to action.