To activate Arrow on a Shopify store follow all these steps. Before you start, make sure you have a seller account with Arrow to obtain the Arrow merchant credentials.

1. Create Arrow Checkout as a custom app

To install Arrow as a ‘custom app’, you need to enable custom app development. Only the store owner can enable custom app development.

Steps:

  1. From your Shopify admin, go to Apps.
  2. Click Develop apps.
  3. Click Allow custom app development.
  4. Read the warning and information provided, and then click Allow custom app development.

Create the app

Now that you’ve enabled custom app development you can create a custom app.

  1. Click on Apps on the menu on the left side of the screen

  2. Select the “Develop apps” button on the top right corner of the app to get started.

19081908
  1. In the next window click "Create an App" on the top right corner and in the popup enter “Arrow Checkout” as App name and "[email protected]" as App developer

2. Configure Admin and Storefront API settings

Now that you’ve created an app you have to define the app access scopes (both Admin API and Storefront API)

12741274

Click configure next to “Admin API Integration” section to set the following properties and click save:

Field Name Access Setting
Customers Read and Write
Discounts Read and Write
Draft Orders Read and Write
Fulfillment Services Read and Write
Gift Cards Read and Write
Inventory Read and Write
Locations Read Access
Online Store Pages Read and Write
Order Editing Read and Write
Orders Read and Write
Price Rules Read and Write
Products Read
Shipping Read
Shop Locale Read
Store Content Read and Write

To enable Arrow checkouts to complete orders, enable the ‘Storefront’ API by clicking configure on the " Storefront API integration" section:

And under “Storefront API Permissions”, enable the following boxes:

  • Checkout (required)
    • unauthenticated_write_checkouts
    • unauthenticated_read_checkouts
  • Customers (required)
    • unauthenticated_write_customers
    • unauthenticated_read_customers
    • unauthenticated_read_customer_tags
  • Products (required)
    • unauthenticated_read_product_listings
    • unauthenticated_read_product_inventory
    • unauthenticated_read_product_pickup_locations
    • unauthenticated_read_product_tags
  • Selling plans
    • unauthenticated_read_selling_plans

Make sure to press “Save” at the bottom or top of the page after completing these steps.

3. Get the Admin API Access Token and Storefront API Access Token and add it to Arrow

The Shopify API tokens are needed for Arrow to interface with your Shopify store - without it Arrow checkout will not work with your store.

Get the Admin API Access Token and Storefront API Access Token

On your Arrow private app page, in the ‘Admin API’ section copy and save the Shopify Admin API Access Token and Storefront API Access Token into a safe place like a password manager. The API Key is needed for Arrow to connect with this Shopify store.

Get the Store ID

Copy the Shopify Store ID from your admin’s browser address bar, that is

{{store_id}}.myshopify.com"

Also copy your Store ID which is in the browser address bar when on the Shopify portal.

Share the Admin API Access Token, Storefront API Access Token and Store ID with the dev team to add them to the sellers account in Arrow. You only need to share this once with Arrow Dev team.

19501950

4. Add arrow.js to the theme.liquid file

To make sure the Arrow checkout button can appear the arrow.js client library and an encryption library need to be added to the checkout pages. This is done by modifying the Shopify theme.

Modify a Theme

In the left menu under “Sales Channel” -> My Store, select “Themes”. Then, on the section “Current Theme” in the Actions dropdown select “edit code”. This will take you to an editor where the Shopify code can be updated:

19991999

When on the “Edit Code” page, open the file “theme.liquid”:

19991999

Within the <head> tag add these script tags before the closing </head> tag:

Note: Make sure to replace {{your arrow client key}} with the Arrow client key for this store.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://shop.witharrow.co/cdn/arrow.js"></script>
<script
  defer
  type="text/javascript"
  src="https://arrow-cdn.s3.amazonaws.com/media/button/v1.03/arrow-button.js"
></script>
<script>
    jQuery(document).ready(function(){
      initArrow({
        clientKey: "your arrow client key"
      });
    });
