DropPay API - Shop v.1 - POS - Service human interface guidelines¶
DropPay offers customers an easy, secure, and private way to pay on the web. Use these guidelines to learn how to design a DropPay compliant website or any application.
How DropPay Works¶
During checkout, a payment sheet must show the purchase amount (including tax and fees) and contact information. Users make any necessary adjustments and then authorize payment and complete the purchase using DropPay Mobile App.
For implementation details, see DropPay POS API Overview.
DropPay Buttons¶
The following button styles are available for use by GUIs that accept DropPay.
PayWithDropPay Buttons¶
Use one of these buttons on your website wherever payment is made, such as on a product detail page or shopping cart page. Tapping this button initializes the DropPay POS Authorization flow by offering the consumer a deeplink as a QR code he can scan with its smartphone or a new button he can tap as well to switch to DropPay mobile app and finalize the purchase.
Format | Dual Color | Mono Color |
---|---|---|
SVG | ||
PNG | ||
SVG | ||
PNG |
DropPay Marks¶
Use the DropPay mark graphic to communicate that DropPay is an available payment option when showing other payment options in a similar manner. Download the DropPay mark graphic and its usage guidelines here.
Format | Full Logo | Only Logo |
---|---|---|
PNG 36 | ||
PNG 54 | ||
PNG 108 | ||
SVG |
Referring to DropPay in Text¶
You can use plain text to promote DropPay and indicate that DropPay is a payment option.
Capitalize DropPay in text as it appears in this documentation pages.¶
Use one single word with an uppercase D (Drop), an uppercase P (Pay), and lowercase for all other letters. Display DropPay entirely in uppercase only when doing so is necessary for conforming to an established typographic interface style, such as if your app capitalizes all text.
Don't translate DropPay.¶
Always use DropPay trademarks as provided, without translating it.
Presenting DropPay as a Payment Option¶
Use the DropPay mark only to communicate that DropPay is accepted.¶
The mark doesn’t initialize payment. Never use it as a payment button or position it as a button.
Inform search engines that DropPay is accepted.¶
If your website uses semantic markup to provide product details to search engines, list DropPay as a payment option.
Display an order confirmation or thank-you page.¶
After checkout, use an order confirmation page to provide details about when the order will ship and how to check its status.