Shopping Cart

There are some major features added in App Builder app version 2.8, one of them being “ShoppingCart” page type.

Here is a quick overview of it:

You can create specially formatted links (see below) anywhere in your app which when tapped by user will ADD an item to shopping cart or REMOVE it from the cart.
There is a single ShoppingCart entity in the backstage of your app and therefore if you add many Shopping Cart pages inside your app they all will display the same items.
When user clicks “Checkout” on Shopping Cart page he/she is taken into the iPhone’s Safari browser and the PayPal payment gets processed from there. When the payment successfully completes or maybe fails the user is given the option to return back to your application. When the application is relaunched this way the success or respectively fail message will be displayed. These messages are setup while editing Shopping Cart page. As many of you are aware, Apple does NOT really allow any kind of payments INSIDE the app, but implementing such a technique where the payment is processed outside the app (in Safari browser) might get Apple’s approval thought we give NO guarantees.
The design of the Shopping Cart page will be made soon customizable through CSS. For technically advanced user we should mention that the Shopping Cart page is fully populated with JavaScript (JS) and the JS code is fully available inside the Shopping Cart page, feel free to modify and build the page from scratch with your fully custom design.

The link to ADD an item to Shopping Cart has the following syntax:

addtocart://<itemid>?itemname=<name>&itemprice=<price>&urlimg=<imagege_path>&urlinfo=<description_page_path>&<customParam>=<customValue>&<customParam>=<customValue>

where:

itemid - the id of the item NOT seen to the user.
itemname - the name of the item as displayed to the user.
itemprice - price in the currency specified when editing Shopping cart page type.
urlimg - url to the image that represents the item, if the image is inside the app bundle then specifying the name of the image is enough (see example), otherwise full web path is necessary.
urlinfo - url to the HTML page that describes the item, if the page is inside the app bundle then specifying the name of the page is enough (see example), otherwise full web path is necessary.

Example:

addtocart://teddybear?itemname=TeddyBear&itemprice=19.99&urlimg=bigicon.png&urlinfo=tab3.html

The link to REMOVE an item from Shopping Cart has the following syntax:

removefromcart://<itemid>

where

itemid - the same id used when adding corresponding item to the cart

Example:

removefromcart://teddybear

Below is a quick tutorial on how to create and test the Shopping Cart page type.

Let’s start with either an existent app or in my case create a new app. I have chosen BlankTemplate for this, but in fact any template or app would suit.

1. Choose a page that you want to be your shopping cart. in my case it’s tab1.html, but you can create your own one. Click “Edit” link against the chosen page.

2. Now if your page is not yet of type “Shopping cart” then you need to convert it to. Click on “Convert Page” link.

3. Choose “Shopping Cart” and then click “Convert”

Now your Shopping Cart page is created, but in order to see it in action, i.e. test it you need to have test PayPal accounts. These accounts operate with fake money and you can create them at https://developer.paypal.com

4. Go to https://developer.paypal.com and click “Sign up Now”

5. Complete all fields and click “Agree and Submit”

Now your main account is created. Please go to your mailbox and confirm your email.

You now need to create BUYER and SELLER test accounts.

6. Go to https://developer.paypal.com and login with your email and password that you have created in previous step.

7. Choose “Test Accounts” from the menu on the left and then click on “Preconfigured” link highlighted in the screenshot below.

8. Please create a BUYER account and then once again starting from step 7 create a SELLER account.

So that in the end you have 2 test accounts.

9. Now go to edit your Shopping Cart and enter Seller’s email address in the Recipient field. NOTE: make sure your “Test” parameter is set to YES.

10. Please go to any other page (tab2.html in my case) and insert two ADDTOCART links like below:

<div>
<a href="addtocart://teddybear?itemname=TeddyBear&itemprice=120.9 9&urlimg=bigicon.png&urlinfo=tab3.html">Add Teddy Bear to basket</a>
</div>

<br>

<div>
<a href="addtocart://iphone?itemname=iPhone4White&itemprice=699.9 9&urlimg=bigicon.png&urlinfo= tab4.html">Add iPhone to basket</a>
</div>

