npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-native-shopify

v0.2.7

Published

React Native bridge for Shopify Mobile Buy SDK for iOS and Android

Downloads

53

Readme

react-native-shopify

Getting started

$ npm install react-native-shopify --save

Including Mobile-BUY-SDK

Include the Shopify Mobile Buy SDK in your project to make it available to the bridge. Follow the instructions on their Github page to get started. For example, the recommended and easiest way for iOS is to install it as a Pod. This project will look for headers in the Pods directory.

Mostly automatic installation

$ react-native link react-native-shopify

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-shopify and add RNShopify.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRNShopify.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Android

  1. Open up android/app/src/main/java/[...]/MainActivity.java
  • Add import com.reactnativeshopify.RNShopifyPackage; to the imports at the top of the file
  • Add new RNShopifyPackage() to the list returned by the getPackages() method
  1. Append the following lines to android/settings.gradle:
    include ':react-native-shopify'
    project(':react-native-shopify').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-shopify/android')
  2. Insert the following lines inside the dependencies block in android/app/build.gradle:
    compile project(':react-native-shopify')

Usage

Initialize the shop.

import Shopify from 'react-native-shopify';

Shopify.initialize('yourshopifystore.myshopify.com', 'YOUR API KEY');

Fetch shop data, collections and tags


Shopify.getShop().then(shop => {
  // Save the shop somewhere and use it to display currency and other info
  return getAllCollections();
}).then(collections => {
  // Do something with collections
  return getAllTags();
}).then(tags => {
  // And tags...
});

// You shoud load collections and tags from Shopify recursively since each query is
// limited to 25 results by the SDK. Here are some methods to help you out:

const getAllCollections = (page = 1, allCollections = []) =>
  Shopify.getCollections(page).then((collections) => {
    if (_.size(collections)) {
      return getAllCollections(page + 1, [...allCollections, ...collections]);
    }
    return allCollections;
  });

// The same goes for tags...

const getAllTags = (page = 1, allTags = []) =>
  Shopify.getProductTags(page).then((tags) => {
    if (_.size(tags)) {
      return getAllTags(page + 1, [...allTags, ...tags]);
    }
    return allTags;
  });

// At last, fetch the first page (25) of products:

Shopify.getProducts().then(products => {
  // Show products to your users
});

// You can also fetch products for a specific page and collection ID

Shopify.getProducts(2, collectionId).then(products => {});

Products

Search products by tags


Shopify.getProducts(1, collectionId, ['t-shirts']).then(products => {});

Products by tag

Add products to cart and proceed to checkout

A product has several variants. For example, a sweater in various sizes and colors. You add variants for products to the cart. A cart item is defined as a tuple of item, variant and quantity.

You can perform a native or web checkout. Contributions for Apple Pay are welcome! The steps below describe the native checkout flow.

Add item to cart

Add to cart

Proceed to checkout

Cart


// Add the first variant of the first fetched product, times 2:
Shopify.getProducts().then(products => {
  const firstProduct = products[0];

  // Note that you should set product and variant objects, not IDs.
  // Also note that the key for product is item
  const cartItem = {
    item: firstProduct,
    variant: firstProduct.variants[0],
    quantity: 2,
  };

  const cart = [cartItem];

  // Pass a clone of your cart because the SDK will mutate it
  Shopify.checkout(_.cloneDeep(cart)).then(() => {
    // We're ready to collect customer information
  }).catch((error) => {
    // You'll get a user friendly message here informing you exactly
    // what's wrong with the checkout and which items are not available.
    // The bridge parses native errors and constructs this message.
    Alert.alert(
      'Error with checkout',
      error.message,
    );
  });
});

Collect customer information

Customer information form


const email = '[email protected]';

const addressInformation = {
  // Use the same properties as described in Shopify's iOS and Android SDK documentation
};

Shopify.setCustomerInformation(email, addressInformation).then(() => {
  // Fetch shipping rates
  return Shopify.getShippingRates();
}).then((shippingRates) => {
  // Let the user choose a shipping rate
  // Select a shipping rate by index - 0 for the first rate:
  return Shopify.selectShippingRate(0);
}).then(() => {
  // You're ready to collect payment information
});

Collect payment information

Payment information form


const creditCard = {
  // Use the same fields as in Shopify's SDK documentation
  // The only exception is that instead of nameOnCard you use firstName and lastName
};

Shopify.completeCheckout({ ...creditCard }).then((order) => {
  // Congratulations, you got a new customer!
  // You get back the order object created from the successful checkout
});

Products

What can you do with it?

You can browse through all products or filter them by collection and tag. You can call native checkout methods for both iOS and Android. We support web checkout for iOS but we have yet to implement the handlers for order completion so you can clear the cart or redirect the user to another page.

We implemented custom parsing for checkout errors to give your users friendly messages on what went wrong. You can find out which line items are unavailable due to not enough quantity in stock and how many are remaining. You can also get feedback about which fields are invalid when entering customer and payment information. Feedback messages are available through the message property on the error object in checkout methods.

You can find live code examples in the Shoutem Shopify extension, where you can also find UI components for various screens you might need.

Here's a sample application in action:

Products

All contributions are welcome!

These are the things missing:

  • Finishing web checkout on iOS and implementing it for Android
  • Apple Pay
  • Customer API

We published a two part article series on bridging in React Native. Read it if you need more information about working with bridge libraries. The first part talks about high level concepts. The second part goes into details about working with native objects.