Create an Online Payment Button (that collects Patient details)

This article will guide medical practice that want to collect online payments on your website.

PROCESS OVERVIEW:

I- Create Shop

II- Update the Shop Fields

III- Copy and Adjust HTML Template

I- Create the Shop

When adding online payments to your website it is best to create a separate Hosted Payments Shop

1. Log into PayJunction as an administrator
2. Select More > Hosted Payments from the left side menu:
   
3. Click the New Shop button in the top right corner of this page:
   
4. Fill out the form as shown below, replacing the values as necessary:
   - For the SHOP NAME, we recommend "Online_" followed by the name or initial of your business (Note: underscores are used instead of spaces). That will later make the reports self explanatory. 
   - If you have multiple accounts/batches, select the appropriate one from the ACCOUNT dropdown.
   - You can leave the EMAIL NEW ORDERS TO field blank if you want the notifications sent to the default email on the account. Otherwise you can have up to 3 emails separated by commas.
   - In the Security section, for the CAPTCHA VERIFICATION field, please select "On After Decline".
   - Click on CREATE SHOP to confirm and save your Hosted Payment.
   

II- Update the Shop Fields

After saving the new Shop you should be dropped back at the Shop page with your new Shop listed. Hover your mouse over the eye-icon for the shop and choose Shop Fields from the menu:

Use the Hide All shortcuts for each section and then make the following fields available as follow:  

• NOTES (under Transaction Fields): Display
• FIRST NAME (under Billing Contact): Required
• LAST NAME (under Billing Contact): Required
• ZIP CODE (under Billing Contact): Required

All fields in the Shipping Contact Fields should remain hidden.

Click  Save Changes to apply your updates. 

III- Copy and Adjust HTML Template

Once you have your Hosted Payments Shop Name, follow these steps:

1. Highlight all of the HTML code that is listed within the text area below.
2. Copy the HTML.
3. Paste the code on your web page.
4. Replace the place-holder values in the description field with the name of your business
5. Replace the place-holder values in the Store field with your Hosted Payment Shop Name. 
6. Save your webpage, and test the payment button.

<form method="post" action="https://www.payjunction.com/trinity/quickshop/add_to_cart_snap.action" >
 <input type="hidden" name="description" value="NAME-OF-YOUR-BUSINESS">
 <input type="hidden" name="need_to_ship" value="no">
 <input type="hidden" name="need_to_tax" value="no">
 <input type="hidden" name="identifier" value="Online Payment">
 <input type="hidden" name="quantity" value="1">
 <input type="hidden" name="store" value="YOUR-HOSTED-PAYMENTS-SHOP-NAME">
 <input type="hidden" name="notes" value="" id="notes">
 <table style="width:80%">
<tr>
 <td><label>Patient First Name: (<font color="red">*</font>)</label></td>
 <td><input type="text" required name="shippingFirstName" id="shippingFirstName"></td>
 </tr>
 <tr>
 <td><label>Patient Last Name: (<font color="red">*</font>)</label></td>
 <td><input type="text" required name="shippingLastName" id="shippingLastName"></td>
 </tr>
 <tr>
 <td><label>Patient DOB: (<font color="red">*</font>)</label> </td>
 <td><input type="text" required name="notes" id="patientDOB"></td>
 <tr>
 <td><label>Patient ID Number:</label> </td>
 <td><input type="text" name="billingCustomerId" id="billingCustomerId"></td>
 <tr>
 <td><label>Payment amount $: (<font color="red">*</font>)</label></td>
 <td><input type="text" name="price"></td>
 </table>
 <table>
 <tbody><tr>
 <td align="left">
 <input type="submit" name="submit" value="Proceed to Payment" onclick="concatenateNotes()">
 </td>
 </tr>
 </tbody></table>
</form>
 (<font color="red">*</font>): Mandatory Fields
<script type="text/javascript">
 function concatenateNotes()
 {
 document.getElementById('notes').value = 'Patient First Name: ' + document.getElementById('shippingFirstName').value 
+ '\n' + 'Patient last Name: ' +
 document.getElementById('shippingLastName').value
+ '\n' + 'Patient DOB: ' +
 document.getElementById('patientDOB').value 
+ '\n' + 'Patient ID: ' +
 document.getElementById('billingCustomerId').value;
 }
</script>

The form will looks something like this. Your Styling may change the looks and you can style the form to match your site as long as the form works properly.