Stripe - Support Payment Link for Checkout

Overview

In the previous version, customers could subscribe to a Stripe Plan in a few different ways: through UM Register Forms, a direct subscribe URL (found in WP Admin > Ultimate Member > Stripe Plans), and a Subscribe button using a UM Stripe shortcode.

With the introduction of Stripe's Payment Link feature, we gain access to enhanced button settings that enable us to display icons of supported payment methods, select specific line items, customize quantities, modify the button's appearance, and even include a client_reference_id to associate it with a UM Stripe Plan. Additionally, this feature allows us to assign user roles based on each subscription status.

Note: The payment links only support subscription-based payments. Further details are provided below.

Setup

To set up the Stripe Payment Link, you have to follow the steps below:

1. Go to your Stripe dashboard.
2. On the side navigation menu, click on '+More' to show more stripe products and features.
3. Under Accept Payments, click 'Payment links'.

   

4. You’ll then be redirected to the payment links page. Click on the '+Create test payment link' button.

   

5. On the Create a payment link page, select the type of your payment link, in this example we have selected 'Products or subscriptions.' In the payment page tab, below the product, choose whether you want to add a new product or select an existing one.

   

6. Now, in the after-payment tab below the confirmation page, select “Don’t show confirmation page” and add the Stripe success page URL of your website, including this checkout URL parameter: ?umm_stripe_sid={CHECKOUT_SESSION_ID} (e.g https://yoursite.com/stripe-payment-successful/?umm_stripe_sid={CHECKOUT_SESSION_ID}). Click the 'Create link' button.

   

7. After clicking the create link button, you’ll be redirected to the payment link page for your product. If you use the link as is, it will not directly go to the Stripe Checkout page and will not connect with Ultimate Member.
8. Click on the drop-down button to view the URL parameters option, and click on it to add a parameter. You have to use the parameter below to make the payment link compatible with the UM Stripe extension:
   • ?client_reference_id=um_stripe_custom_checkout

   Note: This only supports the Subscription products. One-time payment doesn’t create Stripe customer through the Payment Link’s checkout.

   

9. Select the client reference ID from the options and enter the parameter um_stripe_custom_checkout in the field. The URL below is the payment link that you can copy and use.
   

   

10. After copying the Payment Link, you have the flexibility to paste it wherever you prefer, whether it's within a button or a direct URL link. Clicking on the payment link will then seamlessly redirect you to the Stripe Checkout page, displaying the product price.

Customize Payment Link Button

1. On your product payment link page, click on the Buy button.
2. You can configure the buttons if you want them to be button-type or card-type.

   

3. Copy the Buy button code.

   

4. Paste the code to your site,but you must add the attributes:
   • client-reference-id="um_stripe_custom_checkout”

   Example:

   <script async
     src="https://js.stripe.com/v3/buy-button.js">
   </script>
   
   <stripe-buy-button
     buy-button-id="buy_btn_1OgwRZHPd2HMKvM3NSGL5KrO"
     publishable-key="pk_test_51MnimtHPd2HMKvM3spM4adoI3RO4DbdRKU05zh4PsF0ZugoVCf53XDKgKnJGJNvd4vHOR3fjiRawBX223hj0Rjbj00RyUJsTtg"
   >
    client-reference-id="um_stripe_custom_checkout”
   </stripe-buy-button>
   	

   

5. Once you have pasted the code to your site, the button should redirect you to the stripe checkout page with the product price.