Skip to content

Express Checkout Javascript SDK

Jump to bottom
arush edited this page Sep 27, 2016 · 7 revisions

There is a separate Javascript SDK for the Express Checkout, so be sure not to use the Try Button SDK.

Step 1. Include the Express Checkout Javascript SDK

Shopify

If you are on Shopify, we've made it easy for you to build the correct payload. The order will automatically sync to your Shopify customer because we link the order to the current cart session.

Your init script should look like this

<script async src="https://s3-us-west-1.amazonaws.com/trycom-canary/try.express-checkout.js"></script>
<script>
window.tryAsyncInit = function() {
  TrySDK.init("YOUR_PUBLIC_APP_KEY");

  // include the Shopify helpers
  TrySDK.shopifyHelpers={payload:{},configCache:{},getCart:function(a,b){$.ajax({type:"GET",url:"/cart.js",dataType:"json",cache:!1}).done(function(b){"function"==typeof a&&a(b)}).fail(function(a){"function"==typeof b&&b(a)})},isTryable:function(a){return!0},buildItem:function(a){var b=this,c="number"==typeof b.configCache.colorIsVariantOptionIndex?a.variant_options[b.configCache.colorIsVariantOptionIndex]:void 0,d="number"==typeof b.configCache.sizeIsVariantOptionIndex?a.variant_options[b.configCache.sizeIsVariantOptionIndex]:void 0,e={externalIdentifier:""+a.variant_id,tryable:b.isTryable(a),color:c,size:d,currency:b.configCache.currency,price:a.price,inventoryIdentifier:a.sku,originalPrice:a.original_price,product:{url:window.location.origin+a.url,brand:a.vendor,category:a.product_type,description:a.product_description,images:[a.image],title:a.product_title,externalIdentifier:""+a.product_id}};return e},buildItems:function(a){var b=this,c=[];return a.items.forEach(function(a,d,e){c.push(b.buildItem(a))}),c},checkout:function(a){var b=this;b.configCache=a,b.getCart(function(c){b.payload.redirectUrl=a.redirectUrl,b.payload.meta={shopifyCustomerId:a.shopifyCustomerId,shopifyCartToken:c.token},b.payload.items=b.buildItems(c),TrySDK.checkout.open(b.payload)},function(a){alert("Failed to retrieve cart, contact engineering@try.com"),console.error(a)})}};
}
</script>

Custom Platform

Copy and paste this HTML in the <head> of every page on your site. Don't worry, it doesn't affect your page load speed since it loads the scripts asynchronously. This code only loads and initializes the SDK. It does not inject the Checkout Button or make any changes to your customers' user experience.

<script async src="https://s3-us-west-1.amazonaws.com/trycom-canary/try.express-checkout.js"></script>
<script>
window.tryAsyncInit = function() {
  TrySDK.init("YOUR_PUBLIC_APP_KEY");
}
</script>

Step 2. Add a listener for your Checkout with Try.com Button

You are responsible for replacing your Checkout button with the “Checkout with Try.com” when your shopping cart contains tryable products.

Shopify

myButton.onClick = function() {

  var checkoutConfig = {
    redirectUrl: 'https://YOURDOMAIN.com/checkout-success.html',
    currency: 'USD',
    shopifyCustomerId: 'abc',
    colorIsVariantOptionIndex: 0,
    sizeIsVariantOptionIndex: 1,
  };

  TrySDK.shopifyHelpers.checkout(checkoutConfig);

}

This will open the Try.com Checkout UI that will guide the customer through the checkout process.

Custom Platform

myButton.onclick = function() {
  TrySDK.checkout.open({
    redirectUrl: "https://YOURDOMAIN.com/checkout-success.html",
    items: [{
      externalIdentifier: String, // variantId,
      inventoryIdentifier: String, // e.g. SKU or UPC
      tryable: Boolean,
      color: String,
      size: String,
      currency: 'USD',
      price: Number,
      originalPrice: Number,
      product: {
        url: String,
        brand: String,
        category: String,
        description: Option[String],
        images: [String],
        title: Option[String],
        externalIdentifier: String, // productId
      }
    }],
    meta: {
      // optional dictionary of key-value pairs which Try.com will pass back to you when we authorize the transaction. Put data in here that you require in order to create an order in your ecommerce system, e.g. cart_id or cookie
      cartToken: Option[String],
      customerId: Option[String],
    }
  });
};
Clone this wiki locally