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 PDP-DualLight PDP-MonoColor
PNG PDP-DualLight PDP-MonoColor
SVG PDP-DualDark PDP-MonoLight
PNG PDP-DualDark PDP-MonoLight

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 badge-FullLogo36 badge-OnlyLogo36
PNG 54 badge-FullLogo54 badge-OnlyLogo54
PNG 108 badge-FullLogo108 badge-OnlyLogo108
SVG badge-FullLogo badge-OnlyLogo

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.