Connect Ordergroove with Bolt

The Ordergroove integration enables merchants to offer subscriptions to their customers. It is currently compatible with the SFCC platform.

About OrderGroove Product Subscriptions

When a shopper visits a product page in your storefront that you’ve made available for subscriptions, they can choose to make a one-time purchase or sign up for a recurring purchase.

Example product available for subscriptions

Bolt is partnering with Ordergroove to bring you the ability to offer subscriptions, with the addition of the extensive Bolt Network and our trusted authentication and payments orchestration layers.

Benefits

Merchant Benefits	Shopper Benefits
Move from a one-and-done transaction model to curating ongoing, frictionless relationships.	Gain a personalized shopping experience.
Increase customer lifetime value (CLV).	Enjoy a more convenient method of paying for regularly used products.
Lock in predictable recurring revenue.	Save through promotions or discounts at enrollment.
Grow average order value (AOV).

Subscription Management

Ordergroove’s RC3 dashboard enables you to manage shoppers' subscriptions and perform other relationship management actions.

If a transaction includes a product subscription, the transaction details view in the Bolt Merchant Dashboard includes a link to the subscription management area in the RC3 dashboard.

Set Up Ordergroove Integration

Before You Start

Merchants must have implemented the following Bolt settings:

Bolt Checkout
Cart that supports the Ordergroove integration (SFCC)
- • Refer to the SFRA Installation Guide for setup steps.

Merchants must have completed the following Ordergroove setup steps:

Download the Ordergroove integration into your workspace.
Use the Ordergroove SFCC Installation Guide (included in the downloaded cartridge files) to set up the cartridge.
Grant Bolt access to your Ordergroove RC3 dashboard (contact your Bolt customer success manager to determine who needs access).

INFO

If you have existing subscriptions with Ordergroove, please contact your Bolt customer success manager to perform a migration so your existing subscriptions continue to process correctly.

Implementation

Connect Bolt and Ordergroove

Obtain Ordergroove Account Keys

Contact your Ordergroove account representative to obtain the following keys:

API private key
API username
Customer private key
Public ID
SFTP username
SFTP password

Obtain Ordergroove Webhook Key

Log into the Ordergroove RC3 dashboard and navigate to Account > Developers > Webhooks.
Locate Verification Key and select Show.
Copy this key for use in a later step. This is the webhook private key.

Add Keys to Bolt

Contact your Bolt customer success manager and send the six Ordergroove account keys and the Ordergroove webhook private key. The CSM will work with the technical team to connect your Bolt and Ordergroove accounts.

Enable Ordergroove Webhook

Log into the Ordergroove RC3 dashboard and navigate to Account > Developers > Webhooks.
Select Enabled.
Add the URL for your environment type:
- • Prod: https://api.bolt.com/v1/webhooks/ordergroove
- • Sandbox: https://api-sandbox.bolt.com/v1/webhooks/ordergroove

Configure Payment Method Updater

To enable shoppers to update their payment method from their merchant storefront account, embed the payment method updater component in the page where a shopper can manage their subscriptions.

The appropriate steps vary based on whether you have implemented Bolt SSO.

Load Bolt Script

Log into the Ordergroove RC3 dashboard and navigate to Subscriptions > Management Interface > Code Editor.
Locate the /scripts folder and click script.js.
Paste the following code at the bottom, replacing EMBED_SCRIPT with the appropriate environment script:
- • Production: https://connect.bolt.com/embed.js
- • Sandbox: https://connect-sandbox.bolt.com/embed.js

With SSO

