+ Start a Discussion
Baird_SBaird_S 

PayPal button on VF page?

I'm still pretty new at this, and I'm trying to add a PayPal button to my page.  The page gathers basic data - name, address, etc. - and the button should  open a new window onto the PayPal site (so that my website doesn't have any credit card numbers pass through it).  I've got the PayPal button HTML code, but don't know how to translate it on the visualforce page.

 

The PayPal HTML code is:

 

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">  
 
 <!-- Identify business to collect the payments. -->   
 <input type="hidden" name="business"  value="baird_1327341394_biz@leadgreen.org">  
 
<!-- Specify a Donate button. -->  
 <input type="hidden" name="cmd" value="_donations">  
 
 <!-- Specify details about the contribution -->   
 <input type="hidden" name="item_name" value="{!opp.name}">  
 <input type="hidden" name="item_number" value="Fall Cleanup Campaign">  
 <input type="hidden" name="currency_code" value="USD">   
  <input type="hidden" name="amount" value="{!opp.amount">   
 <input type="hidden" name="first_name" value="{!pcontact.firstname}">
 <input type="hidden" name="last_name" value="{!pcontact.lastname}">
 <input type="hidden" name="address1" value="{!pcontact.MailingStreet}">
 <input type="hidden" name="city" value="{!pcontact.MailingCity}">
 <input type="hidden" name="state" value="{!pcontact.MailingState}">
 <input type="hidden" name="zip" value="{!pcontact.MailingPostalCode}">
 <input type="hidden" name="email" value="{!pcontact.email">
 
 <input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" alt="PayPal - The safer, easier way to pay online">  
 <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" >  
 
</form>

 I've tried translating into VF, but don't find any equivalent for elements like 'method = "post".'

 

So I'd appreciate your guidance on the approach I should take.

 

Baird

 

Best Answer chosen by Admin (Salesforce Developers) 
BritishBoyinDCBritishBoyinDC

The only way I can find is to set the hidden values via javascript prior to the submit, which does seem to work...

 

<apex:page Controller="testLGPayPal">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script>
        var j$ = jQuery.noConflict();
        
           j$(document).ready(function(){
              
               j$('#ppform').submit(function(e){
                   //e.preventDefault();
               j$('[id$=ppamount]').val(j$('[id$=sfamount]').val());
               j$('[id$=ppitemname]').val(j$('[id$=sfoptyname]').val());
               j$('[id$=ppclastname]').val(j$('[id$=sflastname]').val());
               
               
               });
           });
        </script>

<apex:form >
<apex:panelGrid columns="2">
<apex:outputLabel >Last Name</apex:outputLabel>
<apex:inputField id="sflastname" value="{!pcontact.LastName}"/>
<apex:outputLabel >Amount</apex:outputLabel>
<apex:inputField id="sfamount" value="{!opty.Amount}"/>
<apex:outputLabel >Name</apex:outputLabel>
<apex:inputField id="sfoptyname" value="{!opty.Name}"/>

</apex:panelGrid>
</apex:form>


<form id="ppform" target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post">  
 
 <!-- Identify business to collect the payments. -->   
 <input type="hidden" name="business"  value="baird_1327341394_biz@leadgreen.org"/>  
 
<!-- Specify a Donate button. -->  
 <input type="hidden" name="cmd" value="_donations"/>  

 <!-- Specify details about the contribution -->   
 <input type="hidden" id="ppamount" name="amount"/>  
 <input type="hidden" id="ppitemname" name="item_name"/>  
 <input type="hidden" name="currency_code" value="USD"/>   
 <input type="hidden" id="ppcfirstname" name="first_name" />
 <input type="hidden" id="ppclastname" name="last_name" />
 
 <input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" alt="PayPal - The safer, easier way to pay online"/>  
 <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" />  
 
</form>

</apex:page>

 Controller:

public class testLGPayPal {

public Contact pcontact {get;set;}
public Opportunity opty {get;set;}

public testLGPayPal() {
pcontact = new Contact();
opty = new Opportunity();

}

}

 

All Answers

BritishBoyinDCBritishBoyinDC

The only way I can find is to set the hidden values via javascript prior to the submit, which does seem to work...

 

<apex:page Controller="testLGPayPal">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

        <script>
        var j$ = jQuery.noConflict();
        
           j$(document).ready(function(){
              
               j$('#ppform').submit(function(e){
                   //e.preventDefault();
               j$('[id$=ppamount]').val(j$('[id$=sfamount]').val());
               j$('[id$=ppitemname]').val(j$('[id$=sfoptyname]').val());
               j$('[id$=ppclastname]').val(j$('[id$=sflastname]').val());
               
               
               });
           });
        </script>

<apex:form >
<apex:panelGrid columns="2">
<apex:outputLabel >Last Name</apex:outputLabel>
<apex:inputField id="sflastname" value="{!pcontact.LastName}"/>
<apex:outputLabel >Amount</apex:outputLabel>
<apex:inputField id="sfamount" value="{!opty.Amount}"/>
<apex:outputLabel >Name</apex:outputLabel>
<apex:inputField id="sfoptyname" value="{!opty.Name}"/>

</apex:panelGrid>
</apex:form>


<form id="ppform" target="_blank" action="https://www.paypal.com/cgi-bin/webscr" method="post">  
 
 <!-- Identify business to collect the payments. -->   
 <input type="hidden" name="business"  value="baird_1327341394_biz@leadgreen.org"/>  
 
<!-- Specify a Donate button. -->  
 <input type="hidden" name="cmd" value="_donations"/>  

 <!-- Specify details about the contribution -->   
 <input type="hidden" id="ppamount" name="amount"/>  
 <input type="hidden" id="ppitemname" name="item_name"/>  
 <input type="hidden" name="currency_code" value="USD"/>   
 <input type="hidden" id="ppcfirstname" name="first_name" />
 <input type="hidden" id="ppclastname" name="last_name" />
 
 <input type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" alt="PayPal - The safer, easier way to pay online"/>  
 <img alt="" border="0" width="1" height="1" src="https://www.paypal.com/en_US/i/scr/pixel.gif" />  
 
</form>

</apex:page>

 Controller:

public class testLGPayPal {

public Contact pcontact {get;set;}
public Opportunity opty {get;set;}

public testLGPayPal() {
pcontact = new Contact();
opty = new Opportunity();

}

}

 

This was selected as the best answer
Baird_SBaird_S

Thanks much, Peter.  I hope that this is useful for others as well.

faw awghfaw awgh
Hey, Can I use the Other option for donation program? I'm using the local payment integration for my Muslim charities UK (https://www.almustafatrust.org/) program that hosted on WordPress.