You can toggle/pass in the following information when you are installing the checkout on your webpage:

  1. Pre-selecting an item (and therefore not show the item selection page)
  2. Forcing a specific language
  3. Pass in names & email addresses of the purchaser / recipient
  4. Take the purchaser straight to a specific page on the checkout (e.g. the payment page)
  5. Hiding the artwork shown at the top for a more concise checkout experience

Here's how you do it...

By default the the installation target div looks like this:
<div class="gift-up-target" data-site-id="{YOUR GIFT UP ID}" ></div>

But you can add extra properties as below:

Allowing only 1, pre-chosen item to be bought

When you want to show a version of your checkout without the first page (the item selection page), just use our configuration widget in the Installation section of the dashboard:


Forcing a specific language

We support a language chooser on our checkout, but sometimes you want to install a version of the checkout and have it select a language. 

You can do this by passing in a data attribute called data-language  and setting it to one of the following values

  • en-US  (United States)
  • en-GB  (British)
  • en-CA  (Canadian)
  • en-AU  (Australian)
  • bg-BG  (Bulgarian)
  • cs-CZ  (Czech)
  • da-DK  (Danish)
  • nl-NL  (Dutch)
  • fi-FI  (Finnish)
  • fr-FR (French)
  • de-DE  (German)
  • hu-HU  (Hungarian)
  • it-IT  (Italian)
  • no-NO  (Norwegian)
  • pt-PT  (Portuguese)
  • pl-PL  (Polish)
  • ro-RO  (Romanian)
  • ru-RU  (Russian)
  • sr-BA  (Serbian)
  • sk-SK  (Slovakian)
  • es-ES  (Spanish)
  • sv-SE  (Swedish)
  • uk-UA  (Ukranian)
  • lv-LV  (Latvian)

<div class="gift-up-target" data-site-id="{YOUR GIFT UP ID}" data-language="fr-FR"></div>

Passing in the purchaser's/recipient's name & email address

Our checkout asks for various bits of information including:

  1. Purchaser's name & email address
  2. Recipient's name & email address
  3. Who the gift card is being bought for (Yourself or Someone else)

You can pass all or part of this information in as data variables in the installation target div.

1) Purchaser's/recipient's name & email address

These values can be passed in via the following data attributes:
, data-purchaser-email, data-recipient-name and data-recipient-email 

You do NOT need to specify all values, only what you have.

Also, if you specify data-who="yourself"  value (below) then you need only specify data-purchaser-name  and data-recipient-email values if you have them, all other values are ignored.

<div class="gift-up-target" data-site-id="{YOUR GIFT UP ID}" data-purchaser-name="Lee" data-recipient-name="Alex" data-purchaser-email="" data-recipient-email=""></div>


2) Who the gift card is for

data-who-for :  Must be one of these values:

 - yourself
 - someoneelse
 - onlyme
 - onlysomeoneelse 

This pre selects (or hides) the following choice: 

<div class="gift-up-target" data-site-id="{YOUR GIFT UP ID}" data-who-for="someoneelse"></div>

Applying a promo code by default

If you're running a promotion that is activated by a code, you can automatically apply it by passing in data-promo-code 

<div class="gift-up-target" data-site-id="{YOUR GIFT UP ID}" data-promo-code="BLACKFRIDAY"></div>

Selecting the step of the checkout to display by default

If you have all the required information to make a purchase specified by the above data variables, you can skip to any page in the checkout you like. i.e. take the purchaser straight to the payment page by default.

To do this by supplying data-step  and providing one of two values: details  or payment  to take the user straight to either the details capture page or the payment page. 

<div class="gift-up-target" data-site-id="{YOUR GIFT UP ID}" data-purchaser-name="Lee" data-recipient-name="Alex" data-purchaser-email="" data-recipient-email="" data-step="payment"></div>

You do not need to worry about missing purchaser/recipient data. We handle this case and ensure we only take the purchaser to the step you direct us if the previous steps have had all the required data passed in also. 

i.e. we won't take the purchaser to the payment page, if the details page data is incomplete. In that case we'll take the purchaser to the details page to complete the required information.

Hiding the artwork at the top

If you prefer to not have your artwork shown you can pass in data-hide=artwork="true" 

<div class="gift-up-target" data-site-id="{YOUR GIFT UP ID}" data-hide-artwork="true"></div>
This will then not show any artwork above the items selection panel.

If you are using our hosted checkout

You can pass in all the above information into our hosted checkout via extra QueryString parameters instead. Here's a list of supported parameters in our hosted checkout: 

  • whofor 
  • purchaseremail 
  • purchasername
  • recipientemail 
  • recipientname 
  • step 
  • language 
  • promocode 
  • hideartwork 

The values and behaviour are as per the above instructions, the only difference is the way you pass them into the checkout.

You can get your hosted checkout URL from the installation section in the dashboard.

You will notice that the hosted checkout includes some information in the header, like company name/logo etc... You can turn this off by adding a QueryString parameter: justshowcheckout=true . This is great is you are embedding our hosted checkout into your app.

Did this answer your question?