</script>
<script>

  var clientId = 0;

  function getCookie(cname) {
    let fbp = document.cookie.split(';').filter(c => c.includes('_fbp=')).map(c => c.split('_fbp=')[1]);
    let fbc = document.cookie.split(';').filter(c => c.includes('_fbc=')).map(c => c.split('_fbc=')[1]);
    fbp = (fbp.length && fbp[0]) || undefined;
    fbc = (fbc.length && fbc[0]) || undefined;

    if(!fbc && window.location.search.includes('fbclid=')){
      fbc = 'fb.1.'+ (+new Date()) +'.'+ window.location.search.split('fbclid=')[1];
    }
    if (cname == "_fbp") {
      return fbp
    } else if (cname == "_fbc") {
      return fbc
    }
  }
  
function arrow_checkout_clicked() { 
 fetch('/cart.js') 
  .then(response => response.json()) 
  .then(data => {  
    var fbp = getCookie('_fbp');
    var fbc = getCookie('_fbc');
    clientId = ga.getAll()[0].get('clientId');
   
    var cartAll = data.items; 
      var cpAmt = 0;

      for (i = 0; i < cartAll.length; i++) {
        var curOptions = "";
        if (cartAll[i].variant_options != undefined){
          for (j = 0; j < cartAll[i].variant_options.length; j++) {
            curOptions += cartAll[i].variant_options[j];
            if (j < cartAll[i].variant_options.length - 1){
              curOptions += " , ";
            }
          }
        }

        cpAmt += cartAll[i].total_discount/100;

        arrowOrder.items.push(
          {
            name : cartAll[i].title,
            quantity : cartAll[i].quantity,
            image: cartAll[i].image,
            description : cartAll[i].product_description,
            option : curOptions,
            extraData : {"variant_id": cartAll[i].variant_id, properties: cartAll[i].properties}
          }
        );
      }

      if (cpAmt > 0) {
        arrowOrder.coupon = {"amount" : cpAmt}
      }

      arrowOrder.shipping =[
      ];

      var deliveryTime = $("input[name^='attributes[Delivery Time']").attr("name");
      var deliveryDateVal = $("input[name='attributes[Delivery Date]']").val();
      var deliveryTimeVal = $("input[name^='attributes[Delivery Time']").val();
      var deliveryDayVal = $("input[name='attributes[Delivery Day]']").val();
      var note_attributes = {};

      if (deliveryTime != undefined) {
        var matches = deliveryTime.match(/(\[(?:\[jQuery3210290589496665961_1645086608211[^\[]*?\]))/g);

        if (matches.length > 0) {
          var raw = matches[0].replace(/^\[(.+)\]$/,'$1')
          note_attributes[raw] = deliveryTimeVal;
        }
      }
      if (deliveryDateVal != undefined){
        note_attributes['Delivery Date'] = deliveryDateVal;
      }
      if (deliveryTimeVal != undefined){
        note_attributes['Delivery Time'] = deliveryTimeVal;
      }
      if (deliveryDayVal != undefined){
        note_attributes['Delivery Day'] = deliveryDayVal;
      }
      var notes = $("textarea[name='note']").val();

      arrowOrder.extraData = {};    

      if (note_attributes != {}){
        arrowOrder.extraData['note_attributes'] = note_attributes; 
      }
      if (notes != undefined){
        arrowOrder.extraData['notes'] = notes; 
      }
      arrowOrder.redirect = {
        "success" : window.location.origin + "/pages/order-successful",
        "fail" : window.location.origin,
        "cancel" : window.location.origin + "/cart"
      }
      
      if (document.getElementsByClassName("cpn_dcnt_price")[1] != undefined) {
        arrowOrder.promocode = document.getElementsByClassName("cpn_dcnt_price")[1].childNodes[0].innerText;
      }
      
      // arrowOrder.currency = {
      //   "base_currency": "IDR",
      //   "currency_symbol": "Rp"
      // }

      // arrowOrder.extraData['locale'] = "id"; 

      if(fbp !== undefined){
        arrowOrder.extraData['fbp'] = fbp; 
      }

      if(fbc !== undefined){
        arrowOrder.extraData['fbc'] = fbc; 
      }
   
      arrowOrder.extraData['event_source_url'] = window.location.href; 
   
      if (clientId != 0){
        arrowOrder.extraData['clientId'] = clientId;
      }
  
    launchArrowShopify(); 
  }); 
};
      const open = window.XMLHttpRequest.prototype.open;

      function openReplacement() {
        this.addEventListener("load", function () {
          if (
            [
              "/cart/add.js",
              "/cart/update.js",
              "/cart/change.js",
              "/cart/clear.js",
            ].includes(this._url)
          ) {
            cartJS = JSON.parse(this.response);
          }
        });
        return open.apply(this, arguments);
      }

      window.XMLHttpRequest.prototype.open = openReplacement;

      (function(ns, fetch) {
          if (typeof fetch !== 'function') return;

          ns.fetch = function() {
              const response = fetch.apply(this, arguments);

              response.then(res => {
                  if ([
                          `${window.location.origin}/cart/add.js`,
                          `${window.location.origin}/cart/update.js`,
                          `${window.location.origin}/cart/change.js`,
                          `${window.location.origin}/cart/clear.js`,
                      ].includes(res.url)) {
                      res.clone().json().then(data => cartJS = data);
                  }
              });

              return response;
          }

      }(window, window.fetch))

</script>

If you are setting up Arrow via Arrow QA environment you have to replace this script:

<script type="text/javascript" src="https://shop.witharrow.co/cdn/arrow.js"></script>

with the snippet below:

 <script>
    const arrowHost = "https://qa-hi.projectarrow.co";
    const arrowAPI = "https://qa-yo.projectarrow.co/api";
  </script>
<script type="text/javascript" src="https://qa-hi.projectarrow.co/cdn/arrow.js"></script>

and

Note: weight: cartAll[i].grams / 1000, is only needed if your product has weight data.

Press ‘Save’ in the upper right corner to save these changes.
Note, jquery is mandatory if your site doesn’t have jquery installed yet. If you’re not sure, please reach out to the dev team.

At times, we need to add the Shopify GET cart ajax call when calling arrow_checkout_clicked() to ensure we get the cart’s items.

function arrow_checkout_clicked() { 
 fetch('/cart.js') 
  .then(response => response.json()) 
  .then(data => {  
    var cartAll = data.items; 
     ......... 
    launchArrowShopify(); 
  }); 
};

Lastly if we want to enable language of the checkout to be localised (for now we only offer localisation to Bahasa Indonesia) you have to add this code snippet after "arrowOrder.extraData" has been defined in the function:

 arrowOrder.extraData['locale'] = "id";

5. Add 'successful' or 'cancelled' handlers

To help shoppers see the result of their checkout on this store we add these handlers to direct them to the right page after their checkout on Arrow is completed or cancelled.

In the ‘theme.liquid’ file in the ‘Layout’ folder, add the following script within the <body> tag:

<script>
    var checkoutWindow;
    
    function checkout_cancel() {
      window.location.href = window.location.origin + "/cart";
    }
    
    function checkout_success() {
      window.location.href = window.location.origin + "/pages/order-successful";
    }
    
    window.addEventListener("message", function(event) {
      var data = event.data;
      if (data && data.message) {
        if (data.message == "checkout_success") {
            checkout_success();
        } else if (data.message == "checkout_cancel") {
            checkout_cancel();
        }
      }
    });
    var cartJS = {{cart | json }};
</script>

6. Add the Arrow Checkout button on the cart page

After loading the required arrow.js in the Shopify theme, we proceed to add the Arrow checkout button on the cart page.

To enable Arrow checkout on the cart page we want to load the checkout button. The Arrow checkout button can be added in different areas of the Shopify code, and the code may look different depending on what Shopify theme is installed on your website.

A typical set up is, to customise the Shopify cart page, while still in the code editor for your theme, in the “Sections” folder, open the file “cart-template.liquid”. The following is the code for the Arrow Checkout button:

<div class="arrow-checkout-block"></div>

This code will create a button that looks like this:

11851185

Deciding where you want the Arrow Checkout button to be positioned is up to you.

We strongly recommend that you locate the existing checkout button on the cart page, and position it just above it. To locate, look for a button with the value being “'cart.general.checkout'”.

Styling might need adjustment according to your site theme.

Again press ‘Save’ in the upper right corner to save these changes to the ‘cart-template.liquid’ file.

Lastly, here are the possible data value for arrow-checkout-block:

Data Value Description
data-type Default = none

If set to "product" it will call the function buy() instead of arrow_checkout_clicked()

data-brand-visa Show/Hide Visa Branding; Default = false; values = "true"/"false"
data-brand-master Show/Hide Mastercard Branding; Default = false; values = "true"/"false"
data-brand-paynow Show/Hide Paynow Branding; Default = false; values = "true"/"false"
data-brand-jcb Show/Hide JCB Branding; Default = false; values = "true"/"false"
data-brand-union Show/Hide Union Branding; Default = false; values = "true"/"false"
data-brand-american Show/Hide American Express Branding; Default = false; values = "true"/"false"
data-brand-atome Show/Hide Atome Branding; Default = false; values = "true"/"false"
data-brand-grab Show/Hide GrabPay Branding; Default = false; values = "true"/"false"
data-brand-fpx Show/Hide FPX Branding; Default = false; values = "true"/"false"
data-brand-cimb Show/Hide CIMB Branding; Default = false; values = "true"/"false"
data-brand-maybank Show/Hide Maybank Branding; Default = false; values = "true"/"false"
data-brand-bank_bri Show/Hide Bank Rakyat ID Branding; Default = false; values = "true"/"false"
data-brand-bca Show/Hide Bank Central Asia Branding; Default = false; values = "true"/"false"
data-brand-bni Show/Hide Bank Raykat Indonesia Branding; Default = false; values = "true"/"false"
data-brand-shopppay Show/Hide ShopeePay Branding; Default = false; values = "true"/"false"
data-brand-link_aja Show/Hide LinkAja Branding; Default = false; values = "true"/"false"
data-brand-ovo Show/Hide OVO Branding; Default = false; values = "true"/"false"
data-brand-dana Show/Hide Dana Branding; Default = false; values = "true"/"false"
data-brand-akulaku Show/Hide Akulaku Branding; Default = false; values = "true"/"false"
data-brand-mandiri Show/Hide Mandiri Branding; Default = false; values = "true"/"false"
data-brand-permata Show/Hide Permata Branding; Default = false; values = "true"/"false"
data-brand-touch_n_go Show/Hide TouchNGo Branding; Default = false; values = "true"/"false"

Mini cart / Side cart (optional):

If you have a side cart / mini cart, you can add the same code to the section. Side/mini cart code is usually located under “Snippet”, with file title containing “cart” (e.g. mini-cart.liquid).

<div class="arrow-checkout-block"></div>

Extra notes

  • At times, mini cart is only rendered when it is toggled to open, and therefore the initial arrowInit() function called would not have the opportunity to attach the CSS and JS code to arrow-checkout-block inserted in mini cart. We would need to re-trigger the arrowInit() function after the mini cart is properly rendered in such a situation.
  • When there are additional CSS treatment to be done on the checkout button, you can leverage on the data-scripts label to call a custom function upon completing of button load. Example:
<script>
function arrow_add_css() {
      var arrowElement = document.getElementsByClassName('reset-this arrow-f arrow-fc arrow-jsb')[0];
      arrowElement.style["margin-left"] = "auto";
      arrowElement.style["margin-right"] = "0"
}
</script>

<div class="arrow-checkout-block" data-scripts="arrow_add_css()"></div>

7. Add Arrow checkout button on the product page

Follow these steps to have an SKU button, note that the configuration for the button is dependent on your store’s theme on Shopify. These steps can be followed exactly when using the Basic Theme.

First, navigate to the “product-template.liquid” file under the Section folder and locate the position of the “Add to Cart” button code. (at times, the file is a custom snippet that is nested within the product-template.liquid file).

Sometimes the buy button is in a different file so you can download the entire theme file and search it using your editor of choice (e.g. sublime text).

After this line, add the following code snippet (Note the additional data-type=”product” needed, which will call the buy() function instead of arrow_checkout_clicked())

512512
<div class="arrow-checkout-block" data-type="product"></div>

After completing this step, you will need to add another code snippet at the very end of the same “product-template.liquid” file. This code snippet can be added on the most bottom of the page, at line 775 or below if there is code already on this line.

The code snippet that should be added at this point is as follows:

<!--  Arrow Checkout For Product Page-->
<script>
  function getQueryParam(name) {
    var q = window.location.search.match(new RegExp('[?&]' + name + '=([^&#]*)'));
    return q && q[1];
  }
  
 function buy() {
   var clientId = 0;
   var fbp = getCookie('_fbp');
   var fbc = getCookie('_fbc');
   clientId = ga.getAll()[0].get('clientId');
   
   var product = {{ product | json }};
   var cur_quantity = document.querySelector('input[aria-label="Quantity"]').value;
   var variant1 = "";
   var opt1 = document.querySelector('#ProductSelect-product-template-option-0');
   if (opt1 != null) {
     variant1 = opt1.value;
   }
   var variant2 = "";
   var opt2 = document.querySelector('#ProductSelect-product-template-option-1');
   if (opt2 != null) {
     variant2 = opt2.value;
   }
   var variant3 = "";
   var opt3 = document.querySelector('#ProductSelect-product-template-option-2');
   if (opt3 != null) {
     variant3 = opt3.value;
   }
   var variant_title = variant1;
   if (variant2 != "") {
     variant_title += " / " + variant2;
   }
   if (variant3 != "") {
     variant_title += " / " + variant3;
   }
   var product_variants = product.variants;
   var variant_id = 0;
   var weight = 0;
   var image = null;
   
   if (getQueryParam('variant') != null) {
     for(var i=0;i < product_variants.length;i++) {
       if (product_variants[i].id == getQueryParam('variant')){
         variant_id = product_variants[i].id;
         variant_title = product_variants[i].title;
         image = product_variants[i].featured_image;
         weight = product_variants[i].weight;
         break;
       }
     }
   } else {
     for(var i=0;i < product_variants.length;i++) {
       if (product_variants[i].title == variant_title){
         variant_id = product_variants[i].id;
         weight = product_variants[i].weight;
         image = product_variants[i].featured_image;
         break;
       }
     }
   }
   
   if (!!image) {
        image = image.src;
   } else {
        image = "https:" + product.images[0];
   }
   if (variant_id == 0){
     variant_id = product.variants[0].id;
     variant_title = product.variants[0].title;
     weight = product.variants[0].weight;
   }
   arrowOrder.items.push(
     {
       name : product.title,
       quantity : cur_quantity,
       image: image,
       weight: weight / 1000,
       description : product.description,
       option : variant_title,
       extraData : {"variant_id":variant_id, properties: product.properties}
     }
   );
   arrowOrder.shipping =[
   ];
   arrowOrder.extraData = {
     "cart_id": 1
   };
   arrowOrder.redirect = {
     "success" : window.location.origin + "/pages/order-successful",
     "fail" : document.location.href,
     "cancel" : document.location.href
   }
   
      
   if(fbp !== undefined){
     arrowOrder.extraData['fbp'] = fbp; 
   }

   if(fbc !== undefined){
     arrowOrder.extraData['fbc'] = fbc; 
   }

   arrowOrder.extraData['event_source_url'] = window.location.href; 

   if (clientId != 0){
     arrowOrder.extraData['clientId'] = clientId;
   }
   
   launchArrowShopify();
 }
</script>

Note: weight: weight / 1000, is only needed if your product has weight data.

If you are using a custom theme, you will need to make a slight change in the above code since custom themes have different configurations.

Within the “buy” function we have given above that you would have copied, there is a section towards the bottom reading:

arrowOrder.items.push(
     {
       name : product.title,
       quantity : cur_quantity,
       image: image,
       weight: weight / 1000,
       description : product.description,
       option : variant_title,
       extraData : {"variant_id":variant_id, properties:product.properties}
     }
   );

When using a custom theme, you will need to build this exact data depending on the custom theme you are using as custom themes may have different names, different selectors, etc. Therefore, these fields will need to be adapted to fit your custom theme’s configurations.

Technical note for fetching variant and quantity data:

You can look for product quantity by fetching quantity spinner / dropdown value, for example:
document.querySelector('#ProductSelect-product-template-option-1').value

Or

document.querySelector('.js-qty__num').value

You can look for product variants by looking at theme.js or theme.js.liquid file, and then look for variant change triggers. On variant trigger, pass the selected variant data to product-template.json code.
You can pass quantity data from theme.js or theme.js.liquid file also, if querySelector doesn’t fetch updated quantity. Look for product quantity triggers and pass the updated quantity to product-template.json code

For using jQuery to select the existing selected value from a <select> tag:

var opt1 = $("select#SingleOptionSelector-0").children("option:selected").val();

Another example of fetching variant value, where options are provided in a list, and the currently selected one having assigned an active class:

var opt1 = document.getElementsByClassName('lh-swatch-select lh-exists active')[0];
if (!!opt1) {
   variant1 = opt1.dataset.value;
}

Another way to fetch the right variant if the other methods fail is fetch the variant id from the back of the URL using the following function and inserting it into product.liquid

 function getQueryParam(name) {
    var q = window.location.search.match(new RegExp('[?&]' + name + '=([^&#]*)'));
    return q && q[1];
  }

For handling sold out buttons and hide Arrow checkout button:

You can go to theme.js.liquid file, and look for _updateAddToCart function (look for “updateAddToCart”, as sometimes it could be slightly different, such as “_updateAddToCartButton”)

Assign the product page Arrow checkout block a special ID, and use show() or hide():
$('#cart-arrow-checkout-wrapper').show();
$('#cart-arrow-checkout-wrapper').hide();

to show and hide the Arrow checkout button according to the case. \

713713

At times, we ought to try looking for the SKU-change function in theme.js/theme.js.liquid, passing it an arrowVariant variable so that we can just conveniently obtain the right variant that is being selected when the buy() function is triggered.

For example, the currently selected variant might be initialised under the function ​​_getVariantFromOptions(), with any changes in selection made by user triggered under function _onSelectChange.

8. Add the 'successful order' page

To redirect shoppers to the page that shows their order is successful we need to create that page as a template.

Add the template

In the “Templates” folder create a new template by clicking the “Add a new template” link at the top of the list. Select “page” and select “liquid” as template type and give it the name “checkout-success”. (ie. page.checkout-success.liquid)

On the first line of the new template, add the new script:

<script>
    $(window).on('load', function () {
        $.ajax({
         type: "POST",
         url: '/cart/clear.js',
         success: function(){ window.location.replace(window.location.origin + "/pages/thanks-for-your-order");  },
         dataType: 'json' });
    });
</script>

Once added the template should look like this:

925925

After adding the text press “Save” to save the new page.

Add the page

Once the template has been made, we need to create two new pages that the user will land in. To do so go to “Pages” in the left menu under.

907907

This will redirect you to a page that will be empty if you have not created any new pages, if this is the case you can create a new page by selecting the “Add page” button.

18701870

However, if you have created new pages before, select the “Add page” button on the top right.

11561156

This will redirect you to a set of fields that need to be filled. For the first page we are only going to make two changes. We will set the Title to “Thanks For Your Order” and then set the Content to “Your purchase will be delivered soon. Thank You!” The page should look like this:

18861886

After adding the text press “Save” to save the new page.

When you return to the “Pages” site, select the “Add page” button to create the second new page. For this page, set the Title to “Order Successful” and set the Content to “Thank you for your order!”

Once the theme is published to live, the additional change we will make for this page is: in the right menu go to “select a template for this page” and select the template you just created -> “checkout-success” from the dropdown. This page will clear the customer cart after the order is confirmed. The page should look like this:

18861886

Press “Save” to save this new page as well.

Remember that only the “Order Successful” page should have the template changed. Not both pages.

9. Connect Arrow with Shopify webhooks

There are certain events that happen on Shopify that needs to be notified to Arrow so that Arrow can perform the necessary next steps: a key example being, when a refund is initiated on the Shopify dashboard, to process the refund via the merchant-installed gateway.

In the left menu on the shopify go to Settings, in Settings go to the Notifications menu.

In the Notifications menu, scroll down to the Webhooks section.

634634 19301930 10411041

In the Webhooks section, select ‘Create Webhook’ to create a webhook.

In the url enter:

http://stg-yo.projectarrow.co/api/webhook/shopify/{{ your client key }} 

Note: If installation is performed for production usage, endpoint would be https://fly.witharrow.co/api/webhook/shopify/{{ your client key }} instead

Replace {{your client key}} with the Arrow API client key.

Select the latest stable version for API version, and ‘JSON’ for format

Do the same for the following events, and use the same URL for each:

Order creation

Order fulfillment

“Order Cancellation

Refund create

You should now have 4 webhooks configured for:

  • Order cancellation
  • Order creation
  • Order fulfillment
  • Refund create
14451445

👍

Congratulations, with these steps you have now added Arrow Checkout for your Shopify Store.

To verify that everything is working, try checking out on your store with Arrow.

Make sure you see the ‘Checkout with Arrow’ button appear. If you have items in your cart try checking out by clicking Arrow and completing an order.

💬 We're here to help!

If anything is not right, double check if everything is configured as in this guide, if it is, reach out to Arrow support to get help with your setup ( [email protected] )