I want to add a Paypal option for my subscription checkout - what fields do I need to include on the Checkout page?

Start by making sure you've integrated Braintree on the Settings > General page. If you need help setting up your API keys, refer to How do I integrate Braintree for PaypPal payments?.

After you've added Braintree as your credit card payment option, you'll need to update both the Checkout page, the Manage Billing/Shipping page, and anywhere else you might be collecting credit card information (such as the Account Dashboard page). 

The first thing we recommend is to take a backup of your page styles to make sure you can roll back your changes in case you have any trouble. Even better, test this implementation on your development site first

Once you've taken your backup, go to Settings > Page Styles within Conjured Subscriptions, and find the section of your code where the payment should be displayed. Add the following fields:

<div data-paypal-selected>
  <p>Click "Connect" below to link your PayPal account.<br />You will still be able to review your order before you are charged.</p>
  <button type="button" id="paypal-button" data-trigger-paypal>Connect</button>
</div>
<div data-paypal-active>
  <p>Paypal Account Connected: <span data-paypal-email></span></p>
  <button type="button" id="switch-paypal-button" data-trigger-paypal>Change PayPal</button>
</div>

We've provided suggested text in the code above, but feel free to modify it and any of the styles. Just make sure to leave all the "data" parameters in place.

If you're also using a credit card processor, you might want to give your subscribers the option of choosing between using PayPal or a credit card. In that case, you'd want to add the following code to hide both the PayPal and credit card fields, and display them only when the subscriber selects which method of payment they want to use.

<style type="text/css">
  [data-paypal-selected],
  [data-paypal-active],
  [data-creditcard-selected] {
    display: none;
  }
</style>
 
<div>
  <input type="radio" name="payment" id="payment_creditcard" value="creditcard" onClick="changePaymentType(this);" />
  <label for="payment_creditcard">Pay by credit card</label>
</div>
<div>
  <input type="radio" name="payment" id="payment_paypal" value="paypal" onClick="changePaymentType(this);" />
  <label for="payment_paypal">Pay with PayPal</label>
</div>

<script type="text/javascript">
  function changePaymentType(radio) {
    document.querySelectorAll('[data-paypal-selected]').style.display = "none";
    document.querySelectorAll('[data-creditcard-selected]').style.display = "none";
    document.querySelectorAll('[data-' + radio.value + '-selected]').style.display = "block";
  }
</script>

That's all there is to it - Braintree should now function as your PayPal processor. If you have any trouble with the implementation, don't hesitate to reach out to us at support@conjured.co.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us