Plugins

Spreedly provides helper functions in our iFrame that help our customers get the most out of their integrations.

stripeRadar

The Spreedly.stripeRadar function allows Spreedly customers using the Stripe or Stripe Payment Intents gateways to integrate with Stripe’s Radar fraud detection tools. For more information on how to use this, see the Stripe or Stripe Payment Intents gateway guides.

This function is asynchronous in that it requires an API call to Stripe. If any failures occur, the callback will receive a null value for the radarSessionId. The transaction should still be performed in this case, but it will not leverage Stripe’s frontend fraud detection.

NOTE: The stripeRadar function uses Javascript’s console.log to log any problems with the integration. Check your browser’s console during development to ensure that any suggestions that it makes are fixed before going to production.

function callback(radarSessionId) {
  // pass radar_session_id to your backend to use it
  // as a gateway specific field when making and authorization
  // or purchase request
}

Spreedly.stripeRadar('pk_examplepk', callback);

Signature

stripeRadar(publishableKey, callback, options)

Arguments

createStripePaymentElement

The Spreedly.createStripePaymentElement function allows transactions using Alternative Payment Methods on the Stripe Payment Intents gateway begins the process by injecting the Stripe Payment Element form into the checkout page.

For more information, see the Stripe APMs guide.

const element = Spreedly.createStripePaymentElement({
  publishableKey: 'pk_...',
  clientSecret: clientSecret,
  paymentElement: '#payment-element',
  transactionToken: spreedlyTransactionToken,
  appearance: stripeAppearanceObject
});

Signature

Spreedly.createStripePaymentElement(options)

Arguments

The options argument can contain all of the following arguments:

Return value

This function returns an object with the following public fields and methods:

element.error

if (element.error) { handle(error); }

// This will redirect the customer to complete their order
checkoutButton.onclick = element.confirmPayment;

The error field is a string if something went wrong, such as an invalid publishable key, invalid input fields, or Stripe.js not being on the page. These are mostly used during implementation to ensure that the call is being performed correctly. Any value here mean that the Payment Element has not been displayed. If no errors occur when mounting the Payment Element, this function returns undefined.

element.confirmPayment();

When the customer is ready to checkout, confirmPayment() should be called to begin the redirect. This function has no return value as the customer will be redirected to complete the purchase. This should only be called if error is not present.

createBraintreePaymentElements

The Spreedly.createBraintreePaymentElements function allows transactions using Alternative Payment Methods on the Braintree Blue gateway. It begins the process by injecting the Braintree Payment Element form into the checkout page.

For more information, see the Alternative Payment Methods section in the Braintree gateway guide.

const element = Spreedly.createBraintreePaymentElements({
  callbackFunction: callbackFunction,
  transactionToken: transactionToken,
  environmentKey: enviornmentKey,
  paymentElements: {paypal: 'paypal-payment-element'},
  style: {paypal: { color: 'blue', height: 45, shape: 'rect'}}
});

Signature

Spreedly.createBraintreePaymentElements(options)

Arguments

The options argument can contain all of the following arguments:

The following are the accepted values for each style parameter:

• layout: vertical or horizontal
• color: gold, blue, silver, white or black
• shape: rect or pill
• height: between 25 to 55

Return value

element.error

if (element.error) { handle(error); }

The error field is a string if something went wrong, such as missing parameters or the different Braintree scripts not being on the page. These are mostly used during implementation to ensure that the call is being performed correctly. Any value here mean that the Payment Element has not been displayed. If no errors occur when mounting the Payment Element, this function returns undefined.

• If the customer successfully completes their payment after they click the respective button then an object will be returned. This object will contain state, nonce, payment_method and possibly other parameters.

{
    "state": "Successful",
    "nonce": "paymentMethodNonce",
    "payment_method": {
      "payment_method_type": "paypal"
    }
  }

• If an unexpected error occurs then an object will be returned to the callbackFunction. This object will contain state, message and payment_method.

 {
    "state": "Failed",
    "message": "undefined Error: PayPal payment options are invalid. at Tr.error…",
    "payment_method": {
      "payment_method_type": "paypal"
    }
  }

• If a customer cancels their payment then an object will be returned to the callbackFunction. This object will contain state, message and payment_method.

{
    "state": "Cancelled",
    "message": "PayPal payment cancelled, {\n \"orderID\": \"EC-8XN05533WV243142V\"\n}",
    "payment_method": {
      "payment_method_type": "paypal"
    }
  }

Note: these examples use PayPa,l but you can find examples for Venmo in our Alternative Payment Methods section of the Braintree gateway guide.