Replacing image button generated by JavaScript with HTML button

Hi,

I am trying to implement a payment button on a website.

The payment gateway uses the following script which outputs an image as a button which opens a form in a modal.

<script type="text/javascript" id='pw_123456' src="https://app.paywhirl.com/pwa.js"></script>
				<script>paywhirl('button',{autoscroll: 1, domain:'domainname' ,uuid:'123456789', button_image: '' },'pw_123456'); </script>

The above code then generates the following HTML:

<script type="text/javascript" id="pw_123456" src="https://app.paywhirl.com/pwa.js"></script>
<a href="javascript:void(0);"><img src="https://website.paywhirl.com/pwtheme/images/buy_button.svg" class="pw-buy-btn" style="margin: 10px; cursor: pointer; max-width: 180px;"></a>
<link rel="stylesheet" type="text/css" href="https://grofwebsitehirl.com/js/tingle.js"></script>

I have tried using the following code to replace the above image which works, but I have multiple instances of the button on the page and when I inset the original gateway code multiple times, the HTML version of the button is removed and multiple versions are then inserted throughout the page.

$( document ).ready(function() {
$( '.pw-buy-btn' ).replaceWith( '<a href="#" class="button-purple fade">Get Started</a>' );
});

I’m not sure if that makes sense :confused:

I am wondering if there is a way to generate a HTML version of the button from the outputted code that I can then use multiple times on the page.

Any suggestions would be great, thanks :slight_smile:

Well, you could try it like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

</head>
<body> 

<script id="pw_123456" src="https://app.paywhirl.com/pwa.js"></script>
<script>
   paywhirl(
      'button', 
         {
       autoscroll: 1, 
       domain: 'domainname',
       uuid: '123456789', 
       button_image: 'http://coothead.co.uk/images/toolman.png' /* adjust this value to  taste !! */
         },
      'pw_123456'
        ); 
</script>

</body>
</html>

coothead

Hi coothead,

Thanks for the reply

Ideally I would like to replace it with a HTML button. E.g.<a href="#" class="my-button">Link</a>

Hi there toolman,

so you don’t want to go to “Pay Now With PAYWHIRL” ?

coothead

I do, but I would like the link to be HTML so I can style it, rather than it being an image

Hi there toolman,

here is an example for you to play with…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<style media="screen">
body {
    background-color: #fcfcfc;
    font: 100% / 162% BlinkMacSystemFont, -apple-system, 'Segoe UI', roboto, helvetica, arial, sans-serif;
 }

/************* this code hides the img *************/

.hide {
    display: none;
 }

/***************************************************/

.my-button {
    display: block;

/*********** adjust these values to suit ***********/

    width: 11.25em;
    padding: 0.5em;
    border: 1px solid #999;
    border-radius: 0.75em;
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    box-shadow: inset 0 0 1em rgba( 0, 0, 0, 0.3 ), 
           0.25em 0.25em 0.25em rgba( 0, 0, 0, 0.4 ); 
    color: #000;
    text-decoration: none;
    text-transform: uppercase;

/***************************************************/
 }
</style>
</head>

<body> 

<script id="pw_123456" src="https://app.paywhirl.com/pwa.js"></script>
<script>
   paywhirl(
      'button', {
       autoscroll: 1,  domain: 'domainname',  uuid: '123456789', button_image: '' },
      'pw_123456' ); 
   document.querySelector( '.pw-buy-btn' ).classList.add( 'hide' );
   var a = document.querySelector( 'a[href="javascript:void(0);"]' );
       a.setAttribute( 'class', 'my-button' )
       a.appendChild( document.createTextNode( 'Link' ) );
</script>

</body>
</html>

:biggrin:

coothead

1 Like

Are you certain that image isn’t a trademarked logo? Have you asked if it’s OK to remove it and replace it with text?

https://www.paywhirl.com/terms-of-use


7. Proprietary Rights
… including but not limited to the design, artwork, logos, functionality, and documentation relating thereto (collectively, the “PAYWHIRL Property”). You may not: … (iii) remove or otherwise alter any proprietary notices or labels from the Service or any portion thereof. The names, logos or trademarks of any third party companies and products mentioned on the Service (including, without limitation, PAYWHIRL Partners and Partner Sites) may be the trademarks of their respective owners.

Many thanks, I will have a play :slight_smile:
I seem to only be able to add one instance of the button on the page, so it may be an issue with the third party JS.

Thanks again.

Regarding the terms, I am allowed to upload my own image, so I assumed I can use my own HTML version. I will ask when their support is next online which is Monday.

1 Like