Advanced customization
Prefilled checkout page
You can open directly checkout page for a customer and specify checkout attributes for customer.
- ticker - project identification.
- quantity - how many trees or carbon tonnes is a customer buying. Has to be a whole number.
- name - name of a customer (optional).
- email - email of a customer (optional).
- gift - flag whether a customer is buying as gift certificate or for himself (optional). Default value
false. - subscription - choose subscription type of purchase (0 - one off | 1 - monthly subscription) (optional). Default value
0.
Theme customisation
Customise iframe theme by color palette of your site.
- Support only for (hex, rgb, rgba, hsl, hsla, named) HTML colors
- Theme attributes are optional. You do not need to fill full theme, but it is recommended
- You can find more information about an error in developer tools if you enter wrong color
You can change
widthandheightof the iframe by your preferences
your-page.html
... rest of your site
<iframe height="700" id="whitelabel-checkout" src="https://whitelabel-checkout.earthbanc.io/?partner=YOUR_PARTNER_ID" width="700"></iframe>
<script nonce="**CSP_NONCE**">
var frame = document.getElementById('whitelabel-checkout')
frame.onload = function () {
var theme = {
body: {
backgroundColor: '#F0F4F5',
textColor: '#101828'
},
page: {
detail: {
place: {
textColor: '#00A9B5'
}
},
checkout: {
orderSummary: {
name: {
textColor: '#344054'
},
totalAmount: {
textColor: '#344054'
},
totalPrice: {
textColor: '#00A9B5'
},
wrapper: {
backgroundColor: 'rgba(240, 244, 245, 0.7)'
}
}
},
paymentSepa: {
textColor: '#344054'
}
},
logo: 'light' // light | dark
},
components: {
h1: {
textColor: '#004F5D'
},
anchor: {
textColor: '#00A9B5'
},
badge: {
backgroundColor: '#F2F4F7',
textColor: '#344054'
},
button: {
primary: {
backgroundColor: '#00A9B5',
textColor: '#fff',
':hover': {
backgroundColor: '#006b73'
}
},
secondary: {
backgroundColor: '#fff',
textColor: '#667085',
':hover': {
backgroundColor: '#F9FAFB'
}
}
},
card: {
description: {
textColor: '#475467'
},
place: {
textColor: '#475467'
},
price: {
textColor: '#475467'
},
wrapper: {
backgroundColor: '#FFF',
borderColor: '#E4E7EC'
},
ticker: {
textColor: '#667085'
},
title: {
textColor: '#344054'
}
},
carousel: {
arrow: {
backgroundColor: '#E4E7EC',
textColor: '#475467'
},
dot: {
wrapper: {
backgroundColor: '#E4E7EC',
},
':before': {
backgroundColor: '#667085',
':selected': {
backgroundColor: '#fff',
},
},
},
wrapper: {
backgroundColor: 'linear-gradient(0deg, rgba(0, 0, 0, 0.7) -4.76%, rgba(0, 0, 0, 0) 20.92%)'
}
},
fieldWrapper: {
label: {
textColor: '#344054'
},
message: {
error: {
textColor: '#F04438'
},
hint: {
textColor: '#667085'
}
}
},
header: {
linkBack: {
textColor: '#667085'
}
},
checkbox: {
backgroundColor: '#F9FAFB',
borderColor: '#D0D5DD',
textColor: '#344054',
':checked': {
backgroundColor: '#00A9B5',
borderColor: '#00A9B5',
},
},
iconFeatured: {
lightCircleOutline: {
error: {
backgroundColor: '#D92D20',
},
warning: {
backgroundColor: '#DC6803',
},
success: {
backgroundColor: '#039855',
},
},
},
input: {
backgroundColor: '#fff',
textColor: '#101828',
borderColor: '#D0D5DD',
':error': {
borderColor: '#F04438'
},
':focused': {
borderColor: '#00A9B5'
},
':placeholder': {
textColor: '#500'
}
},
inputRadio: {
backgroundColor: '#fff',
borderColor: '#D0D5DD',
':hover': {
boxShadowColor: 'rgba(20, 155, 165, 0.25)'
},
':checked': {
backgroundColor: '#149BA5',
borderColor: '#149BA5'
}
},
inputTabRadio: {
wrapper: {
backgroundColor: '#fff',
borderColor: '#E4E7EC',
':checked': {
borderColor: '#00A9B5'
}
}
},
markdown: {
textColor: '#344054'
},
section: {
backgroundColor: '#fff',
borderColor: '#E4E7EC'
},
select: {
option: {
backgroundColor: '#fff',
textColor: '#101828',
':selected': {
backgroundColor: '#F2F4F7',
textColor: '#101828'
}
},
dropdownIndicator: {
textColor: '#667085'
}
}
},
toast: {
progress: {
error: {
backgroundColor: '#D92D20',
},
warning: {
backgroundColor: '#DC6803',
},
success: {
backgroundColor: '#039855',
},
},
wrapper: {
backgroundColor: '#fff',
textColor: '#667085',
},
}
}
frame.contentWindow.postMessage({ target: 'theme', theme: theme }, '*')
}
</script>
... rest of your site