Then click Save.

Now let’s test what we’ve done on the device itself.

11. First of all you need to login to your main test PayPal account inside your iPhone browser. The real users will NOT need to do that, but because we use test accounts we have to do that. Open Safari browser on your iDevice (iPhone/iPod/iPad) and navigate to https://developer.paypal.com then login with your main developer PayPal account (the one you created in step 5)

12. Open your application and go to the page where ADDTOCART links are (tab2 in my case). Then tap on “Add Teddy Bear to basket”.

13. Go to Shopping cart page (tab1 in my case) and you should see an item already in your cart.

14. Go back to tab2 and tap on “Add iPhone to basket”. See the shopping cart page populating with another item.

15. Go again to tab2 and tap “Add Teddy Bear to basket” again. You should observe in Shopping cart that the count of TeddyBear items is 2.

16. Tab Checkout button - you will be taken away from the app and straight into iOS Safari browser. You should see a screen as below. Enter email address and the password for the BUYER account created in steps 7-8 and tap “Log In” button.

17. Now you see a summary of the transaction, tap “Pay Now” button.

18. The transaction should be successful and you should see a screen as below. The yellow button that you see on the screen (in my case it’s called “Return to Andrew Vasiliu’s Test Store”) will return you to your app.

Here is an example on what is seen when the application launches from tapping the yellow button on the previous screen.

We plan to bring enhancements to this component. The main fields we’ll be working on is to make it easy for you to create such a component, like creating special tools that will help you create ADD and REMOVE from cart links, make it easier to modify the design of the Shopping Cart page … also we plan to bring enhancements to user experience, therefore any of your suggestions are highly welcome.

Articles in this section

There are some major features added in App Builder app version 2.8, one of them being “ShoppingCart” page type.

You can create specially formatted links (see below) anywhere in your app which when tapped by user will ADD an item to shopping cart or REMOVE it from the cart.

There is a single ShoppingCart entity in the backstage of your app and therefore if you add many Shopping Cart pages inside your app they all will display the same items.

The link to ADD an item to Shopping Cart has the following syntax:

where:

Example:

addtocart://teddybear?itemname=TeddyBear&itemprice=19.99&urlimg=bigicon.png&urlinfo=tab3.html

The link to REMOVE an item from Shopping Cart has the following syntax:

where

Example:

removefromcart://teddybear

Below is a quick tutorial on how to create and test the Shopping Cart page type.

Let’s start with either an existent app or in my case create a new app. I have chosen BlankTemplate for this, but in fact any template or app would suit.

1. Choose a page that you want to be your shopping cart. in my case it’s tab1.html, but you can create your own one. Click “Edit” link against the chosen page.

2. Now if your page is not yet of type “Shopping cart” then you need to convert it to. Click on “Convert Page” link.

3. Choose “Shopping Cart” and then click “Convert”

Now your Shopping Cart page is created, but in order to see it in action, i.e. test it you need to have test PayPal accounts. These accounts operate with fake money and you can create them at https://developer.paypal.com

4. Go to https://developer.paypal.com and click “Sign up Now”

5. Complete all fields and click “Agree and Submit”

Now your main account is created. Please go to your mailbox and confirm your email.

You now need to create BUYER and SELLER test accounts.

6. Go to https://developer.paypal.com and login with your email and password that you have created in previous step.

7. Choose “Test Accounts” from the menu on the left and then click on “Preconfigured” link highlighted in the screenshot below.

8. Please create a BUYER account and then once again starting from step 7 create a SELLER account.

So that in the end you have 2 test accounts.

9. Now go to edit your Shopping Cart and enter Seller’s email address in the Recipient field. NOTE: make sure your “Test” parameter is set to YES.

10. Please go to any other page (tab2.html in my case) and insert two ADDTOCART links like below:

Then click Save.

Now let’s test what we’ve done on the device itself.

12. Open your application and go to the page where ADDTOCART links are (tab2 in my case). Then tap on “Add Teddy Bear to basket”.

13. Go to Shopping cart page (tab1 in my case) and you should see an item already in your cart.