const script = document.createElement('script');
// replace with the appropriate script
script.src = "EMBED_SCRIPT";
script.onload = () => {
    // replace with your publishable key
    const boltInstance = window.Bolt('PUBLISHABLE_KEY');     
    // create embedded element instance
    const element = boltInstance.create("payment_selector");
    // maincontent should be the top level element wrapping the 
    // entire page
    const maincontent = document.getElementById('maincontent');
    
    
    // mount it on a top dom element
    if (maincontent) {
        element.mount(maincontent);    
    }
    
    // listen to the click function to toggle the embedded PMU to open
    document.addEventListener('click', async function (event) {
        const eventTarget = event.target;
        if (eventTarget.getAttribute('data-bolt-id') !== 'bolt-update-payment-button') return;
        const result = await element.selectPayment();
      
      // get the result. 
      // refer to https://help.bolt.com/add-ons/subscriptions/payment-selector/#merchants-without-bolt-sso for all cases
        console.log(result);

        // update the card in the UI without refreshing the page
        // this is an example; you can also choose to implement a hard refresh
        if (result.credit_card) {
          updatePaymentMethod(result.credit_card);    
      }
    }, false)


    const updatePaymentMethod = (newCard) => {
        const ccLast4 = document.querySelectorAll('[data-bolt-id="bolt-billing-last-4"]');
        const ccIssuer = document.querySelectorAll('[data-bolt-id="bolt-billing-cc-type"]');
        const ccExp = document.querySelectorAll('[data-bolt-id="bolt-billing-expiry-date"]');
        
        if (ccLast4.length) {
            ccLast4.forEach(last4Field => {
                last4Field.textContent = `Ending in ${newCard.last4}`;    
            })
        }
        
        if (ccIssuer.length) {
            ccIssuer.forEach(issuerField => {
                issuerField.textContent = newCard.display_network;
            })
        }
        
        if (ccExp.length) {
            ccExp.forEach(expField => {
                expField.textContent = `Expires ${getCardExpiry(newCard)}`    
            })
        }
    }

    const getCardExpiry = (newCard) => {
        if (!newCard.expiration) return null;
        const expiryDate = new Date(newCard.expiration);
        console.log(newCard.expiration);
        // get month + 2. getMonth() starts at 0 and 31st July (getMonth() is 6) we will show expires August (8)
        // 8 - 6 = 2 difference
        let expiryMonth = expiryDate.getMonth() + 2; 
        expiryMonth = ('0' + expiryMonth).slice(-2);
        let expiryYear = expiryDate.getFullYear();
      
        // when end date is 31st of Dec(12/98), above will return (13/98)
        // need to change to (01/99)
        if (expiryMonth === '13') {
            expiryMonth = '01';
            expiryYear += 1;
        }
        return `${expiryMonth}/${expiryYear}`;
    }
}
document.head.appendChild(script);

Without SSO

const script = document.createElement('script');
// replace with the appropriate script
script.src = "EMBED_SCRIPT";
script.onload = () => {
    // replace with your publishable key
    const boltInstance = window.Bolt('PUBLISHABLE_KEY');     
    // create embedded element instance
    const element = boltInstance.create("payment_selector");
    // maincontent should be the top level element wrapping the 
    // entire page
    const maincontent = document.getElementById('maincontent');
    
    
    // mount it on a top dom element
    if (maincontent) {
        element.mount(maincontent);    
    }
    
    // listen to the click function to toggle the embedded PMU to open
    document.addEventListener('click', async function (event) {
        const eventTarget = event.target;
        if (eventTarget.getAttribute('data-bolt-id') !== 'bolt-update-payment-button') return;
        // get the external user id
        const externalSubscriptionUserID = eventTarget.getAttribute('data-external-subscription-user-id');
        const result = await element.selectPayment({ externalSubscriptionUserID });
      
      // get the result. 
      // refer to https://help.bolt.com/add-ons/subscriptions/payment-selector/#merchants-without-bolt-sso for all cases
        console.log(result);

        // update the card in the UI without refreshing the page
        // this is an example; you can also choose to implement a hard refresh
        if (result.credit_card) {
          updatePaymentMethod(result.credit_card);    
      }
    }, false)

    const updatePaymentMethod = (newCard) => {
        const ccLast4 = document.querySelectorAll('[data-bolt-id="bolt-billing-last-4"]');
        const ccIssuer = document.querySelectorAll('[data-bolt-id="bolt-billing-cc-type"]');
        const ccExp = document.querySelectorAll('[data-bolt-id="bolt-billing-expiry-date"]');
        
        if (ccLast4.length) {
            ccLast4.forEach(last4Field => {
                last4Field.textContent = `Ending in ${newCard.last4}`;    
            })
        }
        
        if (ccIssuer.length) {
            ccIssuer.forEach(issuerField => {
                issuerField.textContent = newCard.display_network;
            })
        }
        
        if (ccExp.length) {
            ccExp.forEach(expField => {
                expField.textContent = `Expires ${getCardExpiry(newCard)}`    
            })
        }
    }

    const getCardExpiry = (newCard) => {
        if (!newCard.expiration) return null;
        const expiryDate = new Date(newCard.expiration);
        console.log(newCard.expiration);
        // get month + 2. getMonth() starts at 0 and 31st July (getMonth() is 6) we will show expires August (8)
        // 8 - 6 = 2 difference
        let expiryMonth = expiryDate.getMonth() + 2; 
        expiryMonth = ('0' + expiryMonth).slice(-2);
        let expiryYear = expiryDate.getFullYear();
        
        // when end date is 31st of Dec(12/98), above will return (13/98)
        // need to change to (01/99)
        if (expiryMonth === '13') {
            expiryMonth = '01';
            expiryYear += 1;
        }
        return `${expiryMonth}/${expiryYear}`;
  }
}
document.head.appendChild(script);

