How to use paypal-checkout - 10 common examples

mounted: function () {
      const vue = this
      const sandbox = vue.dev

      paypal.Button.render({
        env: vue.env,

        payment: function (resolve, reject) {
          vue.createPayment()
            .then((response) => {
              const data = response.data
              if (sandbox) console.log('The payment was created!')
              vue.$emit('paypal-paymentCreated', data)
              resolve(data.paymentID)
            }, (err) => {
              reject(err)
            })
        },

        // Pass a function to be called when the customer completes the payment
        onAuthorize: function (data) {

// Pass the payment details for your transaction
      // See https://developer.paypal.com/docs/api/payments/#payment_create for the expected json parameters
      payment: vue.payment,

      // Display a "Pay Now" button rather than a "Continue" button
      commit: vue.commit,

      // Pass a function to be called when the customer completes the payment
      onAuthorize: vue.onAuthorize,

      // Pass a function to be called when the customer cancels the payment
      onCancel: vue.onCancel
    }, assignTo(vue, propTypes.BUTTON));

    paypal.Button.render(button, vue.$el);
  }
};

// Pass the payment details for your transaction
      // See https://developer.paypal.com/docs/api/payments/#payment_create for the expected json parameters
      payment: vue.payment,

      // Display a "Pay Now" button rather than a "Continue" button
      commit: vue.commit,

      // Pass a function to be called when the customer completes the payment
      onAuthorize: vue.onAuthorize,

      // Pass a function to be called when the customer cancels the payment
      onCancel: vue.onCancel,
    }, assignTo(vue, propTypes.BUTTON));

    paypal.Button.render(button, vue.$el);
  },
};

currency: this.currency,
          details: this.details,
        },
      }, assignTo(vue, propTypes.TRANSACTION));

      // TODO: clean this up
      if (transaction.shipping_address && transaction.item_list) {
        transaction.item_list.shipping_address = transaction.shipping_address;
        delete transaction.shipping_address;
      }

      const payment = {
        transactions: [transaction],
      };

      return paypal.rest.payment.create(
        this.env,
        this.client,
        Object.assign({ payment }, assignTo(vue, propTypes.PAYMENT)),
      );
    },
    onAuthorize(data, actions) {

currency: this.currency,
          details: this.details
        }
      }, assignTo(vue, propTypes.TRANSACTION));

      // TODO: clean this up
      if (transaction.shipping_address && transaction.item_list) {
        transaction.item_list.shipping_address = transaction.shipping_address;
        delete transaction.shipping_address;
      }

      var payment = {
        transactions: [transaction]
      };

      return paypal.rest.payment.create(this.env, this.client, _Object$assign({ payment: payment }, assignTo(vue, propTypes.PAYMENT)));
    },
    onAuthorize: function onAuthorize(data, actions) {

import React from 'react';
import ReactDOM from 'react-dom';
import paypal from 'paypal-checkout';
import PropTypes from 'prop-types';

const Button = paypal.Button.driver('react', { React, ReactDOM });

export default class PayPalButton extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      env: this.props.env,
      client: {
        sandbox: this.props.sandboxID,
        production: this.props.productionID
      },
      amount: this.props.amount,
      currency: this.props.currency,
      commit: this.props.commit
    };
  }

import '@babel/polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import paypal from 'paypal-checkout';

const Button = paypal.Button.driver('react', { React, ReactDOM });

/**
 * types
 */
interface State {
  loaded: boolean;
  error: boolean;
}

export type OnCancelData = {
  billingID: string;
  cancelUrl: string;
  intent: string;
  paymentID: string;
  paymentToken: string;
}

app.ports.renderPaypalButton.subscribe(token =>
    paypal.Button.render(
      {
        braintree,
        client: {
          sandbox: token,
          production: token
        },
        env: "sandbox",
        commit: true,
        payment: (resolveData, actions) => {
          return actions.braintree.create({
            flow: "checkout",
            intent: "sale",
            amount: 3000,
            currency: "JPY",
            enableShippingAddress: false
          });

render() {
    const Button = paypal.Button.driver('react', { React, ReactDOM });
    return (
      <button> this.payment(data, actions) }
        onAuthorize={ (data, actions) =&gt; this.onAuthorize(data, actions) }
        {...this.props}
      /&gt;
    );
  }
}</button>

module.exports = (req, res) => {

    let style = {
        size:         req.query['style.size'],
        color:        req.query['style.color'],
        shape:        req.query['style.shape'],
        label:        req.query['style.label'],
        dual:         Boolean(req.cookies.pwv),
        fundingicons: strToBoolean(req.query['style.fundingicons']),
        branding:     strToBoolean(req.query['style.branding']),
        tagline:      strToBoolean(req.query['style.tagline'])
    };

    let buttonHTML = componentTemplate({
        props: {
            locale: req.query['locale.x'] || 'en_US',
            style: style
        }
    });

    return {
        style: style,
        buttonHTML: buttonHTML
    };
};