How to embed Stripe Pricing tables in Angular app

1.3k views Asked by At

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.

2

There are 2 answers

1
Karol On BEST ANSWER

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>
0
Skizaru On

I just found the solution and processed as followed :

  1. Integrate the stripe script file inside your index.html.

  2. Create and extends a component with HTMLElement and do as they say here

  3. Then you had CUSTOM_ELEMENTS_SCHEMA from Angular core to your module :

    @NgModule({ ... schemas: [CUSTOM_ELEMENTS_SCHEMA })

  4. Finally, call your component which embed the stripe pricing table web component and your pricing table will shows up properly in an Iframe.