rgilling

What is this gist?

I wanted to share how to integrate the new Stripe v3 hosted forms UI into Angular 2+.

The hosted forms are quite clever, they overlay a styled div with an 'invisible' form within an iFrame. With the right styling it looks nearly seamless.

My simple angular component encapsulates this into a working angular component to capture the card token. It:

1. Styles the form to match the bootstrap 4 alpha styling in a project I was working on. It should work for you if you use bootstrap 4, otherwise just modify the less file and style properties to match your project.

rgilling

// Add to workspace settings
{
    "files.exclude": {
        "**/.git": true,
        "**/.DS_Store": true,
        "**/*.js.map": true,
        "**/*.js": {"when": "$(basename).ts"}
    }
}

rgilling

// Just keeping it here so I remember.
const obj = JSON.parse(JSON.stringify(obj));