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 Reply

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