[SOLVED] How to embed Stripe Pricing tables in Angular app

How to embed Stripe Pricing tables in Angular app

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.

Solution

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>