# How can I use In-App Purchase with only a webwiever?

**URL:** <https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794>\
**Category:** In App Purchase\
**Tags:** beginner\
**Created:** [March 18, 2022, 3:46pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794 "2022-03-18T15:46:22Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![mephjl](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mephjl/32/126746_2.png) [@mephjl](https://community.thunkable.com/u/mephjl)\
**Post date:** [March 18, 2022, 3:46pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/1 "2022-03-18T15:46:22Z")

</div>

APPLE TEAM :  
if your app allows users to access digital features that are unlocked via an external subscription, the subscription should still be available to purchase in the app by using the in-app purchase API.

with your new submission: Paid digital subscription features should be made available behind in-app purchase.

I added 1 product In-App purchase but it’s not enough

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 18, 2022, 4:22pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/2 "2022-03-18T16:22:52Z")

</div>

Hi @mephjl Can you please rephrase your title as a question, and provide a question and some context in your post. This is unclear and it’ll be hard for people to help. See the linked post for more information.

> [@How to ask Great Questions](https://community.thunkable.com/t/how-to-ask-great-questions/1286):
>
> Here are a few things to consider before you create a new topic in the forum. Before you Ask Do a search of the forum to see if your question has already been asked. Check the [Thunkable Documentation](http://thunkable.com/explore/) to see if there’s an example you can use. Have you watched the [beginner tutorial videos](https://www.youtube.com/watch?v=hZ7z3t-98O0&list=PLB89L9PPGIrxmB3GZXaxjK3Pq2Crqp14A) on YouTube? Make sure you have a really descriptive topic title for your post. Creating A Helpful Topic Title Avoid using titles like, “my app is broken” or “HELP ME!!1!”, instead try to briefly describe the …

---

<div class="post-metadata">

**Author:** ![mephjl](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mephjl/32/126746_2.png) [@mephjl](https://community.thunkable.com/u/mephjl)\
**Post date:** [March 18, 2022, 4:35pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/3 "2022-03-18T16:35:02Z")

</div>

Hope now is good, excuse me.

---

<div class="post-metadata">

**Author:** ![mephjl](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mephjl/32/126746_2.png) [@mephjl](https://community.thunkable.com/u/mephjl)\
**Post date:** [March 18, 2022, 4:39pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/4 "2022-03-18T16:39:36Z")

</div>

See the pics.  
Is that how to do it or am I doing it wrong?

 ![screen](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/e/fe0e657a92aade11e600a83e1408e37036dcee35.png)  
 ![screen](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/5/e5d827b3250bc5ce61b62b69879c96d496abbe87.jpeg)

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 18, 2022, 6:00pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/5 "2022-03-18T18:00:12Z")

</div>

> [@mephjl](#):
>
> e now is good, excuse me.

If you are the owner of the website, you can inject a script that allows you rpage to speak to the webviewer and pass strings back and forth. In this manner, you could trigger a workflow from within your webpage, to the webviewer, that kicks off an in app purchase.

I dont have any examples at the ready of this but I know they do exist. You could do some searching for Henry (the name of a webWrapper template that uses thunkable to wrap bubble apps). That app allows for IAP i believe, though I don’t know that it’s open tot he public. You could try reaching out to its creator too.

There are plenty of examples here in the forum of how to pass messages back and forth with the webviewer. [And here is the github to get you started!](https://github.com/thunkable/webviewer-extension)

---

<div class="post-metadata">

**Author:** ![mephjl](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mephjl/32/126746_2.png) [@mephjl](https://community.thunkable.com/u/mephjl)\
**Post date:** [March 18, 2022, 7:09pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/6 "2022-03-18T19:09:39Z")

</div>

> [@jared](#):
>
> There are plenty of examples here in the forum of how to pass messages back and forth with the webviewer. [And here is the github to get you started!](https://github.com/thunkable/webviewer-extension)

I try

---

<div class="post-metadata">

**Author:** ![mephjl](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mephjl/32/126746_2.png) [@mephjl](https://community.thunkable.com/u/mephjl)\
**Post date:** [March 20, 2022, 8:27am UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/7 "2022-03-20T08:27:51Z")

</div>

> [@jared](#):
>
> If you are the owner of the website, you can inject a script that allows you rpage to speak to the webviewer and pass strings back and forth. In this manner, you could trigger a workflow from within your webpage, to the webviewer, that kicks off an in app purchase.

thunkableWebviewerExtension.js is simple to use, but I don’t understand what should I send and from where to where. Maybe the name ? Maybe ID ? What ?  
I still don’t understand if in the extension in thunkable I was right to put the name of the subscriptions created in the store.  
Please help me

---

<div class="post-metadata">

**Author:** ![mephjl](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mephjl/32/126746_2.png) [@mephjl](https://community.thunkable.com/u/mephjl)\
**Post date:** [March 20, 2022, 9:00am UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/8 "2022-03-20T09:00:50Z")

</div>

Am I at least on the right way?

 ![screen](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/3/c/3cecba50b7c71631217e82f9e8acf4973e1a830c.jpeg)

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 20, 2022, 1:03pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/9 "2022-03-20T13:03:44Z")

</div>

This is by no means the only way but this might help you get started.

At a high level overview:

You’d pass a message to the app to initialize a purchase. When the purchase is complete, pass the error or success message back to the webapp for further processing.

Hopefully this makes sense. If not, It should make more sense once we release the iap docs (they’re close to done!)

```auto
<body>

<button 
onClick=buy1time(this.getAttribute(“productID”) )
id=“purchaseButton1” 
productID=“productId”> 
click here to buy
</button>

<script src=“/thunkableWebviewerExtension.js”>

const buy1time = (productId) => {

ThunkableWebviewerExtension.postMessage('productID');

}

const passBackPurchaseInfo = (purchaseObject) => {
//more logic would go here related to saving the purchase info
}

ThunkableWebviewerExtension.receiveMessage(function(message) {
     passBackPurchaseInfo(JSON.parse(message)
    });

</script>
</body>

```

---

<div class="post-metadata">

**Author:** ![mephjl](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mephjl/32/126746_2.png) [@mephjl](https://community.thunkable.com/u/mephjl)\
**Post date:** [March 20, 2022, 1:59pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/10 "2022-03-20T13:59:26Z")

</div>

So the variable passed in, must be the product ID, not the name. Thank you.  
And the blocks are right ?  
I setted iap variable to message (product ID now), and setted IAP to it. Right ?

---

<div class="post-metadata">

**Author:** ![jared](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/jared/32/138473_2.png) [@jared](https://community.thunkable.com/u/jared)\
**Post date:** [March 20, 2022, 2:57pm UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/11 "2022-03-20T14:57:42Z")

</div>

This wasn’t a guide as to how to implement in _your_ app specifically. More of an intro to how it _could_ be completed.

---

<div class="post-metadata">

**Author:** ![cong1\_hachi1](https://avatars.discourse-cdn.com/v4/letter/c/958977/32.png) [@cong1\_hachi1](https://community.thunkable.com/u/cong1_hachi1)\
**Post date:** [June 3, 2022, 10:31am UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/12 "2022-06-03T10:31:20Z")

</div>

My English is so bad, but i need set in-app purchases for my app, so you can make a video step by step about this function, please!!

---

<div class="post-metadata">

**Author:** ![mimostel](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/mimostel/32/107661_2.png) [@mimostel](https://community.thunkable.com/u/mimostel)\
**Post date:** [June 3, 2022, 10:39am UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/13 "2022-06-03T10:39:39Z")

</div>

> **[Overview](https://academy.thunkable.com/in-app-purchases/overview)**

This could be your first step.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/0/f/0f59f292712368bce16ff80133ae10de8a6f27e8.png) [@system](https://community.thunkable.com/u/system)\
**Post date:** [September 1, 2022, 10:40am UTC](https://community.thunkable.com/t/how-can-i-use-in-app-purchase-with-only-a-webwiever/1790794/14 "2022-09-01T10:40:08Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.