Override External Payment Link

By default, this component renders the payment method updater in a new tab. For this integration, we recommend overriding this functionality and embedding the component in your storefront for a more seamless user experience.

Locate the /views folder and click billing-shipping-details.liquid. This file controls the subscription management page.
Locate this code block (around line 39):

{% if 'external_payment_enabled' | setting %}
  <a class="og-link og-edit-payment" href="{{ 'external_payment_url' | setting }}">{{ 'shipment_unsent_footer_billing_edit' | t }}</a>
{% endif %}

and replace it with the following code:

With SSO

Without SSO

Update Card Details in Storefront

To trigger updatePaymentMethod() to update the card details in the storefront UI, add data-bolt-id elements to the subscription management page.

Locate the /views folder and click billing-shipping-details.liquid. This file controls the subscription management page.
Locate this code block (around line 28):

<div og-payment-id="{{payment.public_id}}">
      <span class="og-payment-type">
          {{ payment.cc_type }} {{ payment_method_names[payment.payment_method] }}
      </span>
      {% if payment.cc_number_ending %}
        {{ 'form_billing_ending_in' | t }}
      {% endif %}
    </div>
    <div class="og-payment-expiration-date">
      {% if payment.public_id %}
        {{ 'form_billing_expiration_date' | t }}
      {% endif %}
    </div>

and replace it with the following:

<div og-payment-id="{{payment.public_id}}">
      <span class="og-payment-type">
          <span data-bolt-id="bolt-billing-cc-type">{{ payment.cc_type }}</span> {{ payment_method_names[payment.payment_method] }}
      </span>
      {% if payment.cc_number_ending %}
        <span data-bolt-id="bolt-billing-last-4" class="og-payment-last-4">{{ 'form_billing_ending_in' | t }}</span>
      {% endif %}
    </div>
    <div class="og-payment-expiration-date">
      {% if payment.public_id %}
        <span data-bolt-id="bolt-billing-expiry-date" class="og-exp-date">{{ 'form_billing_expiration_date' | t }}</span>
      {% endif %}
    </div>

Enable Ordergroove in SFCC

Log into SFCC and navigate to Merchant Tools > RefArch > Site Preferences > Custom Preferences > Ordergroove.
Locate the OrderGrooveEnable setting and set it to yes.

Enable Feature in Ordergroove

Contact Ordergroove and request enablement of the feature Batch order placement.

Set Up Frequencies in Bolt

This one-time setup step ensures that the order frequencies you have configured with Ordergroove match what shoppers see on the product page.

Go to your Ordergroove RC3 dashboard.
Navigate to Experiences > Subscriptions > Enrollment and find the HTML Source section.
In another tab, log into the Bolt Merchant Dashboard and navigate to Settings.
For each frequency that appears in the Ordergroove RC3 dashboard, configure a matching frequency in the Bolt Merchant Dashboard.

WARNING

If you modify the frequency configuration in RC3 in the future, make sure you also modify the frequency configuration in the Bolt Merchant Dashboard to match.

Connect Ordergroove with Bolt

About OrderGroove Product Subscriptions

Benefits

Subscription Management

Set Up Ordergroove Integration

Before You Start

Implementation

Connect Bolt and Ordergroove

Obtain Ordergroove Account Keys

Obtain Ordergroove Webhook Key

Add Keys to Bolt

Enable Ordergroove Webhook

Configure Payment Method Updater

Load Bolt Script

With SSO

Without SSO

Override External Payment Link

With SSO

Without SSO

Update Card Details in Storefront

Enable Ordergroove in SFCC

Enable Feature in Ordergroove

Set Up Frequencies in Bolt

Filter by Section

Filter by Topic