PayPal/Braintree SDK Client
A shared client for PayPal/Braintree client sdk modules. Featuring:
- Shared configuration between modules:
- Client-side merchant passed options
- Shared module to module config
- Server-side inlined configuration
- Inlinable into multiple client modules/components
- Modules can tree-shake anything they don't need (e.g. config fetching)
- Decoupled client modules
- All communication and sharing between components happens via the client
- Synchronous client
- Individual modules/components can choose to render synchronously or asynchronously
- Easy for dev to create client in single place and pass it around
Installing
npm install --save paypal-braintree-sdk-client
Integration
As an end user
Example of what merchants integrating with different modules in the SDK might call:
<script src=".../checkout.button.js" />
<script src=".../hosted.fields.js" />
try {
var client = paypal.client({
env: 'sandbox',
auth: {
sandbox: '__SANDBOX_AUTH_KEY__'
}
})
} catch(err) {
console.log('There was a problem creating the client', err);
});
client.Button.render({
...
}).catch(function (err) {
console.log('There was a problem creating rendering the paypal button', err);
});
client.HostedFields.render({
...
}).then(function (hostedFieldsInstance) {
form.addEventListener('submit', function (event) {
event.preventDefault();
hostedFieldsInstance.tokenize(...)
});
}).catch(function (err) {
console.log('There was a problem creating rendering hosted fields', err);
});
As a module owner
Example of how hosted.fields.js
might look:
import sdk from 'paypal-braintree-sdk-client';
sdk.config
.get(sdk.KEY.FUNDING_HANDLED)
.push(sdk.FUNDING.CARD);
sdk.attach(options => {
let uct = options.auth[options.env];
let { configUrl, merchantID } = parseUCT(uct);
let getMerchantConfig = sdk.debounceGet(configUrl, {
query: {
merchantID: merchantID
}
});
return {
HostedFields: {
render: (hostedFieldsOptions) => {
var options = JSON.parse(JSON.stringify(hostedFieldsOptions || {}));
options.client = sdk.request;
return getMerchantConfig.then(merchantConfig => {
if (merchantConfig.merchant_is_blocked) {
throw new Error('Nope!');
}
return renderHostedFields(options, merchantConfig);
});
}
}
};
});
Quick Start
Getting Started
- Fork the module
- Run setup:
npm run setup
- Start editing code in
./src
and writing tests in ./tests
npm run build
Building
npm run build
Tests