14. Go back to tab2 and tap on “Add iPhone to basket”. See the shopping cart page populating with another item.

15. Go again to tab2 and tap “Add Teddy Bear to basket” again. You should observe in Shopping cart that the count of TeddyBear items is 2.

16. Tab Checkout button - you will be taken away from the app and straight into iOS Safari browser. You should see a screen as below. Enter email address and the password for the BUYER account created in steps 7-8 and tap “Log In” button.

17. Now you see a summary of the transaction, tap “Pay Now” button.

18. The transaction should be successful and you should see a screen as below. The yellow button that you see on the screen (in my case it’s called “Return to Andrew Vasiliu’s Test Store”) will return you to your app.

Here is an example on what is seen when the application launches from tapping the yellow button on the previous screen.

Comments

Articles in this section

There are some major features added in App Builder app version 2.8, one of them being “ShoppingCart” page type.

You can create specially formatted links (see below) anywhere in your app which when tapped by user will ADD an item to shopping cart or REMOVE it from the cart.

There is a single ShoppingCart entity in the backstage of your app and therefore if you add many Shopping Cart pages inside your app they all will display the same items.

The link to ADD an item to Shopping Cart has the following syntax:

where:

Example:

addtocart://teddybear?itemname=TeddyBear&itemprice=19.99&urlim​g=bigicon.png&urlinfo=tab3.html

The link to REMOVE an item from Shopping Cart has the following syntax:

where

Example:

removefromcart://teddybear

Below is a quick tutorial on how to create and test the Shopping Cart page type.

Let’s start with either an existent app or in my case create a new app. I have chosen BlankTemplate for this, but in fact any template or app would suit.

1. Choose a page that you want to be your shopping cart. in my case it’s tab1.html, but you can create your own one. Click “Edit” link against the chosen page.

2. Now if your page is not yet of type “Shopping cart” then you need to convert it to. Click on “Convert Page” link.

3. Choose “Shopping Cart” and then click “Convert”

Now your Shopping Cart page is created, but in order to see it in action, i.e. test it you need to have test PayPal accounts. These accounts operate with fake money and you can create them at https://developer.paypal.com

4. Go to https://developer.paypal.com and click “Sign up Now”

5. Complete all fields and click “Agree and Submit”

Now your main account is created. Please go to your mailbox and confirm your email.

You now need to create BUYER and SELLER test accounts.

6. Go to https://developer.paypal.com and login with your email and password that you have created in previous step.

7. Choose “Test Accounts” from the menu on the left and then click on “Preconfigured” link highlighted in the screenshot below.

8. Please create a BUYER account and then once again starting from step 7 create a SELLER account.

So that in the end you have 2 test accounts.

9. Now go to edit your Shopping Cart and enter Seller’s email address in the Recipient field. NOTE: make sure your “Test” parameter is set to YES.

10. Please go to any other page (tab2.html in my case) and insert two ADDTOCART links like below:

Then click Save.

Now let’s test what we’ve done on the device itself.

12. Open your application and go to the page where ADDTOCART links are (tab2 in my case). Then tap on “Add Teddy Bear to basket”.

13. Go to Shopping cart page (tab1 in my case) and you should see an item already in your cart.

14. Go back to tab2 and tap on “Add iPhone to basket”. See the shopping cart page populating with another item.

15. Go again to tab2 and tap “Add Teddy Bear to basket” again. You should observe in Shopping cart that the count of TeddyBear items is 2.

16. Tab Checkout button - you will be taken away from the app and straight into iOS Safari browser. You should see a screen as below. Enter email address and the password for the BUYER account created in steps 7-8 and tap “Log In” button.

17. Now you see a summary of the transaction, tap “Pay Now” button.

18. The transaction should be successful and you should see a screen as below. The yellow button that you see on the screen (in my case it’s called “Return to Andrew Vasiliu’s Test Store”) will return you to your app.

Here is an example on what is seen when the application launches from tapping the yellow button on the previous screen.

addtocart://teddybear?itemname=TeddyBear&itemprice=19.99&urlimg=bigicon.png&urlinfo=tab3.html