Payment Links with WIX/Jimdo | wallee.com

Payment Links with WIX/Jimdo

POSTED ON: December 28 2017

Payment Links with WIX & Jimdo

Learn how to turn any website into a mini shop using the wallee payment links/mini shop feature. We are going to show you the way a few lines of html snippets can enable that.

In the previous blogpost we’ve talked about the topic payment links from a general point of view. Thereby, we’ve focused on how these links can be embedded into an existing website or blog in an easy way. Using these links enables you to accept payments in a simple website based on different website providers without any shop backend to issue refunds or captures. Alternatively, there are also other use cases like donation forms etc., which you can offer through these payment links. You can combine the extensive features and integrations wallee offers with the easy website building tools out there.

In this blogpost, we’re looking at WIX and Jimdo, which are two of the most popular providers when it comes to website building as well as hosting a blog and/or online-shop. Both providers are popular amongst website users because of their broad choice of templates as well as the possibility to host a website/blog/online-shop without any coding knowledge.

”In this blogpost, we’re looking at WIX and Jimdo, which are two of the most popular providers when it comes to website building as well as hosting a blog and/or online-shop."

If you are an entrepreneur selling in today’s digital world you have to make sure that you are able to accept payments easily on your website and share it on social media networks. When it comes to the millennials, it is said that 47% of their purchase decisions are based on social media posts/ads, whereas it is 19% across the rest of the age groups (see Forbes, 2017). The payment links feature offers you an easy tool to sell products online and use it to sell remaining stocks, accept donations or payments for services.

In the following passages we would like to show you how you start a simple shop or payment form based on an HTML form on your Jimdo / WIX website. In this case, we implemented the form, which we showed in the previous blogpost, in the HTML code on our WIX and Jimdo website. And you can do it, too:

Wix

  • You need to create a wallee and a WIX account. Apart from that, you’ve got to start your shop or at least create the landing page where you want to place different elements and integrate the form.
  • Activate the payment links feature in wallee. To create a link, go to your wallee space and head over to Payment > Configuration > Payment links. Set up the payment link as well as the different parameters as e.g. currency, usage, validity etc.
  • After creating the payment link, you can simply copy the provided URL and paste the code below on a custom website. Open your WIX online shop website, head over to the editor and then click on Add > More > HTML-Code. Use the HTML-Code of this example you can find in this article. We decided to use a simple form without any JavaScript to validate the input. However, we do provide also JavaScript examples on our github page.
  • As soon as the user would like to send the data and payment, he will be redirected to the wallee payment page. You can edit this page too, with the help of the in-built editor. In addition to that, wallee will help you to take care of the dunning processes, creating additional invoices if you like etc. More information here.

