Pay with Terra buttons

To help your users better recognize the Pay with Terra payment method, checkout buttons should look consistent across websites. For this, you can use our open-source CSS buttons.

Note: Use our Customize your button tool (below) to configure a button for your use case.

If you are not able to use our css-based buttons, you can create your own simplified ones with our graphic materials.

Showcase

Customize your button




Preview

Usage

Setup

0. Add webfont "Questrial" to the webpage

You can embed font directly from Google Fonts

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Questrial&display=swap" rel="stylesheet">

or self-host this font

1a. Plain CSS

<!-- Connect pwt-buttons.css before </head> -->
<link href="https://cdn.jsdelivr.net/gh/paywithterra/buttons@0.1.2/public/css/pwt-buttons.css" rel="stylesheet">

1b. Build and customize with SASS/SCSS

Install with npm

npm i paywithterra-buttons --save
// Import in your styles.scss
@import  "~paywithterra-buttons/sass/pwt-buttons";
or get source code from Github

// copy both pwt-buttons.scss and pwt-variables.scss to your sources
// Replace variables from pwt-variables.scss before "@import"
$pwt-btn-font-size: 24px;

@import  "pwt-buttons";