How to embed Stripe Pricing tables in Angular app

Question

How to embed Stripe Pricing tables in Angular app

1.3k views Asked by Kuyashii At 20 January 2023 at 11:34

Reading Stripe docs regarding the embeddable Pricing tables feature - I have constructed a pricing table following the steps as described.

This results in a code snippet that can be used to embed the hosted pricing table on one's own website/application.

Example snippet;

<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
<stripe-pricing-table pricing-table-id="xxx_xxxxxxxxxx"
publishable-key="pk_test_xxxxxxxxxx">
</stripe-pricing-table>

The examples in the docs relating to how to embed this snippet give only HTML and React examples.

I'd like to know how to achieve the same result in angular.

I have attempted to use Stipe Elements to build an element to hold the pricing table, but Elements does not seem to have a component for the new Pricing tables.

Original Q&A

There are 2 answers

Skizaru On 26 January 2023 at 15:14

I just found the solution and processed as followed :

Integrate the stripe script file inside your index.html.
Create and extends a component with HTMLElement and do as they say here
Then you had CUSTOM_ELEMENTS_SCHEMA from Angular core to your module :

@NgModule({ ... schemas: [CUSTOM_ELEMENTS_SCHEMA })
Finally, call your component which embed the stripe pricing table web component and your pricing table will shows up properly in an Iframe.

**Karol** · Accepted Answer · 2023-01-31 16:01:18

Yes at the moment Stripe Docs has no information for Angular. Here is my solution suggestion with dynamic attribute placement from component to html view.

1. index.html

<head>
  <!-- Paste the script snippet in the head of your app's index.html -->
  <script async src="https://js.stripe.com/v3/pricing-table.js"></script>
</head>

2) in xyz.module.ts

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
@NgModule({
  declarations: [
    XyzComponent,
    ...
  ],
  imports: [...],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})

3. in xyz.component.ts

public stripe_key: string = 'pk_test_***';
public stripe_table: string = 'prctbl_***'

4. in xyz.componet.html

<stripe-pricing-table 
   [attr.pricing-table-id]="stripe_table"
   [attr.publishable-key]="stripe_key">
</stripe-pricing-table>

If you don't need dynamic publishable-key and pricing-table-id skip point 3 and hardcode point 4, as here:

xyz.componet.html

<stripe-pricing-table 
   pricing-table-id="prctbl_***"
   publishable-key="pk_test_***">
</stripe-pricing-table>

TechQA.

How to embed Stripe Pricing tables in Angular app

There are 2 answers

Related Questions in STRIPE-PAYMENTS

Related Questions in STRIPE-PAYMENTS-JS

Popular Questions

Popular Tags

Trending Questions