Jimdo

  • You need to create a wallee and a Jimdo account. Apart from that, you’ve got to start your shop or at least the landing page where you want to place different elements and integrate the form.
  • Activate the payment links feature in wallee. To create a link, go to your wallee space and head over to Payment > Configuration > Payment links. Set up the payment link as well as the different parameters as e.g. currency, usage, validity etc.
  • After creating the payment link, you can simply copy the provided URL and invoke it into a HTML code, which integrates a form. Open your Jimdo online shop website, head over to the editor and click into the website. There you can click on add content > more content and add-ons > Widget / HTML. Just fill in the HTML code there and you’re immediately able to see the form.
  • As soon as the user would like to send the data and payment, he will be redirected to the wallee payment page. You can edit this page too, with the help of the in-built editor. In addition to that, wallee will help you to take care of the dunning processes, creating additional invoices if you like etc. More information here.
  • Code Example

            
    <form action="<< put here payment link url >>" method="POST" id="rendered-form">
               
    <div class="rendered-form">
             
    <p> Buy the <strong>new juices for 4.90 CHF</strong>.</p>
                     
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label"> E-Mail Address</label>
    <div class="col-sm-7">
    <input type="text" class="form-control" id="givenName"  name="customerEmailAddress" placeholder="Your E-Mail" required="">
    </div>
    </div>
    </div>
                     
    <div class="rendered-form">
        
    <p> Buy the <strong>new juices for 4.90 CHF</strong>.</p>
                        
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label"> E-Mail Address</label>
    <div class="col-sm-7">
    <input type="text" class="form-control" id="givenName"  name="customerEmailAddress" placeholder="Your E-Mail" required="">
    </div>
    </div>
    </div>
                     
                      
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label">Shipping Method:</label>
    <div class="col-sm-7">
    <div class="checkbox"><input name="lineItems[1][amountIncludingTax]" id="checkbox-group-1511181088841-0"  value="7" type="radio" checked><label for="checkbox-group-1511181088841-0">Express Shipping 7 CHF</label></div>
    <div class="checkbox"><input name="lineItems[1][amountIncludingTax]" id="checkbox-group-1511181088841-1"  value="5"  type="radio"><label for="checkbox-group-1511181088841-1">Standards Shipping 5 CHF</label></div>
    </div>
    </div>
                   
                   
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label"> Given Name</label>
    <div class="col-sm-7">
    <input type="text" name="billingAddress[givenName]" placeholder="Given Name" required=""/>
    </div>
    </div>
    </div>
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label"> Family Name</label>
    <div class="col-sm-7">
    <input type="text" name="billingAddress[familyName]" placeholder="Family Name" required="" />
    </div>
    </div>
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label"> Street</label>
    <div class="col-sm-7">
    <input type="text" name="billingAddress[street]" placeholder="Street" required=""/>
    </div>
    </div>
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label"> PostCode</label>
    <div class="col-sm-7">
    <input type="text" name="billingAddress[postCode]" placeholder="Post Code" />
    </div>
    </div>
    <div class="form-group row">
    <label for="givenName" class="col-sm-3 col-form-label"> City</label>
    <div class="col-sm-7">
    <input type="text" name="billingAddress[city]" placeholder="City Name" required="" />
    </div>
    </div>
    <div class="form-group row">
    <label for="country"  class="col-sm-3 col-form-label">Country</label>
    <div class="col-sm-7">
    <select name="billingAddress[country]" class="form-control" id="country" required="required">
    <option value="DE">Germany</option>
    <option value="CH">Switzerland</option>
    </select>
    </div>
    </div>
                 
    <input type="hidden" name="lineItems[0][amountIncludingTax]" value="4.90" />
    <input type="hidden" name="lineItems[0][name]" value="Natursaft" />
    <input type="hidden" name="lineItems[0][uniqueId]" value="Natursaft" />
    <input type="hidden" name="lineItems[0][type]" value="PRODUCT" />
    <input type="hidden" name="lineItems[0][quantity]" value="1" />
    <input type="hidden" name="lineItems[0][sku]" value="natursaft" />
    <input type="hidden" name="currency" value="CHF" />
             
    <input type="hidden" name="lineItems[1][name]" value="Shipping" />
    <input type="hidden" name="lineItems[1][uniqueId]" value="Shipping" />
    <input type="hidden" name="lineItems[1][type]" value="SHIPPING" />
    <input type="hidden" name="lineItems[1][quantity]" value="1" />
    <input type="hidden" name="lineItems[1][sku]" value="shipping" />
    <input type="hidden" name="currency" value="CHF" />
                     
    <input type="hidden" name="failedUrl" value="https://wallee.com/blog/paymentlinks.html" />
                 
    <br />
    <br />
    <input type="submit" class="btn btn-primary" value="Buy" />
    </form>
    

    Limitations

    When you build an online shop with these payment links, you can avoid the whole set-up of the shop including the implementation of the different payment providers and methods. You are able to setup your store very fast to perform a flash sale etc. However, you do not have any backend processes integrated. For refunds and cancellation you will have to login to wallee to perform these actions. In addition to that, the validation and inventory options are quite limited with the payment links. But these links still provide a valid alternative to sell remaining stock, accept payments quickly for your services (see our sellxed example where we allow our customer to pay their outstanding invoices via PayPal or credit card) or use it as a donation form.

    Support

    If you have any remaining questions do not hesitate to contact us.

#wallee

#News

#integration

#minishop

#donation form

Share this post:

Do you like our features?

Try Wallee for free!