How to style your funnel button – PayCafe

Styling your Funnel Button

This procedure will guide you on how to style your funnel buttons such as the "buy now" or "decline offer" buttons. You can create a unique look using the CSS markup and values below.

Important: If you have questions regarding how to build out styling your funnel button, please consult with a web designer or technician.

Upsell Button/Decline Button

Text: Enter the text you want to appear for your upsell button

Style: CSS is enabled to set a background photo or a color for your funnel button

Class: CSS Class Designated to Funnel Button (CSS Class Name is case sensitive)

Example: If you want to style the funnel buttons

var PayCafeParams = {
 PayCafeUpsellButton: {
 text: [Text for your upsell button.]
 style: [CSS to style your upsell button.]
 class: [css class name]
 },
 PayCafeDeclineButton: {
 text: [Text for your decline button.]
 style: [CSS to style your decline button.]
 class: [css class name]
 }
}

Here is an example of values

Note: The values below will give you guidance on size, color, and background images.

var PayCafeParams = {
 PayCafeUpsellButton: {
 text: 'Invite another purchase!',
 style: 'background: url(https://images.pexels.com/photos/370799/pexels-photo-370799.jpeg);
 background-size: 100%; 
 border-radius: 5px; 
 color: #ffffff; 
 font-size: x-large; 
 height: 80px; 
 width: 300px;'
 },
 PayCafeDeclineButton: {
 text: 'Click to decline.',
 style: 'background-color: #eeeeee; border: 1px solid #000000;
 border-radius: 5px;
 font-size: small;
 height: 30px;
 width: 150px;'
 }
}

If you have general questions regarding styling your funnel button, please submit a support ticket through the merchant portal at https://merchant.paycafe.com/login .

We also welcome feedback from our merchants. Please send us your suggestions at suggestions@paycafe.com .