This repository has been archived by the owner on Mar 22, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add PayPal elements * Update readme to include new HOCs * Bump version number
- Loading branch information
Showing
15 changed files
with
278 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import * as React from 'react'; | ||
| import FramePayError from '../../framepay-error'; | ||
| import BaseElement from './base-element'; | ||
|
|
||
| export default class PaypalElement extends BaseElement< | ||
| PaypalProps, | ||
| PaypalState | ||
| > { | ||
| setupElement() { | ||
| const { Rebilly, onTokenReady } = this.props; | ||
|
|
||
| const makeElement = () => { | ||
| // elementNode already checked in BaseElement.handleSetupElement | ||
| // just ts checks fix | ||
| if (!this.elementNode) { | ||
| throw FramePayError({ | ||
| code: FramePayError.codes.elementMountError, | ||
| details: `PaypalElement invalid elementNode` | ||
| }); | ||
| } | ||
|
|
||
| try { | ||
| return Rebilly.paypal.mount(this.elementNode); | ||
| } catch (e) { | ||
| throw FramePayError({ | ||
| code: FramePayError.codes.elementMountError, | ||
| details: `PaypalElement error in remote api call`, | ||
| trace: e | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| const element = makeElement(); | ||
|
|
||
| try { | ||
| Rebilly.on('token-ready', (token: string) => { | ||
| if (onTokenReady) { | ||
| onTokenReady(token); | ||
| } | ||
| }); | ||
|
|
||
| this.setState({ element }); | ||
| } catch (e) { | ||
| throw FramePayError({ | ||
| code: FramePayError.codes.elementMountError, | ||
| details: `PaypalElement events binding error`, | ||
| trace: e | ||
| }); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8" /> | ||
| <title>Test Paypal</title> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="app"></div> | ||
| <script src="paypal.js"></script> | ||
| <script src="nav.js"></script> | ||
| </body> | ||
|
|
||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| import React, { Component } from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
|
|
||
| import { FramePayProvider, withFramePayPaypalComponent } from '../../../build'; | ||
| import { ReactVersion } from './util'; | ||
| import './style.css'; | ||
|
|
||
| const params = { | ||
| publishableKey: 'pk_sandbox_S95ATjj4hXZs-T9QpZq1ENl2tDSrUkCGv98utc9', | ||
| organizationId: '5977150c-1c97-4dd4-9860-6bb2bab070b4', | ||
| websiteId: 'demo.com', | ||
| transactionData: { | ||
| amount: 10, | ||
| currency: 'USD', | ||
| }, | ||
| }; | ||
|
|
||
| class PaypalElementComponent extends Component { | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| this.state = { | ||
| token: { | ||
| error: null, | ||
| data: null | ||
| } | ||
| }; | ||
| } | ||
|
|
||
| render() { | ||
| return (<div> | ||
| <h2>{this.props.title}</h2> | ||
| <h3>FramePay version: {this.props.Rebilly.version}</h3> | ||
| <div className="flex-wrapper"> | ||
| <div className="example-2"> | ||
| <this.props.PaypalElement /> | ||
| </div> | ||
| </div> | ||
| </div>); | ||
| } | ||
| } | ||
|
|
||
| const PaypalElement = withFramePayPaypalComponent(PaypalElementComponent); | ||
|
|
||
| class App extends Component { | ||
|
|
||
| render() { | ||
| return (<FramePayProvider injectStyle | ||
| {...params} | ||
| onReady={() => { | ||
| console.log('FramePayProvider.onReady'); | ||
| }} | ||
| onError={(err) => { | ||
| console.log('FramePayProvider.onError', err); | ||
| }}> | ||
| <div> | ||
| {ReactVersion()} | ||
| <PaypalElement /> | ||
| </div> | ||
| </FramePayProvider>); | ||
| } | ||
| } | ||
|
|
||
| ReactDOM.render(<App/>, document.getElementById('app')); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.