Stripe Elements data sequence diagram

Stripe.com’s Stripe Elements is a great way to handle payment card information in a way that slows down cybercreeps. It’s secure because customers only enter card numbers into Stripe-furnished iframes, never into forms on the site taking payments via Stripe.

Here is the sequence diagram for how Stripe Elements handles data flow

PlantUML Syntax:<br />
@startuml<br
/>
skinparam monochrome true<br
/>
autonumber<br
/>
hide footbox<br
/>
actor Customer<br
/>
participant Browser<br
/>
participant iframe<br
/>
participant Stripe.com<br
/>
participant Glance.net<br
/>
Customer->Browser: Request Payment Form<br
/>
Browser->Glance.net: GET form<br
/>
Glance.net->Browser: form<br
/>
activate Browser<br
/>
Browser->Stripe.com: GET iframe<br
/>
activate Stripe.com<br
/>
Stripe.com->iframe: iframe<br
/>
activate iframe<br
/>
Customer–>iframe: sensitive data<br
/>
Customer–>Browser: nonsensitive data<br
/>
Customer–>Browser: submit<br
/>
Browser->Stripe.com: POST nonsensitive data<br
/>
iframe->Stripe.com: POST sensitive data<br
/>
deactivate iframe<br
/>
Stripe.com–>Stripe.com: Validate card<br
/>
Stripe.com–>Stripe.com: Create token<br
/>
Stripe.com->Browser: payment card token<br
/>
deactivate Stripe.com<br
/>
Browser->Glance.net: token and nonsensitive data<br
/>
deactivate Browser<br
/>
Glance.net–>Glance.net: Store<br
/>
@enduml<br
/>

Leave a Reply

Your email address will not be published. Required fields are marked *