3

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.

Kuyashii
  • 360
  • 1
  • 4
  • 21

2 Answers2

4

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>
Karol
  • 58
  • 4
  • I used this method you posted but there is a challenge I encountered per this SO post: https://stackoverflow.com/questions/76066094/properties-in-an-angular-component-are-null-when-the-component-is-rendered?noredirect=1#comment134152578_76066094 Any idea why or how to fix it? – Arash Apr 20 '23 at 23:17
1

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.

Skizaru
  • 11
  • 2