This article is part of a series on PayPal’s Cross-Domain Javascript Suite.

I’ve just published v2 of zoid:

With the latest version, it’s even easier to turn any web-app (or web-component) into a cross domain component. You just create a component, give it a name, and point it to the url where your app will be rendered:

var HelloWorldComponent = zoid.create({

tag: 'hello-world',

url: 'http://www.my-site.com/hello-world'

});

Now, all you need to do is include the zoid definition you just created, and accept some props from window.xprops , inside the page which your url renders:

<script src="http://www.my-site.com/my-component.js"></script> <script>

console.log('Hello', window.xprops.name, '!'); window.xprops.personWasGreeted(window.xprops.name);

</script>

And you’re done! Anyone wanting to render your page can now do so, and pass down props directly from their page into the iframe-component:

HelloWorldComponent.render({ name: 'Spock', personWasGreeted: function(name) {

console.log(name, 'was successfully greeted!');

} }, '#container');

This is a great way of sharing functionality from your site, to another site.

Hope this is useful. This example was just vanilla javascript, but it works great with libraries like React too!

Thanks all!