Simple checkout button linked to custom button

[evanpbvs]

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 

[kikmak42]

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

[evanpbvs]

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!

[kikmak42]

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.

[evanpbvs]

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?

[AforANET]

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!!