Reply
Member
Posts: 7
Registered: ‎12-20-2017

Simple checkout button linked to custom button

Is there a way to take the HTML form code for the simple checkout button and insert it into a custom CSS button I have made for our website? The current button provided doesnt match the aesthetic we are going for, and I have tried everything I can think of with no success.

 

Sorry for spamming previous questions, I couldn't find where to post a new topic 

Authorize.Net Expert
Posts: 75
Registered: ‎07-27-2016

Re: Simple checkout button linked to custom button

[ Edited ]

Hi @evanpbvs

 

Yes you can customize your simple checkout button as you wish. You will need to add a class to the input tag and define the css for that class.

 

Here is a sample code : 

 

<form name="PrePage" method = "post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx"> <input type = "hidden" name = "LinkId" value ="********YOUR-ID*********" /> <input class="buy-button" type = "submit" value = "Buy Now!" /> </form>

 

.buy-button {
background: #0066A2;
color: white;
border-style: outset;
border-color: #0066A2;
height: 50px;
width: 100px;
font: bold 15px arial, sans-serif;
text-shadow:none;
}

 

This looks something like this : Sample

 

Hope this helps

Member
Posts: 7
Registered: ‎12-20-2017

Re: Simple checkout button linked to custom button

this answer was very helpful, however it does not look like im able to get it functioning as intended. The current button im using has this css: 

.maxbutton-4.maxbutton.maxbutton-online-payments.online-payments
{position:relative !important;text-decoration:none !important;display:inline-block !important;width:320px !important;height:55px !important;border-top-left-radius:4px !important;border-top-right-radius:4px !important;border-bottom-left-radius:4px !important;border-bottom-right-radius:4px !important;border-style:solid !important;border-width:0px !important;background-color:rgba(8, 58, 94, 0.75) !important}
.maxbutton-4.maxbutton:hover.maxbutton-online-payments.online-payments
{background-color:rgba(8, 58, 94, 1) !important}
.maxbutton-4.maxbutton.maxbutton-online-payments.online-payments .mb-text
{color:#fff !important;font-family:Tahoma !important;font-size:20px !important;text-align:left !important;font-style:normal !important;font-weight:bold !important;padding-top:17px !important;padding-right:0px !important;padding-bottom:25px !important;padding-left:15px !important;line-height:1em !important;box-sizing:border-box !important;display:block !important;background-color:unset !important}
.maxbutton-4.maxbutton:hover.maxbutton-online-payments.online-payments .mb-text
{color:#fff !important}

and i set an extra class to "online-payments" but when trying to use that class to define the Simple Checkout Button, it doesn't seem to work :/

This is what my button looks like normally but I am unable to link it to the correct URL because of the LinkID:

 

This is what the Simple Checkout one looks like after defining the class(i even attempted to use your test button and the aesthetic remained the same after inserting your CSS code:

 

Any idea? Thank you thus far for your prompt response!

Im new to this whole HTML and CSS thing and im learning, but its hard!

Authorize.Net Expert
Posts: 75
Registered: ‎07-27-2016

Re: Simple checkout button linked to custom button

Hi @evanpbvs

 

The look and feel of the Simple Checkout button is fully customizable using css.

Its upto you how you want your "Buy Now' button to look like. One can even customize the text as required.

 

Looking at you code snippet, it dosen't seems to me that you are defining the css correctly.

 

Highlighted
Member
Posts: 7
Registered: ‎12-20-2017

Re: Simple checkout button linked to custom button

I'm using a plugin to create the button, however that was the "external CSS" that it spit out. Upon further investigation I have found the HTML when the button is embedded on my site, however it is a class code using href. Is there anyway to link to the Simple Checkout page without going through form class?

 

<a class="maxbutton-4 maxbutton maxbutton-online-payments online-payments" title="Online Payments" href="https://Simplecheckout.authorize.net/payment/CatalogPayment.aspx" target="_blank" rel="noopener"><span class="mb-text">Online Payments</span></a>

That's the correct button, however since there's no spot for the LinkID I am unable to get it to open the page correctly.

 

Any ideas on how I could integrate that code into a functioning form class code?

Authorize.Net Expert
Posts: 27
Registered: ‎11-22-2017

Re: Simple checkout button linked to custom button

Hi @evanpbvs,

It seems like you are using link for submitting the form. Below is the sample code that might be useful your case:

 

<form id="1" name="PrePage" method = "post" action = "https://scotest.authorize.net/payment/CatalogPayment.aspx"> 
<input type = "hidden" name = "LinkId" value ="---------Your LinkID Here--------" />
</form>

 

<a class="button" onclick="document.getElementById('1').submit()">Pay Now!!</a>

 

 

the above snippet will basically submit the form using the link. Hope this helps!!