• Meant to abstract provider implementation details away from OT react sites
• Creates a Payment Provider hook and context for use in OT React sites
• (TODO) Contains clients for OT payment providers

When integrating Stripe, the code for interacting with that service was tightly coupled with one provider (Stripe) and scattered throughout a few codebases.

Most payment providers use a similar mechanism for handling credit card information. Usually sensitive Credit Card information is only entered into iframes to the Provider's domain, and an obfuscated token is sent back to us for use and storage.

Since this interaction is so similar with different providers, we can wrap it with our own component library and include that in multiple OT sites.

In this way we can abstract implementation of n payment providers away from OT react code.

Anticipated places for use:

1. consumer-frontend
2. restref-site
3. gc-monorepo-admin (OT4R)

sequenceDiagram
	Note left of Consumer: (CFE, R3, OT4R)
	box Purple OpenTable 
		participant Consumer
		participant @opentable/react-payment
	end
    participant Provider 
	Note right of Provider: (Spreedly, Stripe)
    Consumer->>@opentable/react-payment: form with placeholders
    loop iframe content
		@opentable/react-payment->>Provider: inject script, update placeholders with iframes
        Provider->>@opentable/react-payment: payment provider card token & metadata 
    end
    @opentable/react-payment-->>Consumer: <PaymentProviderContext/> w/token & metadata
    @opentable/react-payment-->>Consumer: usePayment hook

TODO: add usages and howto

• Context
• Hook
• Selecting a provider
• Provider events
• Adding a provider
• ?

Artifactory:

• npm-opentable/@opentable/react-payment/

So far we have spiked the form/iframe integration works in CFE network flow.

The Spreedly script is included, window.Spreedly exists, and it replaces empty DOM elements with spreedly domain iframe content.

Using a test form hacked into CFE returns a token.

Spike is successful, next steps will be to attempt to integrate this lib with CFE in the network flow.

TODO:

• Complete transaction with token
• Other payment flows in CFE
• Use in other OT react sites

• Spreedly iframe payment guide
• Spreedly iframe JS API
• Spreedly iframe 3DS journey diagram
• Spreedly test data

TODO

TODO