800-601-0230

  • Pricing
See a Demo
Pricing
  1. PayJunction Support
  2. Carts, Hosted Payments, POS
  3. Hosted Payments

How do I create a payment button?

How To Use PayJunction Hosted Payments

Using HTML iframes with Hosted Payments code is not recommended. PayJunction Hosted Payments uses 3rd party cookies. If security settings in the client's browsers do not allow 3rd party cookies, they will see this message: "The Hosted Payments store you tried to access is invalid.". Although most browsers by default allow 3rd party cookies, Safari does not.

Step-By-Step Instructions

To create a new Hosted Payment button:

  1. Login to your account at https://www.payjunction.com
  2. Go to More, then select Hosted Payments.
  3. If you don't already have a Shop, please create on by following the instructions here.
  4. On the Shops page, click on the Generate Hosted Payment button (top-right of page). 

Generate Hosted Payment Options

Shop Select the Shop that you would like to use.
Type

There are 4 types of buttons.  Read the description for each Button Type and determine which one works best for you:

  • Add to Cart.  This is the type of button that you should use if you have multiple products that are being sold on your website. As the Button Type indicates, clicking on this type of button will add the item to the shopping cart. The user will be shown the item(s) that have been added to the cart, and will also be allowed to select if they would like to Continue Shopping or Checkout. If the user selects Continue Shopping, then they will be redirected back to your website. Otherwise, if s/he clicks on Checkout, then s/he will be directed to the checkout page to pay for the items that have been added to the checkout page.
  • Snap Check Out.  This is the type of button that you should use if you are accepting payments, or you only have 1 product on your website. Clicking on this type of button will take the user directly to the checkout page. They will then be able to immediately enter their payment information, and move forward with completing the transaction.
  • View Cart.  This type of button does not add any products to the shopping cart. Instead, clicking on this button will take the user to the cart, and s/he will be able to see the items that have been added to cart and will also be allowed to select if s/he would prefer to Continue Shopping or Checkout.
  • Check Out.  This type of button does not add any products to the shopping cart. Instead, clicking on this button will take the user directly to the checkout page. The user will be able to enter all of their Billing Information, Shipping Information (if applicable) and their Credit Card information.
Button Text Use this field to indicate what you would like the payment button to say. For example, "Add to Cart" buttons display the words "Add to Cart" by default. You can change the text, or leave it as is.
Identifier Use this field to describe the product or service. The Identifier field will be displayed on the checkout page, and on the receipt.  Note: 16 character maximum.
Product Description

Use this field to describe the product or service. The Description field will be displayed on the checkout page, and on the receipt.
   
Price
  • If Amount is known, simply enter the amount of the product or service.
  • If the Amount varies or is not known.
    • Customer will specify amount.  Check this box to allow the user to enter the payment amount.
    • Price Label.  If "Customer will specify amount" is checked, then you will be able to enter the text that you would like to display next to the Amount field. For example, "Enter Amount". 
Shipping
  • If you do not want to charge a Shipping Amount, then do not check the box.
  • If you do want to charge shipping, then check the box. You have two options to set up shipping charges:
    • Optional Amount.  Charge a specific Shipping Amount.  If you enter an amount in this field, then this amount will be added to the total shipping charge. 
    • Shipping Tier.  If you leave the "Optional Amount" field blank, then we will base shipping on your Shipping Tier. The Shipping Tier allows you to specify different Price Ranges.  Each Price Range corresponds to a shipping total.  Please view the article on Shipping Tiers for more information.
Tax
  • If you do not want to charge a Tax amount, then do not check the box.
  • If you do want to charge a Tax Amount, then check the box. There is two options to set up Tax amounts:
    • Optional Amount.  Charge a specific Tax amount.  If you enter an amount in this field, then this amount will be added to the total tax amount.

    • Tax Percentage by State.  Charge a tax amount that is based on percentage of the total, on a state by state basis.  If you leave the "Optional Amount" field blank, then Hosted Payments will base the tax amount on the Tax field in the Settings section. The Tax field allows you to specify percentage for each state. 

      For example:

      Tax: ca=8.25, ny=7.25, fl=7.5

      The information listed above indicates the following:

      • Transactions originating in California, will be charged 8.25%.
      • Transactions originating in New York, will be charged 7.25%
      • Transactions originating in Florida, will be charged 7.5%
Options

The Options drop-down menus include a list of options that your website visitors can select. For example, if you are creating a payment button for a shirt, then you can add a list of options (Options 1) for your user to select a size (i.e. Small, Medium, Large). Additionally, you can add another list of options (Options 2) for your user to select a shirt color (i.e. Black, Red, Blue).

  •  Options 1 Name.  This is the name for the options that you are providing.  For example, enter "Shirt Size", if you want the user to select a shirt size.
  • Options 1.  The actual options that you are providing for the user. For example, enter "Small, Medium, Large" for shirt sizes.
  • Options 2 Name.  This is the name for the option that you are providing. For example, enter "Shirt Color" if you want the user to select a shirt color.
  • Options 2.  The actual options that you are providing for the user.  For example, enter "Black, Blue, Red" for shirt colors.

The HTML Code

Now that you have completed the Button Generator form, you will need to place the code on your website.

  1. Highlight all of the HTML code that is listed within the text area.
  2. Copy the HTML.
  3. Go to your website, open the page that will include the payment button and get it ready for editing.
  4. Paste the code on your web page.
  5. Save your webpage, and test the payment button.

Basic Add To Cart Button

<form method="post" action="https://www.payjunction.com/trinity/quickshop/add_to_cart.action"> 
 <input type="hidden" name="store" value="YOUR-HOSTED-PAYMENTS-SHOP-NAME"> 
 <input type="hidden" name="need_to_ship" value="no"> 
 <input type="hidden" name="need_to_tax" value="no"> 
 <input type="hidden" name="identifier" value="PROD-XYZ"> 
 <input type="hidden" name="description" value="Sample product description">
 <input type="hidden" name="quantity" value="1"> 
 <input type="hidden" name="price" value="5.00"> 
 <input type="submit" name="submit" value="Add to Cart"> 
</form>

Basic Snap Check Out Button with User Input Price

<form method="post" action="https://www.payjunction.com/trinity/quickshop/add_to_cart_snap.action">
 <input type="hidden" name="store" value="YOUR-HOSTED-PAYMENTS-SHOP-NAME">
 <input type="hidden" name="need_to_ship" value="no">
 <input type="hidden" name="need_to_tax" value="no">
 <input type="hidden" name="identifier" value="PROD-XYZ">
 <input type="hidden" name="description" value="Sample product description">
 <input type="hidden" name="quantity" value="1">
 <label>Enter Amount</label> <input type="text" name="price">
 <input type="submit" name="submit" value="Check Out">
</form>

Related Documents

Related articles