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 example.com<br />
Customer->Browser: Request Payment Form<br />
Browser->example.com: GET form<br />
example.com->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->example.com: token and nonsensitive data<br />
deactivate Browser<br />
example.com–>example.com: Store<br />
@enduml<br />

Leave a Comment