Creating a Custom Purchase Flow ⚒️

Whether you use the Shopify online store, or have a completely unique storefront, you can leverage Gift Card Pro’s delivery and scheduling tools within your own user interface. Any product can be used to issue a gift card with Gift Card Pro, so long as it contains the same properties added by the application using the standard form.

To set up your basic html form to add a product to the cart in Shopify, use the following template. Once an order is created in Shopify, Gift Card Pro will look for the properties, and issue a gift card. If the “_gcp_delivery_time” property is set to “Send Later”, and a delivery date is selected, the Gift Card will be scheduled for that particular date and time.

<form method="post" action="/cart/add"accept-charset="UTF-8" enctype="multipart/form-data">

  <!-- Standard Shopify Inputs - not needed for headless commerce -->
  <input type="hidden" name="form_type" value="product">
  <input type="hidden" name="utf8" value="✓">

  <!-- Variant selection - controls the price of the issued gift card -->
  {%- for variant in product.variants -%}
  <label for="{{ variant.id }}">
  <input type="radio" id="{{ variant.id }}" value="{{ variant.id }}" name="id" {% if forloop.index == 1 %}checked{% endif %}/>
   {{ variant.title }}
  </label>
  {% endfor %}

  <!-- IMPORTANT: Ensure to disable and omit this field if sending to a recipient -->
  <label for="sendToSelf">Send to myself</label>
  <input disabled type="checkbox" id="sendToSelf" value="true" name="properties[_gcp_send_to_self]"/>

  <!-- Greeting card image url -->
  <input required name="properties[_gcp_selected_card_image]" type="hidden" value="https://via.placeholder.com/150" />

  <!-- Standard gifting inputs -->
  <label for="recipientName">Recipient’s Name</label>
  <input required type="text" id="recipientName" placeholder="Recipient’s Name" name="properties[_gcp_recipient_name]">

  <label for="recipientEmail">Recipient’s Email</label>
  <input required type="text" id="recipientEmail" placeholder="Recipient’s Email" name="properties[_gcp_recipient_email]">

  <label for="recipientMsg">Gift Message</label>
  <textarea type="text" id="recipientMsg" class="text-area field__input" placeholder="Enter gift message" name="properties[_gcp_message_text]"></textarea>

  <label for="senderName">From</label>
  <input required type="text" id="senderName" placeholder="Enter your name" name="properties[_gcp_message_from]">

  <!-- OPTIONAL: Ensure to validate for a valid mobile phone number, including the country code. eg. +18008881234 -->
  <label for="recipientPhone">Recipient’s Mobile Number</label>
  <input type="text" id="recipientPhone" placeholder="Recipient’s Mobile Number" name="properties[_gcp_recipient_phone]">

  <!-- Delivery date scheduler. If "Send Later" is selected, show the option to select a delivery date. -->
  <label for="sendNow">
    <input type="radio" id="sendNow" value="Send Now" name="properties[_gcp_delivery_time]">
    Send later
  </label>

  <label for="sendLater">
    <input type="radio" id="sendLater" value="Send Later" name="properties[_gcp_delivery_time]">
    Send later
  </label>

  <!-- Delivery date scheduler. Ensure to use a datetime-local input type. Show this if "Send later" is selected -->
  <label for="deliveryDate" class="field__label" >Delivery Date</label>
  <input type="datetime-local" id="deliveryDate" placeholder="Delivery Date" name="properties[_gcp_delivery_date]">

  <!-- Delivery date timezone -->
  <input name="properties[_gcp_delivery_timezone]" type="hidden" value="+10:00" />

  <!-- Recipient language -->
  <input name="properties[_gcp_locale]"type="hidden" value="en" />

  <!-- Optionally add in a video message to send to the recipient. Enter the url of the saved video in the below field -->
  <input name="properties[_gcp_video_url]" 	 type="hidden" value="" />
  <!-- The thumbnail image to use for the video -->
  <input name="properties[_gcp_thumbnail_image]" type="hidden" value="" />

  <!-- Leave this empty. For custom pricing, use the Shopify Draft Order API to create a custom priced product, containing all of the above properties -->
  <input name="properties[_gcp_custom_value]"type="hidden" value="" />

</form>

Once you have completed the order, the line item in Shopify should contain all of the properties added in the form:

Can't find the answer in our documentation?
Contact Support