Skip to main content

Integrated Cart with External Card Issuer

The Integrated Cart with External Card Issuer integration leverages the core technologies of Gift Card Market, allowing for gift card purchases at a wide range of local businesses, while using your existing platforms shopping cart/checkout process and the card issuer of your choice. This option supports a mixed basket where users can purchase a local gift card plus whatever else your existing platform sells in a single transaction.

This integration type will use a series of extensible Custom Components that you integrate into your existing storefront.

Search & Select Component will prompt the user with a search bar, and will generate search results with "add to cart" functionality.

Provisioning Custom Component will handle all card provisioning tasks, and will respond with an object containing the results of the provisioning operation.

Redemption Custom Component will initiate a One-Time Password (OTP) validation process. Upon successful completion, it will display a widget containing all the necessary details for gift card redemption.

Search & Select Component​

The Search & Select component will internally host the entire Giftcard Market Search experience.

The user will be presented with a search bar, search results with "Purchase Gift Card" buttons, and ultimately Add To Cart functionality.

The <gcm-search> component takes as props:

<gcm-search apikey={} css-overrides={}

apikey is the API Key provided to you by Giftcard Market to authenticate API calls css-overrides is an optional property that allows you to pass values to override the default styles for the component

User experience​

  • The component will present the user with a search bar

  • Search results will be presented to the user

  • Clicking Purchase Gift Card will present the user with purchase and delivery choices

Purchase card cart event​

The search component will emit the following event upon the user clicking Add to Cart or Buy Now:

gcm-cart-event

How the cart event works​

The event will include the following object as payload:

gcm-cart-event
{
  "event_name": < addtocart | buynow >,
  "business_id": string,
  "business_name": string,
  "amount": number,
  "delivery_method": < email | sms | print >,
  "recipient_name": string,
  "recipient_delivery_target": string,
  "sender_name": string,
  "message": string,
  "delivery_date": datetime,
}

Your existing web application is reponsible for registering a listener for this event, and responding to it appropriately.

Example event listener​

window.addEventListener('gcm-cart-event', function () {
  alert('Item Added to Cart');
  // You handle the event, putting the data into your cart
  ...
});

If the user chooses to have the card delivered on a future date, you can choose to either:

  • Provision the card now, store the results of the provisioning request, and deliver to the recipient on the selected date
  • Delay provisioning, and only create a card with the Provisioning API on the date of delivery

Provisioning component​

After the cart processes and confirms payment, the Provisioning Component is utilized to orchestrate the card creation with the Gift Card Market's card provisioning infrastructure.

Props for component​

The <gcm-provisioning> component accepts the following props:

<gcm-provisioning transaction-details="{}" apikey="{}" isMobile="{}" />

Transaction details​

transaction-details - A JSON object containing all pertinent details of the giftcard purchase transaction.

{
  "transaction_id": "string",
  "store_id": "string",
  "gift_cards": [
    {
      "gift_card_id": "string",
      "card_program": < restaurant | salon_and_spa | choose_your_own >,
      "redemption_method": < email | sms | print >,
      "recipient_name": "string",
      "recipient_email": "string",
      "recipient_phone_number": "string", // In E.164 Format
      "sender_name": "string",
      "sender_email": "string",
      "custom_message": "string",
      "currency": < usd >,
      "value": 0,  //In pennies
      "search_provider": < yelp | google >,
      "business_id": "string",
      "business_name": "string"
    }
  ]
}

apikey - The API Key provided to you by Giftcard Market to authenticate API calls

isMobile - If your user has selected SMS as the delivery method for a card, and is using a mobile device to make the purchase, set the isMobile property to true.

Response​

The component will emit the following event upon completion:

provisioning-response

The event will include the following object as payload:

provisioning-response
{
  "transaction_id": "string",
  "store_id": "string",
  "gift_cards": [
    {
      "gift_card_id": "string",
      "provisioned_card_id": "string",
      "url": "string"
    }
  ]
}

Your existing web application is reponsible for registering a listener for this event, and responding to it appropriately.

example event listener
window.addEventListener('provisioning-response', function () {
  document.getElementById('demo').innerHTML = 'Provisioning Has Finished';
  /// Record the returned data into your database
});

If isMobile is set to true, the component will display an HTML button which opens the native messaging application on the user device, allowing the purchaser to send the recipient a text message directly from their device.

Redemption Component​

The Redemption Component allows you to host your own Giftcard Redemption solution. The URL delivered to the recipient should point to your custom application domain.

Example

https://giftcard.mystore.com/redemption/{card-id}

Props for component​

The <gcm-redemption> custom component takes as props:

<gcm-redemption provisionedCardId="{}" apikey="{}" />

provisionedCardId - the card identifier that is passed in the link from the recipient

apiKey - The API Key provided to you by Giftcard Market to authenticate API calls

Response​

The Redemption Custom Component will then:

  • Prompt the user to initiate the One Time Password process

  • Prompt the user to complete the One Time Password and submit

  • If OTP validation is successful, the Redemption Component will then render the giftcard widget on the users browser.

Integrating GCM with your card issuer​

For integrating with an external card issuer, the following functionalities are required:

  • Provisiong & block cards in 1 operation
  • Facility to retrieve a secure url that is hosted from the provider that will be used to display inside the card widget
    • The initial request that provisions a card must pass back a unique identifier for the provisioned card
    • The request to get the secure url must be keyed off the unique identifier
  • Optionally provide external page for balances to be checked
    • Note that if a 'check balance' url is not provided, the card redemption experience will not render an option for a user to check their balance in the UI.

Card issuers that do not meet these specs can still be integrated with the provisioning component with additional custom integration support from the GCM. To learn more, contact our sales team.

Managing customer communication​

The redemption and provisioning components default setting will manage communication to the customer for all items related to redeeming a gift card and sending multifactor authentication codes.

If you do not want to have any communications go to customers outside of your dedicated communications channels, then a custom, enterprise implementation is required. Contact us for more information.

The following communication channels are included:

  • Gift card redemption email or text sent to a recipient
    • The email or sms will be delivered by GCM to the card recipient.
  • Multifactor authentication for accessing cards
    • GCM will send an SMS or Email authentication code to the recipient's phone or email for every time they try to access a gift card.

Note - The Gift Card Market will not send the redemption SMS in scenarios where purchasing users send the code to their contacts on a mobile device. In this scenario, the purchasing users are sending the redemption SMS from their local device.

How Redemption Works​

The high level flow for Redemption works as follows. Each step of this process will be handled by Gift Card Market. Additionally, we will coordinate with your existing card provider to build a custom integration for gift card provisioning and delivery.

  • User accesses Redemption application via embedded URL in text/email or QR Code/link text in printout
  • Application validates link
  • OTP (One time password) is generated and sent to email/sms of recipient
  • OTP entered by user in UI and validated
  • Business details are retrieved from the search provider
  • Card widget pulled from card issuer and UI is rendered

Redemption diagram

Mobile app integration​

You can make your mobile application seemlessly integrate with The Gift Card Market services.

  • This integration will require custom development
  • For most applications, the custom development for this can be completed within weeks.

White glove services​

GCM is able to assist with custom implementation development should your team need additional support. For more information on this, please contact us.