Stripe Elements data sequence diagram’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<br />
participant<br />
Customer->Browser: Request Payment Form<br />
Browser-> GET form<br />>Browser: form<br />
activate Browser<br />
Browser-> GET iframe<br />
activate<br />>iframe: iframe<br />
activate iframe<br />
Customer–>iframe: sensitive data<br />
Customer–>Browser: nonsensitive data<br />
Customer–>Browser: submit<br />
Browser-> POST nonsensitive data<br />
iframe-> POST sensitive data<br />
deactivate iframe<br />–> Validate card<br />–> Create token<br />>Browser: payment card token<br />
deactivate<br />
Browser-> token and nonsensitive data<br />
deactivate Browser<br />–> Store<br />
@enduml<br />

Leave a Comment